From a blank canvas, the portrait grows stroke by stroke.
Painterly stroke-based rendering · Vite · React · TypeScript
A browser oil-painting stroke animation: not a photo filter, and not a generative model. The engine paints directional strokes onto a blank canvas in phases and zones until the image emerges.
| This is | This is not |
|---|---|
| Blank-canvas stroke-based rendering (SBR) | Instant photo stylization |
| Region-aware brushes (face, hands, hair, figure, landscape) | ControlNet / diffusion inpainting |
| Five painting phases (block-in → finish) | Pixel noise posing as brushwork |
Homage to Leonardo’s Mona Lisa as a painting process. The output is an algorithmic stroke reconstruction — not a photograph of the original, and not lossless restoration.
- Blank start — painting begins on a gesso-like ground; the figure is built by strokes, not by fading in the source image.
- Structure-aware strokes — paths follow light and edge flow; fine on the face, flowing in hair, long in drapery, near-horizontal mist bands in the background.
- Zone strategy —
face/hands/hair/figure/bgeach control radius, length, opacity, and color sampling. - Compare mode — when finished, drag a slider against the reference (Wikimedia when available, local fallback otherwise).
- Two modes —
painterlyoil strokes and experimentalpointillism.
This project is SBR (stroke-based rendering). There is no generative inpaint or pose-guided anatomy rebuild. Structural errors such as hand anatomy are a known limitation: we can mitigate noise, color bleed, and silhouette harshness, but we cannot guarantee anatomically correct fingers.
- Node.js 18+ (20+ recommended)
- A modern browser with Canvas 2D support
After the first successful deploy: https://phaethix.github.io/mona-lisa/
GitHub Pages is built from master via .github/workflows/deploy-pages.yml. In the repo settings, set Pages → Source to GitHub Actions once.
git clone https://github.com/phaethix/mona-lisa.git
cd mona-lisa
npm install
npm run devOpen the URL printed by Vite (usually http://localhost:5173/) and press play to watch the five phases.
| Command | Purpose |
|---|---|
npm run dev |
Dev server |
npm run build |
Production build to dist/ |
npm run preview |
Preview the production build |
At runtime the app prefers a public Wikimedia Commons thumbnail; on timeout or failure it falls back to the bundled local image. Respect each source’s license and attribution. This project is an homage and technical demo — it does not claim rights to the original Mona Lisa.
Issues and PRs are welcome. Please read CONTRIBUTING.md and CODE_OF_CONDUCT.md.
For security reports, see SECURITY.md.
MIT © contributors of mona-lisa-stroke-painter