RSK World - Morphing Shapes | SVG Path Morphing, 16 Shapes, Fluid Animations | RSK World

SVG Morphing Shape Presets Playback & Display Export & Share Vanilla JS

Morphing Shapes is a single-page demo that morphs one SVG path between 16 shapes (square, circle, star, heart, blob, hexagon, noise-blob, triangle, pentagon, octagon, diamond, flower, ellipse, cross, gear, custom). Same-point-count (64 points) interpolation for smooth transitions. Features: speed & easing, autoplay, kaleidoscope (4×), trail, glow, scale, stroke, live wobble, favorites, custom shape save/randomize, export SVG, share link, copy path, fullscreen, keyboard shortcuts (arrows, 1–0, Space, R), URL hash, light/dark theme. Pure CSS & Vanilla JavaScript. By rskworld.in.

If you find this Morphing Shapes project useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download Morphing Shapes

SVG Path Morphing

Single SVG path with 64 points morphs between shapes via point interpolation (lerp). Same point count for every shape ensures smooth transitions. Easing: smooth, bounce, elastic, back, expo, circ, sine.

64 points per shape – lerpPoints() interpolates between path d
requestAnimationFrame drives morph over configurable duration
Main path #mainPath + optional trail path for ghost effect
CSS variables: --bg, --surface, --accent, --shape-scale

Project Structure & Files

morphing-shapes/ with index.html (single demo page), styles.css (layout, theme, controls), script.js (shapes, morph, UI). No build step. Open index.html or serve folder.

morphing-shapes/ – index.html, styles.css, script.js, README.md, LICENSE
No build step – open index.html or static server
Font: Outfit (Google Fonts), system-ui
Zero dependencies; vanilla HTML, CSS, JavaScript

Shape Presets

16 shapes: square, circle, star, heart, blob, hexagon, noise-blob, triangle, pentagon, octagon, diamond, flower, ellipse, cross, gear, custom. Each shape is a function returning 64 {x,y} points; polygonPoints(n) for n-gons.

squarePoints, circlePoints, starPoints, heartPoints, blobPoints
noiseBlobPoints (procedural noise2D), polygonPoints(3–8), gearPoints
custom shape from localStorage; favorites (★) and Favorites only cycle
Gradient per shape via SHAPE_GRADIENTS; updateGradient() on morph

Playback & Display

Speed 200–2000ms, easing select, cycle direction, autoplay (2/3/5/8s). Kaleidoscope (4× rotation), spin, trail, glow (0–8), size 60–140%, stroke + color, live wobble (RAF-driven point perturbation). Pause when tab hidden.

EASINGS object – smooth, bounce, elastic, back, expo, circ, sine
Kaleidoscope: 4× use of main path at 0°, 90°, 180°, 270°
Live wobble – time + per-point offset; paused during morph
prefers-reduced-motion shortens default duration

Export & Share

Export SVG (current path + gradient + optional stroke). Share link (copy URL with hash). Copy path d to clipboard. Random shape (button or R key). Fullscreen mode; click shape to cycle, Escape to close.

Export – build SVG string with viewBox 0 0 200 200, defs gradient, path d
Share – navigator.clipboard or fallback execCommand copy
Keyboard: ← → prev/next, 1–0 jump, Space play/pause, R random, Esc fullscreen
URL hash (#heart, #noise-blob) for deep link and share

What You Get

Static HTML/CSS/JS: morphing-shapes/ folder with index.html, styles.css, script.js, README.md, LICENSE (MIT). No build step. Open index.html or serve folder.

Complete source – morphing-shapes/ with HTML, CSS, JS
No build step – open index.html or static server
README.md, LICENSE (MIT) included
Technologies: HTML5, CSS3, SVG, Vanilla JS. © 2026 Molla Samser (RSK World).

Usage

Open index.html. Click shape or preset buttons to morph. Use Create your shape to save/randomize/clear custom. Playback: speed, easing, autoplay. Display: kaleidoscope, spin, trail, glow, size, stroke, wobble. Export SVG, share link, copy path.

morphing-shapes/index.html – single demo page
LocalStorage: morph-shapes-custom, morph-shapes-favorites, morph-shapes-theme
Accessibility: aria-live, labels, reduced motion, back-to-top
Author: Molla Samser | rskworld.in

Project Features

16 shapes + custom. SVG path morphing with 64-point interpolation, 7 easings, autoplay, kaleidoscope, trail, glow, scale, stroke, live wobble, favorites, export SVG, share link, fullscreen, keyboard shortcuts, light/dark theme.

Shapes – square, circle, star, heart, blob, noise-blob, polygons, diamond, flower, ellipse, cross, gear, custom
Create your shape – save current, randomize, clear; custom preset (✎)
Display – kaleidoscope, spin, trail, glow, size, stroke, wobble, favorites only
Export – SVG download, share link, copy path d, random shape