Gradient descent

No. 07 · SVG · Contour model

Tap a startturn the knob

A contour model of a narrow valley, cut from stacked boards. Survey pins strung with thread mark each step down the slope, and a knob sets the learning rate.

Prompt

/anatomy explain how gradient descent finds a minimum, interactive

Install

npm install anatomy-figures

In your code

page.tsx

import { GradientDescent } from "anatomy-figures";

<GradientDescent theme="light" />

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

page.tsx

import GradientDescent from "anatomy-figures/gradient-descent";

Theme it

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

page.tsx

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

Without React

index.html

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

define();

<anatomy-gradient-descent theme="light"></anatomy-gradient-descent>