mardi 13 mars 2018

Toujours plus haut




<svg width="400" height="400" id="svgGC" onclick="functionGC()">
<rect width="400" height="400" fill="beige" x="0" y="0"/>
</svg>

<script>
function functionGC(){
for (var i=0;i<20;i++){
var x = Math.floor(400*Math.random());
var w = Math.floor(90*Math.random())+10;
var h = Math.floor(90*Math.random())+10;

var rect1 = document.createElementNS(svgGC.namespaceURI, 'rect');
    rect1.setAttribute('x', x);
    rect1.setAttribute('y', 400-h);
    rect1.setAttribute('fill', 'darkblue');
    rect1.setAttribute('width', w);
    rect1.setAttribute('height', h);
    rect1.setAttribute('opacity', 0.2);

var rect2 = document.createElementNS(svgGC.namespaceURI, 'rect');
    rect2.setAttribute('x', x+(w/4));
    rect2.setAttribute('y', 400-2*h);
    rect2.setAttribute('fill', 'royalblue');
    rect2.setAttribute('width', w/2);
    rect2.setAttribute('height', h);
    rect2.setAttribute('opacity', 0.4);

var rect3 = document.createElementNS(svgGC.namespaceURI, 'rect');
    rect3.setAttribute('x', x+(w/4)+(w/8));    
    rect3.setAttribute('y', 400-3.5*h);
    rect3.setAttribute('fill', 'lightblue');
    rect3.setAttribute('width', w/4);
    rect3.setAttribute('height', 1.5*h);
    rect3.setAttribute('opacity', 0.6);

 svgGC.appendChild(rect1);
 svgGC.appendChild(rect2);
 svgGC.appendChild(rect3);

}}

 functionGC()
</script>