Clean structure · C.3
Shaped section edge
A tear along a perforation. The page is still paper, but this one edge is not a straight line.
One section ends in a curve, a slant or a silhouette instead of a straight seam, drawn as an SVG in the next section's colour.
4 knobs
How it works
The reference uses exactly two of these on a page of nine bands: an arc under the hero and a skyline under the certifications. That restraint is the point. A shaped edge on every section is noise; on one or two it is the page's one flourish.
An absolutely positioned SVG sits at the bottom of the band, width 100%, with preserveAspectRatio="none" so the path stretches to any width while its height stays a fixed number of pixels. The path is filled with the NEXT band's colour, so it reads as that band biting into this one. The bowl and the arch are each one quadratic curve. The silhouette is a seeded run of blocks and spires generated here, not traced from anything. The depth is capped at a share of the band width so a phone does not get a 120px bite out of a 360px band.
The knobs, named
Shape, depth, silhouette seed, and whether the fill follows the next band. All ours. The reference measured a 200px bowl and a 100px silhouette at desktop width.
| Knob | Source | What it teaches |
|---|---|---|
| Shape | ours | Bowl: the band bulges down into the next one, as the reference hero does. Arch: the next band bulges up. Silhouette is the most specific, so it suits the fewest brands. |
| Depth | ours | Capped at 22% of the band width, so the readout shows what a phone gets. |
| Silhouette seed | ours | Regenerates the skyline. Only used by the silhouette shape. |
| Fill follows next band | ours | Off, the edge is filled with a mismatched colour and you can see the seam the shape was meant to hide. |
sourced means the source names this parameter. ours means the source names none and the knob is our design against the mechanism. No knob here is invented and passed off as sourced.
Evidence
VERIFIED (rendered)
fmjfuelpartner.com, 2026-10-15: the hero section carries a bottom divider SVG (preserveAspectRatio none, 200px tall, filled white) whose path is a single arc that leaves the hero bulging down into the next band (our bowl); the certifications band carries a 100px white skyline silhouette. Two shaped edges across nine bands. Our bowl, arch, slant and generated silhouette are original paths.
- Seen on
- fmjfuelpartner.com (design study 2026-10-15).
- Dependencies
- vanilla SVG
- Difficulty
- easy
- Performance
- None. One static path.
- Accessibility and the floor
- Decorative: the SVG carries aria-hidden. It never holds text, and nothing animates.
Notes
Composability. Sits under a hero or a photo band. Pair with C.1 in the next band so the curve hands straight into an opener.