A deliberately misspelled CSS shape library

Better edges.
Zero tracing.

Smooth, responsive containers you can copy, include, or ask an agent to use. No dependencies. No framework. No pointy little nipples.

Browse 23 shapes

Plain CSS Dependency-free ESM C1-continuous curves Human + agent readable

One file if you want it

Include the library—or steal one shape.

Named classes are the fastest path. Every catalog card also carries complete standalone CSS, including its rounded fallback.

1 · Include

<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/svhapes@0.2.2/dist/svhapes.min.css">

2 · Apply

<div class="svhape-shadow">
  <div class="svhape svhape--golden-tide svhape--padded">
    Your content
  </div>
</div>

Checking advanced shape support…

Motion, with guardrails

Animate the wrapper. Morph the path only when it can interpolate.

The safest motion is a transform on the unclipped wrapper. Direct contour morphing also works, but only when both shapes use the same command sequence and control-point count.

wrapper transform float

01 / FLOAT

Animate the wrapper, not the clipped surface. Shadows and focus rings stay intact.

same commands morph

02 / MORPH

Use matching shape() command lists for a smooth contour change. Svhapes keeps the math explicit.

hover or focus lift

03 / INTERACT

Give cards a small lift on hover and keyboard focus. Reduced-motion users get a static surface.

Compatibility rule: arbitrary Svhape IDs are not guaranteed to morph into one another. Use wrapper transforms for catalog-to-catalog transitions, or generate two same-anchor shapes yourself.

Geometry helpers

Generate the interesting edge.

Fillet corners, repeat a measured rhythm, or start with a squircle. Each recipe stays in the same normalized coordinate system and is ready to paste into a project.

FILLET

01 / FILLET

Round every corner with one responsive ratio instead of calculating entry points by hand.

REPEAT

02 / REPEAT

Give all four edges the same number of beats, or switch to the lower-level API for asymmetry.

SQUIRCLE

03 / SUPERELLIPSE

Move from an ellipse to a more rectangular contour with one exponent. Four is a good squircle start.

Inspired by open CSS Shapes conversations about fillets, repeating segments, and superellipses. These helpers generate today’s CSS; they do not wait for browser-level layout features.

The shelf

Pick a silhouette.

Agentically friendly, for real

No screenshot archaeology required.

Stable IDs, selection metadata, conservative safe insets, exact snippets, and fixed prompts are published beside the visual catalog. Agents can choose a shape without scraping this page or hallucinating a path.

svhapes prompt golden-tide --format json

Bring your own points

The math is reusable too.

Pass normalized anchors to the JavaScript API. Svhapes calculates cubic control handles so every segment enters and exits its neighbors smoothly.

// npm install svhapes
import { pointsToShape } from 'svhapes';

const clipPath = pointsToShape([
  [5, 8], [50, 3], [95, 8],
  [98, 50], [94, 92], [50, 97],
  [6, 92], [2, 50]
]);

element.style.clipPath = clipPath;

Better edges.Zero tracing.