S-Curve Arrow

Fleche qui parcourt une courbe S smooth entre des etapes. Rotation automatique.

autoSVGanimateMotiontimelineprocess

Trigger: Automatique (boucle)

CSS requis: Non

Difficulte: medium

Preview live

Code

<svg viewBox="0 0 500 160" overflow="visible">
  <defs><path id="s-path" d={motionPath} /></defs>
  <g>
    <animateMotion dur="20s" repeatCount="indefinite" rotate="auto"
      keyPoints="0;1" keyTimes="0;1"
      calcMode="spline" keySplines="0.42 0 0.58 1">
      <mpath href="#s-path" />
    </animateMotion>
    <polygon points="-4.5,4 4.5,0 -4.5,-4" fill="currentColor" />
  </g>
</svg>

Instructions

Definissez votre motionPath comme une courbe S avec des C (cubic bezier). Le polygon est la fleche qui suit le path avec rotate='auto'. Ajustez dur pour la vitesse et keySplines pour l'easing.