- 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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.