Modules Shape Morph & Blobs
Shape Morph & Blobs
An SVG shape that slowly turns into other shapes: in a calm loop, as the page scrolls or when you hover a card. Pick from eleven presets, paste your own path data or upload an SVG file. And any row can float soft, slowly changing blobs behind its content.
↓ The pace is slow on purpose, so every change is easy to follow. With reduced motion turned on you see still shapes.
Live demo · Pro · Shape Morph
A slow loop of shapes
The Shape Morph module plays its shapes in order and loops back. Left: four presets with a gradient fill and a small turn per shape. Right: an image fills the shape, so a photo changes outline as it plays. Each morph takes 2.5 seconds, then the shape rests.
Live demo · Pro · Shape Morph on scroll
Shapes that follow the scroll
With Morph: as the page scrolls, the shape moves through its list while it crosses the screen: circle, star, hexagon, flower and heart. Scroll back up and it plays in reverse.
Live demo · Pro · Shape Morph on hover
Cards that change shape on hover
With Morph: on hover and Hover over: its column, the icon shape changes when the pointer (or keyboard focus) enters the card and changes back when it leaves. On touch screens it morphs when the card is half in view.
Live demo · Pro · Blob Background
Soft blobs behind any row
Switch on Blob Background in a row’s Kinetic tab. One to three blurred blobs float behind the content, each slowly changing shape every nine seconds and drifting a little. They never catch clicks and screen readers skip them.
Calm motion,
made in one switch.
Colours, placement, size, softness, opacity and speed are all in the row settings.
Live demo · Pro · Your own shapes
Paste paths or upload an SVG
Choose Shapes from: pasted SVG paths and paste one path per line, or an SVG file to use every path in it. Each shape is scaled to the same square, so shapes drawn at any size mix cleanly. These three were pasted: a leaf, a crescent moon and a speech bubble.
Pasted path data
M20,180 C20,80 80,20 180,20 C180,120 120,180 20,180Z M120,20 A80,80 0 1 0 180,130 A64,64 0 1 1 120,20Z M40,30 H160 C175,30 185,40 185,55 V120 C185,135 175,145 160,145 H95 L60,178 L66,145 H40 C25,145 15,135 15,120 V55 C15,40 25,30 40,30Z
Only the outer outline of each path is used, so shapes with holes become solid. Up to eight shapes per module.
How to use it
Where to find it
- Add Shape Morph from the Kinetic modules. Under Shapes pick up to four presets, paste path data (one shape per line, up to eight) or choose an SVG file.
- Under Motion choose the morph: in a slow loop (morph time and hold), as the page scrolls or on hover (of the shape, its column or its row). Turn per shape adds a gentle rotation.
- Under Style set the width per device, the alignment and the fill: a colour, a gradient or an image, plus an optional outline.
- For blobs, open a row’s Kinetic tab and switch on Blob Background: one to three blobs, their colours, placement, size, softness, opacity, shape-change time and drift.
- Shapes are decorative and hidden from screen readers unless you give them an Accessible label (worth it for image fills).
Everything pauses while it is off screen. Visitors who prefer reduced motion, devices you leave out and the builder (unless the motion preview is on) see still shapes.
Works with
- Any row, column or card layout
- Images from the Media Library or a connected field
- Scroll Effects and Sticky on the module
- Section templates and saved rows
Good to know
- Pro feature, one switch in Settings
- Plain SVG, no libraries; a few KB of script
- Slow by default: morphs in seconds, not milliseconds
- Still shapes with reduced motion
Kinetic Modules
Make your Beaver Builder sites move.
Start with the free plugin. Add Pro when a project needs the big effects.