CloneCSS-GASP SpeedLines

index.html

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 600">
  <g class="speedLines">
    <line x1="0" y1="0" x2="0" y2="0"></line>
    <line x1="0" y1="0" x2="0" y2="0"></line>
    <line x1="0" y1="0" x2="0" y2="0"></line>
    <line x1="0" y1="0" x2="0" y2="0"></line>
    <line x1="0" y1="0" x2="0" y2="0"></line>
    <line x1="0" y1="0" x2="0" y2="0"></line>
    <line x1="0" y1="0" x2="0" y2="0"></line>
    <line x1="0" y1="0" x2="0" y2="0"></line>
    <line x1="0" y1="0" x2="0" y2="0"></line>
    <line x1="0" y1="0" x2="0" y2="0"></line>
    <line x1="0" y1="0" x2="0" y2="0"></line>
    <line x1="0" y1="0" x2="0" y2="0"></line>
  </g>
</svg>

playground.json

{
  "scripts": [
    "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"
  ],
  "styles": []
}

script.js

const colorArray = ["violet", "blue", "green", "yellow", "red", "orange", "white", "pink"];

gsap
  .fromTo(
    ".speedLines line",
    {
      attr: {
        y1: 0,
        y2: "random(20, 200)"
      },
      x: "random(0, 600)",
      y: -200,
      stroke: gsap.utils.wrap(colorArray)
    },
    {
      duration: "random(0.2, 0.6)",
      y: 600,
      ease: "none",
      stagger: {
        each: 0.2,
        repeat: -1,
        repeatRefresh: true
      }
    }
  )
  .seek(100);

style.css

@import url("https://fonts.googleapis.com/cssfamily=Montserrat:400,700&display=swap");

* {
  box-sizing: border-box;
}

body {
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #1d1d1d;
  display: grid;
  place-items: center;
  font-family: Montserrat;
}

.svg {
  width: 100%;
  height: 100%;
}