Excalidraw-Style HTML Posters

Single-file HTML posters with a hand-drawn Excalidraw aesthetic — wobbly borders, diagonal hachure fills, and the Excalifont handwriting font.

Built entirely in HTML/CSS with optional rough.js for authentic sketch effects. No frameworks, no build tools — just open in a browser.

Variants

File	Theme	Layout	Borders & Fill
commands-guide-excalidraw-16x9.html	Dark	16:9 landscape	rough.js SVG
commands-guide-excalidraw-9x16.html	Dark	9:16 portrait	rough.js SVG
commands-guide-excalidraw-dark.html	Dark	Scrollable	CSS patterns
commands-guide-excalidraw-roughjs.html	Dark	Scrollable	rough.js canvas
commands-guide-excalidraw.html	Light	Scrollable	CSS patterns
commands-guide.html	Dark	Scrollable	Clean typography

Key Techniques

• Excalifont — the actual font Excalidraw uses, loaded from jsDelivr CDN
• Hachure fills — diagonal line patterns via inline SVG tiles or rough.js
• Hand-drawn borders — asymmetric border-radius + slight transform: rotate(), or rough.js wobbly paths
• Blob circles — border-radius: 50% 45% 55% 42% for organic number badges
• Two-layer rough.js rendering — fill at low roughness (parallel lines) + border at high roughness (wobbly outline)

Style Guide

See EXCALIDRAW-STYLE-GUIDE.md for the full technical reference covering fonts, colors, hachure parameters, rough.js integration, layout templates, and responsive breakpoints.

Usage

Open any HTML file directly in a browser:

open commands-guide-excalidraw-16x9.html

All files are self-contained — the only external dependencies are CDN-hosted fonts and rough.js.

License

MIT