Embed the animations
Every piece is a standalone page you can drop into your own site with a single <iframe>. No script tags, no build step, no framework — it works in any HTML page, CMS block or notebook. Copy a snippet below and paste it in.
By default the animation follows the reader’s own light/dark setting. An embed is a cross-origin iframe, so it cannot see your page’s CSS or your theme toggle — it reads the visitor’s browser prefers-color-scheme instead. One visitor gets the warm paper, the next gets the near-black one, on the very same page of yours. To pin it, add ?theme=light or ?theme=dark to the iframe src — the parameter overrides the reader’s setting. Choose a state below and all twenty-two snippets are rewritten, displayed and copied alike.
A second parameter, ?ink=, recolours the marks. It takes a bare six-digit hex with no # — a # starts a URL fragment and never reaches the page — so a gold embed is https://drawmycanvas.com/embed/hilbert-weave.html?theme=dark&ink=E7B24A. Be clear about what it does and does not do. It replaces the three cobalt slots of the four-ink palette and deliberately leaves the fourth, the coral accent, alone: that 3:1 weighting is what the drawings are, and flattening it to one colour turns a composition into a monochrome scribble. It does not touch the background, the watermark or its shadow — those are the contrast that keeps the attribution readable, and the background stays under ?theme=. And nothing here detects your brand: an embed is a cross-origin iframe, it cannot read a single byte of your CSS, so the colour is whatever hex you type and nothing else. A malformed or missing value is ignored in silence and you get the standard cobalt.
<iframe src="https://drawmycanvas.com/embed/quantum-fibonacci.html" width="100%" height="600" frameborder="0" title="Quantum Fibonacci — Draw My Canvas"></iframe><iframe src="https://drawmycanvas.com/embed/bitcoin-matrix.html" width="100%" height="600" frameborder="0" title="Bitcoin Matrix — Draw My Canvas"></iframe><iframe src="https://drawmycanvas.com/embed/cosmic-circles.html" width="100%" height="600" frameborder="0" title="Cosmic Circles — Draw My Canvas"></iframe><iframe src="https://drawmycanvas.com/embed/spiral-waves.html" width="100%" height="600" frameborder="0" title="Spiral Waves — Draw My Canvas"></iframe><iframe src="https://drawmycanvas.com/embed/particle-burst.html" width="100%" height="600" frameborder="0" title="Particle Burst — Draw My Canvas"></iframe><iframe src="https://drawmycanvas.com/embed/geometric-flow.html" width="100%" height="600" frameborder="0" title="Geometric Flow — Draw My Canvas"></iframe><iframe src="https://drawmycanvas.com/embed/color-symphony.html" width="100%" height="600" frameborder="0" title="Color Symphony — Draw My Canvas"></iframe><iframe src="https://drawmycanvas.com/embed/fractal-dreams.html" width="100%" height="600" frameborder="0" title="Fractal Dreams — Draw My Canvas"></iframe><iframe src="https://drawmycanvas.com/embed/truchet-tiles.html" width="100%" height="600" frameborder="0" title="Truchet Tiles — Draw My Canvas"></iframe><iframe src="https://drawmycanvas.com/embed/lissajous-ribbon.html" width="100%" height="600" frameborder="0" title="Lissajous Ribbon — Draw My Canvas"></iframe><iframe src="https://drawmycanvas.com/embed/chladni-figures.html" width="100%" height="600" frameborder="0" title="Chladni Figures — Draw My Canvas"></iframe><iframe src="https://drawmycanvas.com/embed/strange-attractor.html" width="100%" height="600" frameborder="0" title="Strange Attractor — Draw My Canvas"></iframe><iframe src="https://drawmycanvas.com/embed/apollonian-gasket.html" width="100%" height="600" frameborder="0" title="Apollonian Gasket — Draw My Canvas"></iframe><iframe src="https://drawmycanvas.com/embed/frost-dendrites.html" width="100%" height="600" frameborder="0" title="Frost Dendrites — Draw My Canvas"></iframe><iframe src="https://drawmycanvas.com/embed/voronoi-drift.html" width="100%" height="600" frameborder="0" title="Voronoi Drift — Draw My Canvas"></iframe><iframe src="https://drawmycanvas.com/embed/hilbert-weave.html" width="100%" height="600" frameborder="0" title="Hilbert Weave — Draw My Canvas"></iframe><iframe src="https://drawmycanvas.com/embed/turing-bloom.html" width="100%" height="600" frameborder="0" title="Turing Bloom — Draw My Canvas"></iframe><iframe src="https://drawmycanvas.com/embed/penrose-tiling.html" width="100%" height="600" frameborder="0" title="Penrose Tiling — Draw My Canvas"></iframe><iframe src="https://drawmycanvas.com/embed/sandpile-avalanche.html" width="100%" height="600" frameborder="0" title="Sandpile Avalanche — Draw My Canvas"></iframe><iframe src="https://drawmycanvas.com/embed/moire-interference.html" width="100%" height="600" frameborder="0" title="Moiré Interference — Draw My Canvas"></iframe><iframe src="https://drawmycanvas.com/embed/kuramoto-sync.html" width="100%" height="600" frameborder="0" title="Kuramoto Sync — Draw My Canvas"></iframe><iframe src="https://drawmycanvas.com/embed/slime-mould-network.html" width="100%" height="600" frameborder="0" title="Slime Mould Network — Draw My Canvas"></iframe>Tip: change width and height to fit your layout — the canvas rescales and keeps running. Prefer to preview first? Open the gallery →