Comet trail

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/motion-path/comet-trail.html
  Desc   : Comet sweeping an arc with a fading clone-particle tail
  ============================================================
-->
<div class="sg-comet-trail" style="--sg-color:#7F77DD; --sg-size:280px;">
  <svg viewBox="0 0 200 110" aria-hidden="true" focusable="false">
    <path id="sg-comet-trail-arc" class="sg-comet-trail-arc" d="M -12 96 C 40 18, 130 6, 214 58" />
    <path class="sg-comet-trail-star" d="M40 78 l1.4 3 3 1.4 -3 1.4 -1.4 3 -1.4 -3 -3 -1.4 3 -1.4 Z" />
    <path class="sg-comet-trail-star sg-comet-trail-star2" d="M156 84 l1.2 2.6 2.6 1.2 -2.6 1.2 -1.2 2.6 -1.2 -2.6 -2.6 -1.2 2.6 -1.2 Z" />
    <circle class="sg-comet-trail-p5" r="0.8">
      <animateMotion dur="4s" begin="0s" repeatCount="indefinite"><mpath href="#sg-comet-trail-arc" /></animateMotion>
    </circle>
    <circle class="sg-comet-trail-p4" r="1.3">
      <animateMotion dur="4s" begin="-0.1s" repeatCount="indefinite"><mpath href="#sg-comet-trail-arc" /></animateMotion>
    </circle>
    <circle class="sg-comet-trail-p3" r="1.9">
      <animateMotion dur="4s" begin="-0.2s" repeatCount="indefinite"><mpath href="#sg-comet-trail-arc" /></animateMotion>
    </circle>
    <circle class="sg-comet-trail-p2" r="2.6">
      <animateMotion dur="4s" begin="-0.3s" repeatCount="indefinite"><mpath href="#sg-comet-trail-arc" /></animateMotion>
    </circle>
    <circle class="sg-comet-trail-halo" r="7">
      <animateMotion dur="4s" begin="-0.4s" repeatCount="indefinite"><mpath href="#sg-comet-trail-arc" /></animateMotion>
    </circle>
    <circle class="sg-comet-trail-head" r="4">
      <animateMotion dur="4s" begin="-0.4s" repeatCount="indefinite"><mpath href="#sg-comet-trail-arc" /></animateMotion>
    </circle>
  </svg>
</div>
<style>
  .sg-comet-trail {
    width: var(--sg-size);
  }
  .sg-comet-trail svg {
    display: block;
    width: 100%;
  }
  .sg-comet-trail-arc {
    fill: none;
    stroke: rgba(128, 128, 128, 0.18);
    stroke-width: 1;
    stroke-dasharray: 3 6;
  }
  .sg-comet-trail circle {
    fill: var(--sg-color);
  }
  .sg-comet-trail-head { opacity: 1; }
  .sg-comet-trail-halo { opacity: 0.18; }
  .sg-comet-trail-p2 { opacity: 0.6; }
  .sg-comet-trail-p3 { opacity: 0.4; }
  .sg-comet-trail-p4 { opacity: 0.25; }
  .sg-comet-trail-p5 { opacity: 0.12; }
  .sg-comet-trail-star {
    fill: var(--sg-color);
    opacity: 0.5;
    animation: sg-comet-trail-twinkle 2.6s ease-in-out infinite;
  }
  .sg-comet-trail-star2 {
    animation-delay: -1.3s;
  }
  @keyframes sg-comet-trail-twinkle {
    0%, 100% { opacity: 0.5; transform: none; }
    50%      { opacity: 0.1; }
  }
</style>