Easing curves

No. 28 · SVG · Easing bench

Click to rundrag a handle

A lead screw drives a carriage across a graph board at a constant rate, which is time. A follower rides a steel band bent to the curve and lifts the element to the eased progress.

Prompt

/anatomy explain how easing curves work in CSS animations, interactive

Install

npm install anatomy-figures

In your code

page.tsx

import { Easing } from "anatomy-figures";

<Easing theme="light" />

Or load this figure on its own, so the others never download:

page.tsx

import Easing from "anatomy-figures/easing";

Theme it

Five themes (dark, light, paper, blueprint, sepia), or your own colours through tokens. Every token.

page.tsx

<Easing
  theme="light"
  tokens={{
    "--anatomy-card": "#ffffff",
    "--anatomy-lit": "#e5484d",
  }}
/>

Without React

index.html

import { define } from "anatomy-figures/element/easing";

define();

<anatomy-easing theme="light"></anatomy-easing>