@easemate/morph - Shape Morphing Demo

A comprehensive demo showcasing all morph plugin features including path morphing, gooey animations, squircle shapes, text morphing, elastic effects, and more.

1. Basic Path Morphing

Morph between different SVG paths smoothly

Square → Circle
Circle → Star
Triangle → Heart

2. Elastic Border Mesh

Sample evenly spaced border points from a DOM element and deform them elastically. Hover near the element to pull the border, or press buttons to run animations.

64
20
120
20
0.6
220
18

3. Text Morph Effects

Hover over items to see text transition effects. Toggle between gooey blur effect or SVG path morphing.

4
30
800
24

4. Elastic SVG Effects

Spring-based elastic deformations for UI elements

Elastic Button
Elastic Dropdown
Elastic Sidebar

5. Circle & Rect Helpers

Built-in helpers for common shape transformations

toCircle()
fromCircle()
toRect()

6. Squircle (iOS-style) Clip Path

Smooth superellipse corners like iOS app icons

Animate Radius
Squircle
Static Squircle
Static

7. Improved Gooey Effect

Enhanced merging/separating elements with better contrast and edge handling

8. Stroke Animations

Draw and animate SVG stroke paths

Draw Line
Stroke Animation

9. Clip Path Animations

Reveal and hide content with animated clip paths

Circle Reveal
Revealed!
Polygon Mask
Masked

10. Password Reveal/Hide

Morphs characters between dots and letters with smooth SVG path animations

11. DOM + Morph Combined

Demonstrates DOM and Morph plugins working together with same target types

12. Complex Path Morphing

Advanced morphing between complex paths including icons with multiple contours

Icon Sequence
Logo Morph
Geometric Morph