SVG SMIL Animation


Demo

Basic Animation

Morphing Animation

How to

vue

<template>
    <svg class="w-full max-w-[300px]" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
      <path d="M...">
        <animate
          attributeName="d"
          dur="9s"
          values="M...; M...; M...; M..."
          fill="freeze"
          keyTimes="0; 0.4; 0.6; 1"
          repeatCount="indefinite"
        ></animate>
      </path>
    </svg>
<template>