// HTML
<!DOCTYPE html>
<html>
<head>
<title>JSVG</title>
<style>
html,body {
margin:0;
padding:0;
}
</style>
</head>
<body>
<svg width="1200" height="600"></svg>
<script src="script.js"></script>
<script>jsvg()</script>
</body>
</html>
// SCRIPT
function jsvg() {
var d=670;
while (d>=1) {
var svg = document.getElementsByTagName('svg')[0];
var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'circle');
var newElementA = document.createElementNS("http://www.w3.org/2000/svg", 'animate');
var c0='#'+Math.round(0xFFFFFF * Math.random()).toString(16);
var c1='#'+Math.round(0xFFFFFF * Math.random()).toString(16);
newElement.setAttribute("cx","600");
newElement.setAttribute("cy","300");
newElement.setAttribute("r",d);
newElement.style.fill = c0;
newElementA.setAttribute("attributeName","fill");
newElementA.setAttribute("begin","0s");
newElementA.setAttribute("dur","4s");
newElementA.setAttribute("repeatCount","indefinite");
newElementA.setAttribute("values",""+c0+";"+c1+";"+c0+"");
svg.appendChild(newElement);
newElement.appendChild(newElementA);
d=d-1;
}}
