spb/svgarden Public

1<!--2  ============================================================3  SVGarden — https://www.svgarden.dev4  Author : Simon-Pierre Boucher5  Contact: contact@spboucher.ai6  File   : snippets/motion-path/comet-trail.html7  Desc   : Comet sweeping an arc with a fading clone-particle tail8  ============================================================9-->10<!--svgarden11title: Comet trail12slug: comet-trail13category: motion-path14tags: [motion, smil, comet, particles]15difficulty: intermediate16techniques: [animateMotion, begin-offset-clones, opacity-falloff, mpath]17how_it_works: >18  The tail is not drawn — it is five clones of the head flying the exact same19  <animateMotion> route, each with a slightly less negative begin value, so20  every clone runs a fixed fraction of a second behind the one before it.21  Negative begins matter: they mean every particle is already mid-flight on22  the first frame, so nothing pops in from the SVG origin. Shrinking radii and23  falling opacity down the chain turn discrete circles into a convincing24  streak, and two CSS-twinkling stars give the sky depth for almost free.25customizable:26  - { var: "--sg-color", label: "Comet", type: color, default: "#7F77DD" }27  - { var: "--sg-size",  label: "Size",  type: range, min: 160, max: 460, default: 280, unit: px }28created: 2026-08-1029-->30<div class="sg-comet-trail" style="--sg-color:#7F77DD; --sg-size:280px;">31  <svg viewBox="0 0 200 110" aria-hidden="true" focusable="false">32    <path id="sg-comet-trail-arc" class="sg-comet-trail-arc" d="M -12 96 C 40 18, 130 6, 214 58" />33    <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" />34    <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" />35    <circle class="sg-comet-trail-p5" r="0.8">36      <animateMotion dur="4s" begin="0s" repeatCount="indefinite"><mpath href="#sg-comet-trail-arc" /></animateMotion>37    </circle>38    <circle class="sg-comet-trail-p4" r="1.3">39      <animateMotion dur="4s" begin="-0.1s" repeatCount="indefinite"><mpath href="#sg-comet-trail-arc" /></animateMotion>40    </circle>41    <circle class="sg-comet-trail-p3" r="1.9">42      <animateMotion dur="4s" begin="-0.2s" repeatCount="indefinite"><mpath href="#sg-comet-trail-arc" /></animateMotion>43    </circle>44    <circle class="sg-comet-trail-p2" r="2.6">45      <animateMotion dur="4s" begin="-0.3s" repeatCount="indefinite"><mpath href="#sg-comet-trail-arc" /></animateMotion>46    </circle>47    <circle class="sg-comet-trail-halo" r="7">48      <animateMotion dur="4s" begin="-0.4s" repeatCount="indefinite"><mpath href="#sg-comet-trail-arc" /></animateMotion>49    </circle>50    <circle class="sg-comet-trail-head" r="4">51      <animateMotion dur="4s" begin="-0.4s" repeatCount="indefinite"><mpath href="#sg-comet-trail-arc" /></animateMotion>52    </circle>53  </svg>54</div>55<style>56  .sg-comet-trail {57    width: var(--sg-size);58  }59  .sg-comet-trail svg {60    display: block;61    width: 100%;62  }63  .sg-comet-trail-arc {64    fill: none;65    stroke: rgba(128, 128, 128, 0.18);66    stroke-width: 1;67    stroke-dasharray: 3 6;68  }69  .sg-comet-trail circle {70    fill: var(--sg-color);71  }72  .sg-comet-trail-head { opacity: 1; }73  .sg-comet-trail-halo { opacity: 0.18; }74  .sg-comet-trail-p2 { opacity: 0.6; }75  .sg-comet-trail-p3 { opacity: 0.4; }76  .sg-comet-trail-p4 { opacity: 0.25; }77  .sg-comet-trail-p5 { opacity: 0.12; }78  .sg-comet-trail-star {79    fill: var(--sg-color);80    opacity: 0.5;81    animation: sg-comet-trail-twinkle 2.6s ease-in-out infinite;82  }83  .sg-comet-trail-star2 {84    animation-delay: -1.3s;85  }86  @keyframes sg-comet-trail-twinkle {87    0%, 100% { opacity: 0.5; transform: none; }88    50%      { opacity: 0.1; }89  }90</style>91