A Pen By
Fabio Ottaviani

` ````
<!--
Follow me on
Twitter: https://twitter.com/supahfunk
Codepen: https://codepen.io/supah/
-->
<svg></svg>
```

` ````
html, body {
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
}
svg {
width: 100vw;
height: 100vh;
line {
stroke-width: 2px;
transform-origin: center;
}
}
```

` ````
function init() {
var svg = document.querySelector("svg"),
width = document.body.clientWidth,
height = document.body.clientHeight,
centerX = width / 2,
centerY = height / 2,
lines = 200,
angle = 0,
length = 200,
increase = Math.PI * 2 / lines,
start = 0,
rAF;
svg.innerHTML = "";
for (i = 0; i < lines; i++) {
var line = document.createElementNS("http://www.w3.org/2000/svg", "line");
setAttributes(line, {
x1: length * Math.sin(angle) + centerX,
y1: length * Math.cos(angle) + centerY,
x2: 200 * Math.sin(angle + 300) + centerX,
y2: 200 * Math.cos(angle + 300) + centerY,
style: 'stroke: hsla(' + Math.floor(359 / lines * i) + ', 60%, 50%, .3)'
});
angle += increase;
svg.appendChild(line);
}
everyLine = document.querySelectorAll("line");
function animateCirle(){
angle += increase * 50;
for (i = 0; i < everyLine.length; i++) {
angle += increase;
TweenMax.to(everyLine[i], 1, {
attr: {
x1: length * Math.sin(angle + 100) + centerX,
y1: length * Math.cos(angle + 100) + centerY
},
delay: 0.002 * i,
ease: Power4.easeInOut
});
TweenMax.to(everyLine[i], 1, {
attr: {
x2: 200 * Math.sin(angle + 400) + centerX,
y2: 200 * Math.cos(angle + 400) + centerY
},
delay: 0.004 * i,
ease: Power4.easeInOut
});
}
}
setInterval(function(){
angle ++;
animateCirle();
}, 2500);
angle++;
animateCirle();
}
init();
window.addEventListener("resize", init);
function setAttributes(el, options) {
Object.keys(options).forEach(function(attr) {
el.setAttribute(attr, options[attr]);
});
}
```

999px

Loading
..................

Alt F
Opt F
Find & Replace

Also see: Tab Triggers