mercredi 18 janvier 2017

Random SVG




<button onclick="myFunction()">Click me</button><br>
<svg id="svgOne" xmlns="http://www.w3.org/2000/svg" width="500" height="500" >
</svg>
<script>
function myFunction() {
var svgns = "http://www.w3.org/2000/svg";
for (var i = 0; i < 10; i++) {
     var x = Math.random() * 500, y = Math.random() * 500;

    var ellipse = document.createElementNS(svgns, 'ellipse');
    ellipse.setAttributeNS(null, 'cx', x);
    ellipse.setAttributeNS(null, 'cy', y);
    ellipse.setAttributeNS(null, 'rx', '50');
    ellipse.setAttributeNS(null, 'ry', '50');
    ellipse.setAttributeNS(null, 'fill', '#'+Math.round(0xffffff * Math.random()).toString(16));
    ellipse.setAttributeNS(null, 'opacity', '0.5'));
    document.getElementById('svgOne').appendChild(ellipse);
}}
</script>