SVG: Animated BG Pattern

index.html

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1500 -1500 3000 3000" preserveAspectRatio="xMidYMid slice">
	<defs>
		<pattern id="grid1" width="100" height="173.2" patternUnits="userSpaceOnUse"><path fill-rule="evenodd" d=" M0,0 H100 V173.2 H0 M25,129.9 m20,0 a20,20 0 1,0  0,0.1 M125,129.9 m20,0 a20,20 0 1,0  0,0.1 M75,43.3 m20,0 a20,20 0 1,0  0,0.1 M-25,43.3 m20,0 a20,20 0 1,0  0,0.1"/></pattern>
		<pattern id="grid2" width="100" height="173.2" patternUnits="userSpaceOnUse"><path fill-rule="evenodd" d=" M0,0 H100 V173.2 H0 M25,129.9 m20,0 a20,20 0 1,0  0,0.1 M125,129.9 m20,0 a20,20 0 1,0  0,0.1 M75,43.3 m20,0 a20,20 0 1,0  0,0.1 M-25,43.3 m20,0 a20,20 0 1,0  0,0.1"/></pattern>
	</defs>
	<rect fill="url(#grid1)" x="-3000" y="-3000" width="6000" height="6000" transform="scale(0.9,0.9) translate(0,0) rotate(0)"/>
	<rect fill="url(#grid2)" x="-3000" y="-3000" width="6000" height="6000" transform="scale(0.9,0.9) translate(0,0) rotate(0)"/>
</svg>

script.js

window.requestAnimFrame = (function(callback) {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function(callback) {
            window.setTimeout(callback, 1000 / 60);
        };
})();


var rect = document.querySelectorAll('rect'),
 		    path = document.querySelectorAll('path'),
 		    seg = [].map.call(path,function(p){ 
          return p.pathSegList
     }),
 		    size = [].map.call(rect,function(r){ 
          return r.transform.baseVal.getItem(0) 
     }),
 		    off = [].map.call(rect,function(r){ 
          return r.transform.baseVal.getItem(1) 
     }),
 		    rots = [].map.call(rect,function(r){ 
          return r.transform.baseVal.getItem(2) 
     });

		function radius(lays,rad){
    			rad = Math.max(Math.min(rad,43),0);
    			for (var i=5;i<15;i+=3){
        				var seg2 = seg[lays].getItem(i+1);
        				seg[lays].getItem(i).x = seg2.r1 = seg2.r2 = rad;
    			}
    			return rad;
		}
//rotate
		function rot(layer,degrees){ 
      rots[layer].setRotate(degrees,0,0) 
 }
//translate
		function trans(layer,x,y){ 
      off[layer].setTranslate(x,y) 
 }
//scale
		function scale(layer,scale){ 
      size[layer].setScale(scale,scale) 
 }
//calls
radius(0,35);
radius(1,25);
rot(1,35);
scale(0,.88)
//animate
		function anim(){
			    var t = Date.now();
	    			trans(0,Math.sin(t/7000)*150,Math.sin(t/3000)*120);
    rot(1,Math.sin(t/19000)*30);
			    window.requestAnimationFrame(anim);
		}
		anim();

style.css

body{
  width:100%; 
  margin:0;
  overflow:hidden;
  background:hsla(0,5%,5%,1) url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/131045/colorful-triangles2.jpg);
background-size:cover;
}

svg {
   width:100%;
   height:100vh;
}

SVG: Animated BG Pattern.markdown

SVG: Animated BG Pattern ('-' * 24) Animated SVG Pattern over a background image.
JS used to rotate, transform, and scale pattern layers.
Check out @ryanmcnz 's tripped out version too!

A Pen by Tiffany Rayside on CodePen.

License.