如何实现像 deno.com 上那样的 SVG 路径动画？

Question

我在Deno官网上看到了一个SVG路径动画效果。 我想知道如何达到类似的效果。

能否请您提供一些实现思路，如果可能的话，提供一些代码示例吗？我们将不胜感激。

Answer 1

一般来说，有几种方法可以做到这一点。您可以只使用制作的 svg，例如，在 Illustrator 中，您可以本机“绘制”svg，也可以在纯 CSS 中完成。然后您可以在 svg、css 或 JS 中为其添加动画效果。下面是最简单的示例，当您想要制作此类动画时，它应该为您提供一些指导。当然，你需要对渐变进行更多的打磨，使其更接近示例中的渐变，但这并不困难。您可能需要添加额外的过滤器，进行实验。您只需要使用

SVG filters

，这是一个强大的工具，但有时会被低估。

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

另一方面，如果你在网站上制作很多这样的动画，它可能会很昂贵。您可以像示例中那样在前面添加一个圆圈等

* {
  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>