-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
3 lines (3 loc) · 4.49 KB
/
index.html
1
2
3
<!DOCTYPE html><html><head><meta charset="UTF-8"><style>html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0} 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; } </style></head><body><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>
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; } function rot(layer,degrees){ rots[layer].setRotate(degrees,0,0) } function trans(layer,x,y){ off[layer].setTranslate(x,y) } function scale(layer,scale){ size[layer].setScale(scale,scale) } radius(0,35); radius(1,25); rot(1,35); scale(0,.88);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();
</script></body></html>