data-morph
Shape morphing animations, evenodd cutouts, and two-layer shaped borders — advanced CSS shape() techniques.
Shape Animation
Apply data-morph to any element to animate its clip-path between matching-point shapes using CSS keyframes. All animations respect prefers-reduced-motion.
| Value | Effect | Duration |
|---|---|---|
pulse |
Subtle inset throb between full and slightly inset rectangles | 3s |
breathe |
Organic morphing between curved top and curved bottom shapes | 4s |
wave |
Horizontal wave undulation on top and bottom edges | 2.5s |
Shape animation works because shape() supports interpolation between matching-point paths. Both keyframe states must have the same number of points for smooth transitions.
Theme overrides
The cyber theme uses steps(8) timing for a glitchy digital feel. The kawaii theme uses bouncy easing for playful motion.
Cutouts
Apply data-cutout to punch a hole through an element using the evenodd fill rule. The outer rectangle stays, the inner shape is removed.
| Value | Inner Shape |
|---|---|
circle |
Centered circle cutout |
diamond |
Centered diamond cutout |
arch-window |
Arched window opening |
hex |
Centered hexagon cutout |
badge-corner |
Quarter-circle in top-right corner |
Cutouts work by defining two closed paths in one shape(): the outer rectangle and the inner shape. The evenodd fill rule means the overlapping area (the inner shape) is transparent.
Shaped Borders
Apply data-border-shape to a wrapper element for a colored shape outline. Uses a two-layer technique: a ::before pseudo-element provides the colored background at full shape, and the inner content clips to the same shape inset by --shape-border.
| Value | Shape |
|---|---|
hexagon |
Six-sided hexagonal frame |
diamond |
Rotated square diamond frame |
arch |
Rounded arch frame |
Adjust border thickness with --shape-border (default: 4px). The border color comes from --color-primary by default.