<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>