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>