Skip to content

Instantly share code, notes, and snippets.

@durhambell

durhambell/SVG: Animated BG Pattern.markdown

Created May 14, 2015 06:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save durhambell/558a1d174ee1936e510a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save durhambell/558a1d174ee1936e510a to your computer and use it in GitHub Desktop.
Download ZIP
SVG: Animated BG Pattern
Raw
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>
Raw
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();
Raw
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;
}
Raw
SVG: Animated BG Pattern.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment