SVG Animator

Create stunning SVG animations online. Choose from 30+ effects including fade, rotate, scale, and more.

SVG Animator

Input

Paste SVG

<svg width="140" height="140" viewBox="0 0 212 304" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="pinkGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#FF6B9D;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#C44569;stop-opacity:1" />
    </linearGradient>
    <linearGradient id="purpleGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#8B5CF6;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#7C3AED;stop-opacity:1" />
    </linearGradient>
    <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
      <feDropShadow dx="2" dy="2" stdDeviation="3" flood-color="#000000" flood-opacity="0.3"/>
    </filter>
  </defs>
  <path d="M22.9713 83.7763C40.2916 96.1174 64.5603 85.226 66.7903 64.0081C67.8993 53.4573 63.1469 44.2713 55.6899 38.7429L22.9713 83.7763Z" fill="url(#pinkGradient)" filter="url(#shadow)"></path>
  <path d="M72.2712 16.3844C64.6876 10.8746 54.3772 9.11768 44.5903 13.4751C25.0165 22.19 22.2171 48.8258 39.5511 61.4197L72.2712 16.3844Z" fill="url(#purpleGradient)" filter="url(#shadow)"></path>
</svg>

Effect

Tip: For Morph Shape, add data-morph-to="M...Z" on a path.

Live Preview