← all topics

Clip-Path Reveals

CSS

clip-path defines the visible region of an element. Animating between shapes creates reveal transitions — the browser interpolates between compatible path types.

A
A
B
B
C
C
D
D
E
E
F
F
Controls
shape
500ms

hidden
circle(0% at 50% 50%)

visible
circle(75% at 50% 50%)

concepts

clip-path

Defines the visible region of an element using CSS shape functions. Pixels outside the shape are hidden — but the element still occupies space in the layout.

animatable shapes

The browser interpolates between compatible shape types: circle↔circle, polygon↔polygon (same vertex count), inset↔inset. Mixing types causes a jump instead of a transition.

wipe pattern

A polygon that starts as a zero-width strip on one edge and expands to fill the element — polygon(0 0, 0 0, 0 100%, 0 100%) → polygon(0 0, 100% 0, 100% 100%, 0 100%).

circle reveal

circle(0% at X% Y%) expands from a radius of zero. The origin point controls the feel: center = iris open, corner = burst, edge = sweep.

core pattern

.panel {
  clip-path: circle(0% at 50% 50%);  /* hidden — radius = 0 */
  transition: clip-path 500ms ease-in-out;
}
.panel.revealed {
  clip-path: circle(75% at 50% 50%); /* visible */
}

/* Wipe-right variant */
.hidden  { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
.visible { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }