- const lineSize = 0.3;
- const lineAmount = 50;
- const lineSizeDeviation = 0.5;
- const duration = 6;
- const delayFraction = 0.5;
- const range = n => Array(n).fill(0).map((a, i) => i);
svg(viewbox="0 0 100 100" id="warp")
defs
radialGradient(id="grad1")
stop(offset="30%" stop-color="#000")
stop(offset="95%" stop-color="rgba(0,0,0,0)")
each i in range(100)
- const r1 = Math.random();
- const delay = Math.random() * delayFraction;
- const r3 = Math.random();
path(
fill="#fff"
transform=`rotate(${r1 * 360} 50 50)`)
animate(
attributeName="d"
dur=`${duration}s`
keyTimes=`0;${delay};${delay + (1 - delay) / 2};1`
repeatCount="indefinite"
values=`M50 50L50 50L50 50;M50 50L50 50L50 50;M50 50L0 0L${lineSize + r3 * lineSizeDeviation} 0;M0 0L0 0L${(lineSize + r3 * lineSizeDeviation) / 2} 0`)
circle(cx="50" cy="50" r="20" fill="url(#grad1)")
View Compiled
body
background-color: #000
display: flex
justify-content: center
#warp
height: 100vh
View Compiled
// no js here
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.