How can I implement an SVG path animation like the one on deno.com?

Question

I saw a SVG path animation effect on the Deno official website. I would like to know how to achieve a similar effect.

Could you please provide me with some implementation ideas, and if possible, some code examples? That would be much appreciated.

Answer 1

Generally, there are several ways to do this. You can use just an svg made, for example, in Illustrator, you can "draw" the svg natively, it can be done in pure CSS, as well. Then you can animate it inside the svg, in css, or in JS. Below is the simplest example that should give you some direction when you want to make such an animation. Of course, you need to polish the gradient more to get it closer to the one in the example, but it's not difficult. You may need to add additional filters, experiment. You just need to work with SVG filters, which are a powerful tool, sometimes underestimated.

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter

On the other hand, if you make many such animations on the website, it can be expensive. You can add a circle on the front as in the example, etc.

* {
  background-color: rgb(38, 38, 38);
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}
@keyframes draw {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

#path_mask {
  stroke-dasharray: 500;
  stroke-dashoffset: 1000;
  animation: draw 6s linear infinite;
}

<svg width="400" height="200">
      <defs>
        <linearGradient id="comet-gradient" x1="50%" y1="0%" x2="0%" y2="0%">
          <stop offset="0%" stop-color="rgba(112,255,175,1)"></stop>
          <stop offset="100%" stop-color="rgba(112,255,175,0)"></stop>
        </linearGradient>
      </defs>
      <polyline
        id="path"
        points="50,100 100,50 150,100 200,50 250,100 300,50
      350,100"
        fill="none"
        stroke="#444444"
        stroke-width="2"
      />

      <polyline
        id="path_mask"
        points="50,100 100,50 150,100 200,50 250,100 300,50
        350,100"
        fill="none"
        stroke="url(#comet-gradient)"
        stroke-width="2"
      />
    </svg>