<div id="container1" class="cont"></div>
<div id="container2" class="cont"></div>
<div id="cont3" class="cont"></div>
		body{
			margin: 0;
			padding: 0;
      overflow: hidden;
		}

.cont{
  display: inline-block;
}
var width = window.innerWidth;
		var height = window.innerHeight;
		var gradRotation = 0;
		var fxy = 0.15;
    var cxy = 0.4;

		var container;
		var svg;


		init();
		animate();


		function init(){
		  container = document.getElementById( 'container1' );
      c2 = document.getElementById('container2');
      c3 = document.getElementById('cont3');

		  container.innerHTML = '<svg height='+height+' width='+width+' viewbox="0 0 '+width+' '+height+'" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><radialGradient id="Gradient" cx="'+cxy+'" cy="'+cxy+'" r="0.5" fx="'+fxy+'" fy="'+fxy+'" spreadMethod="reflect" gradientTransform="rotate('+gradRotation+')"><stop offset="0%" stop-color="#CC2D78"/><stop offset="100%" stop-color="#971E7A"/></radialGradient></defs><rect x=0 y=0 width=100% height=100% fill="url(#Gradient)"></rect></svg>';
		

// c2.innerHTML = '<svg height=400 viewbox="0 0 400 400" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><radialGradient id="Gradient" cx="'+cxy+'" cy="'+cxy+'" r="0.5" fx="'+fxy+'" fy="'+fxy+'" spreadMethod="repeat" gradientTransform="rotate('+gradRotation+')"><stop offset="0%" stop-color="#CC2D78"/><stop offset="100%" stop-color="#971E7A"/></radialGradient></defs><rect x=0 y=0 width=100% height=100% fill="url(#Gradient)"></rect></svg>';

// c3.innerHTML = '<svg height=400 viewbox="0 0 400 400" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><radialGradient id="Gradient" cx="'+cxy+'" cy="'+cxy+'" r="0.5" fx="'+fxy+'" fy="'+fxy+'" spreadMethod="pad" gradientTransform="rotate('+gradRotation+')"><stop offset="0%" stop-color="#CC2D78"/><stop offset="100%" stop-color="#971E7A"/></radialGradient></defs><rect x=0 y=0 width=100% height=100% fill="url(#Gradient)"></rect></svg>';
		}

function animate(){
  requestAnimationFrame( animate );
  gradRotation += 0.5;
  // fxy += 0.001;
  // cxy += 0.001;
  init();
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.