Toggle navigation
☰
HTML
CSS
Scripting
Database
<!doctype html> <title>Example</title> <svg width="400" height="200" viewBox="0 0 200 100"> <!-- The path for the object to follow --> <path id="advancedPath" d="M 10 90 Q 100 -20, 190 90" fill="none" stroke="#eee" stroke-width="2" /> <!-- The object with non-linear speed --> <g fill="tomato"> <path d="M -5 -3 L 5 0 L -5 3 Z" /> <animateMotion dur="4s" repeatCount="indefinite" rotate="auto" keyTimes="0; 0.5; 1" keyPoints="0; 0.5; 1" calcMode="spline" keySplines="0.1 0.5 0.5 0.9; 0.5 0.1 0.9 0.5"> <mpath href="#advancedPath" /> </animateMotion> </g> <text x="100" y="95" font-size="6" text-anchor="middle" font-family="sans-serif">Slowing at the peak (Spline easing)</text> </svg>
