SVG&Canvas Notes7:线条光影效果

Demo

效果

代码

<div class="container">
        <svg class="svgdemo">
          <path class="line"
            d="M 400 160 A 2 2 90 0 0 260 160 A 2 2 90 0 0 120 160 C 120 230 260 270 260 350 C 260 270 400 230 400 160" />
        </svg>
        <svg>
          <path class="line line2"
            d="M 400 160 A 2 2 90 0 0 260 160 A 2 2 90 0 0 120 160 C 120 230 260 270 260 350 C 260 270 400 230 400 160" />
        </svg>
</div>



.svgdemo {
  position: absolute;
}

.container {
  // position: relative;
}

.line {
  fill: none;
  stroke-width: 10;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke: #fff;
  stroke-dasharray: 328 600;
  animation: rotate 2s infinite linear;
  --colorA: #f24983;
  filter:
    drop-shadow(0 0 2px var(--colorA)) drop-shadow(0 0 5px var(--colorA)) drop-shadow(0 0 10px var(--colorA)) drop-shadow(0 0 15px var(--colorA)) drop-shadow(0 0 25px var(--colorA));


}

.line2 {
  animation: rotate 2s infinite -1s linear;
  --colorA: #37c1ff;
}

@keyframes rotate {
  0% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: 928;
  }
}