spb/svgarden Public
SVGarden — searchable bank of 74 self-contained SVG+CSS animation snippets (svgarden.dev)
HTML 79.2%
Astro 10.3%
JavaScript 6%
CSS 3.7%
Shell 0.8%
1<!--2 ============================================================3 SVGarden — https://www.svgarden.dev4 Author : Simon-Pierre Boucher5 Contact: contact@spboucher.ai6 File : snippets/morph/blob-morph.html7 Desc : Organic blob morphing between path shapes with SMIL8 ============================================================9-->10<!--svgarden11title: Blob morph12slug: blob-morph13category: morph14tags: [morph, blob, smil, organic]15difficulty: advanced16techniques: [SMIL-path-morph, matched-path-structure, calcMode-spline, keySplines]17how_it_works: >18 Path morphing only interpolates when every shape has the exact same command19 skeleton — here, three blobs each built from four cubic curves, so the20 browser can tween control point to control point. A SMIL <animate> on the d21 attribute cycles through the values list and back to the start for a seamless22 loop; calcMode="spline" with gentle keySplines gives the organic ease between23 shapes. Mismatch a single command and the morph snaps instead of flowing.24customizable:25 - { var: "--sg-color", label: "Color", type: color, default: "#7F77DD" }26 - { var: "--sg-size", label: "Size", type: range, min: 60, max: 240, default: 120, unit: px }27created: 2026-08-1028-->29<div class="sg-blob-morph" style="--sg-color:#7F77DD; --sg-size:120px;">30 <svg viewBox="0 0 100 100" aria-hidden="true" focusable="false">31 <path>32 <animate33 attributeName="d"34 dur="8s"35 repeatCount="indefinite"36 calcMode="spline"37 keySplines="0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1"38 values="39 M50 12 C 70 12, 88 28, 86 48 C 84 68, 66 88, 46 86 C 26 84, 12 66, 14 46 C 16 26, 30 12, 50 12 Z;40 M52 8 C 74 14, 92 34, 84 52 C 76 70, 60 92, 42 84 C 24 76, 8 60, 16 42 C 24 24, 30 2, 52 8 Z;41 M46 14 C 64 6, 90 22, 90 44 C 90 66, 72 82, 52 88 C 32 94, 10 72, 12 50 C 14 28, 28 22, 46 14 Z;42 M50 12 C 70 12, 88 28, 86 48 C 84 68, 66 88, 46 86 C 26 84, 12 66, 14 46 C 16 26, 30 12, 50 12 Z" />43 </path>44 </svg>45</div>46<style>47 .sg-blob-morph {48 width: var(--sg-size);49 height: var(--sg-size);50 }51 .sg-blob-morph svg {52 display: block;53 width: 100%;54 height: 100%;55 }56 .sg-blob-morph path {57 fill: var(--sg-color);58 opacity: 0.9;59 }60</style>61