Рустам Гибадуллин,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
</head>
<body>
<svg width = "850" height = "500">
<circle id = "bubble" r = 5 cx = "450" cy = "250" fill = "gold" />
</svg>
<button id = "show_bubble" >Замостить</button>
<script>
window.addEventListener("DOMContentLoaded", function() {
var container = document.querySelector("svg");
var btn = document.querySelector("#show_bubble");
var width = +container.getAttribute("width");
var height = +container.getAttribute("height");
function rnd(min, max) {
return min + Math.random() * (max + 1 - min) | 0
}
function createSVG() {
var attr = {
r: rnd(5, 10),
"cx": rnd(0, width),
"cy": rnd(0, height),
"fill": "#" + (Math.random() * 16777216 | 16777216).toString(16).substr(1)
};
var newuse = document.createElementNS("http://www.w3.org/2000/svg", "circle");
Object.keys(attr).forEach(function(k) {
newuse.setAttributeNS(null,
k, attr[k])
});
container.appendChild(newuse)
}
btn.addEventListener("click", function () {
[].forEach.call( container.querySelectorAll('circle'), function(el) {
container.removeChild(el)
});
var num = rnd(20, 1000);
while (num--) createSVG()
})
});
</script>
</body>
</html>