A world with no edges
DrawVerse is a navigable hand-drawn canvas — a single illustration with infinite depth. Every hotspot you click reveals another drawing hidden inside the first. Zoom far enough and you surface a brand experience that belongs inside the art, not bolted on top of it.
The experience is built entirely in a browser using the Canvas API. No WebGL, no 3D engine, no heavy runtime. Just a coordinate plane, a zoom level, and a set of nested scenes that swap in as you drill down.
The key insight: infinite zoom doesn't require infinite data. It requires a coordinate system that maps cleanly across levels, and a rendering layer that knows which scene to load given where you are.
Four levels, one coordinate plane
DrawVerse uses a 4-level nested hierarchy. Each level is a complete illustration. Hotspots are clickable regions that trigger a zoom transition into the next level's scene.
Each coordinate triple (x, y, z) uniquely addresses any point in the world. x and y are the viewport center within the level's scene, expressed in scene-local units. z is the zoom level (1–4). A shareable URL encodes all three: /explore?x=350&y=280&z=3 drops you exactly at the ice cream shop.
How the zoom animation works
The zoom transition is a CSS transform: scale() animation applied to the current scene element, followed by a scene swap at peak scale. To the viewer it reads as a continuous zoom-in. Under the hood, it's a discrete level transition: the old scene scales up and fades out, the new scene fades in at scale 1.
Scenes are SVG illustrations served as static assets. SVG was chosen over raster for resolution independence — hand-drawn lines stay crisp at every device pixel ratio without a tile-fetching pipeline. The tradeoff: SVG files are heavier than JPEG tiles, so each scene is optimized with SVGO before being shipped.
Hotspots are positioned using percentage-based coordinates relative to their parent scene's viewport. When a hotspot is tapped, its center coordinates become the (x, y) origin for the next level — so the animation always zooms into the exact spot you clicked.
Scroll wheel and pinch gestures are mapped to smooth scale increments with easing. When scale crosses a threshold in either direction, a level transition fires. The threshold is intentionally generous so casual scrollers don't accidentally jump levels.
See it in action
The best way to understand the zoom system is to use it. The explorer below loads at Level 1 — the full city. Find the glowing hotspots and click through to Level 4.
Every URL in the explorer is shareable. The ?x=, ?y=, and ?z= parameters encode your exact position. Copy the URL and anyone who opens it lands at the same zoom level and viewport offset you were looking at.
Who this is for
DrawVerse sits at the intersection of art, exploration, and contextual advertising. Three audiences, one canvas.
Commission hand-drawn scenes at any zoom level. Your artwork becomes navigable — not static. Visitors explore it instead of scrolling past it.
Place your brand at Level 4 — the deepest zoom — inside a hand-drawn context that earns attention. No banner blindness. You're part of the art.
Discover hidden details by zooming. Share a position with a friend. Come back and the world has new placements to find. Exploration is the product.
Every view has an address
One design decision that compounds over time: every viewport position is a URL. Not a hash fragment. Not a session token. A real, indexable, shareable URL that any server can resolve directly to a rendered HTML page with the correct OG tags.
This means the Gallery page can link directly to any curated position. Artists can share the exact frame they want you to see. Brand placements at Level 4 can be deeplinked from ad campaigns with UTM parameters already baked in.
When a user hits the share button, the current (x, y, z) values are written into the URL and copied to clipboard. On mobile, the Web Share API fires instead, routing directly to the device's share sheet. The recipient opens the URL and lands at the exact frame that was shared.