Time To

Smile!

Drag the controls to see how each number changes the shape. The code underneath updates as you go.

A laughing couple, one riding piggyback on the other

This is the next section. The curve is drawn in this colour, not the hero's — it is a bite taken out of the pink, not a shape laid on top of it. Change "Next section colour" below and watch both move together.

Your code

← Heroes

Hero edge playground

Everything here is plain CSS and one SVG path.

The curve Shape

Height 88px

How tall the shape is on screen.

Depth 50

How far the edge bends, in the path's own units.

Next section colour

Must match the section below, or you get a stripe.

Curve sits above the photo

On: the couple is cut by the curve and stands behind it. Off: they spill over into the next section. This one toggle changes the whole feel.

The field Flood, light end Flood, deep end

Floating shapes Show blobs Blob colour

Keep it close to the flood. Contrast turns depth into clutter.

Opacity 0.45 Float duration 22s

Under about 10s it reads as a loading animation.

Dot field Show dots

Two CSS lines, no elements — a tiled radial-gradient.

Dot size 1.5px Spacing 42px Fade out 70%

A mask stops it looking like graph paper.