SVG Morphing (Divi)

One shape smoothly becomes the next, for Divi 5. Each shape is a Morph Shape child module — one of 16 built-in shapes, pasted SVG code or an SVG file — and the fill colours blend along. Every example below is labelled with its settings.

1. Looping

Left: no Morph Shape added — three blobs, the default linear indigo → pink gradient, “Smooth in-out” (expo). Middle: Heart → Star → Flower with captions and shape dots, “Anticipate + overshoot” easing, hold 1 s. Right: yoyo (goes back through the shapes), turn 120° while morphing, squash & stretch, elastic easing, pause on hover.

Yoyo · turn · squash · radial

2. Four more ways to play

Once in view (plays through all the shapes once when it scrolls in) · On hover (to the second shape and back — try it) · On click (next shape each click; Enter/Space work too) · With the scroll (each shape a stage, from 95 % to 10 % of the screen, smoothing 0.5 s).

Scroll the page

3. Fills — per shape, photo, outline, glow and blend

Per-shape fills: each Morph Shape sets its own colours (solid green, linear orange, radial violet) and they blend as it morphs. Photo: the shape is a window onto a Media Library photo that drifts slightly while morphing. Outline only: no fill, a 3 px dark outline. Glow: a pink drop glow (offset 18 px, blur 30 px), multiply blend on a warm box.

Glow + multiply

4. Your own shapes — pasted SVG code

Each Morph Shape pastes SVG code: two circles → two squares → a triangle (circles, rects and polygons are converted to one outline; scripts and outside references are removed). Even a two-part shape morphs piece by piece. Fine detail (320 points), a 16:10 box (height 62 % of the width).

Pasted SVG code

5. Finished designs

Left: a dark badge card — captions on the shape in white 26 px uppercase, a dark gradient box with a 32 px radius and 30 px padding, gold dots. Middle: a hero blob 240 px wide, aligned right, turning 60° a step, linking to #shop (opens here). Right: a photo shield with a white outline and a soft shadow.