A dip pen inks a fantasy chart on pale rag paper: island coasts ringed in Prussian blue water lining, hatched mountains, a forest of tiny trees, vermilion roads, two sea serpents and a ship, a gold and ink compass rose with rhumb lines, curved lettering and a ribbon cartouche.
Written and rendered by AI CSS Animations Oct 19, 2026
Hand-drawn fantasy maps borrow the conventions of early modern European charts: coasts in pen and ink, mountains as rows of little profiles, forests as clusters of tiny trees, compass roses and rhumb lines from portolan sea charts, and the decorative cartouches and sea monsters of 16th-century maps. Engraved charts of the 18th and 19th centuries added water lining, fine lines that echo the coast outward into the sea. Maps printed in The Hobbit in 1937 and in The Lord of the Rings in the 1950s made the illustrated map a standard part of fantasy fiction. Illustrators now draw them for novels, tabletop games and video games.
Make a 10-second hand-inked fantasy map that draws itself: coastlines, water lining, mountains, forests, rivers, roads, sea serpents, a compass rose with rhumb lines, lettering and a cartouche. <inputs> If I don't give you something, use the default and don't ask. - Realm: the Saltmarch Isles (fictional). - Cartouche: "A Chart of the Saltmarch Isles" · "drawn for the Wayfarers' Guild, in the year 412" - Islands: Saltmarch (the main island), Greyholm (to the north-east) and the Lantern Isles (seven islets). - Features: the Thornfell Mountains, the Whisperwood, Hollowmere (a lake), the river Wend, Cape Wistful. - Towns: Port Aubery, Caskmouth, Fellgate, Wrenhaven. - Seas: the Sea of Hush, the Glass Channel. - Scale: Leagues, 0–30. - Length: 10 seconds. </inputs> <direction> - Look: a chart drawn with a dip pen in iron-gall ink on pale oyster rag paper, the coasts water-lined in Prussian blue, washed in verdigris, ochre and sap green, with vermilion roads and flat gold-ink accents. Clean, pale paper and lively ink, never brown parchment. - Palette: paper #EFEAE0 with seeded long fibers and a few faint foxing spots #DCCDAE; iron-gall ink #2B2420; Prussian blue ink #2C4F7C for water lining and sea names; washes, transparent and multiplied: verdigris #7FB0A2 along the coasts, ochre #D9BE84 on the land, sap green #8EA35A under forests; umber #5A4632 for mountain hatching; vermilion #C2442E for roads and the north mark; gold ink #B88A36, flat with no metallic shading, for alternate compass points, the cartouche edging and the border bars. Where verdigris and ochre overlap on the beaches they mix to a soft olive; each wash pools a little darker at its dried edge. - The sheet fills the stage: a graduated border inset 70px (a 26px band of alternating ink and paper bars 60px long between two rules, with degree ticks), the neatline inside it, so the drawing area is x 110–1810, y 110–970. Nothing important within 60px of the stage edge. - Geography, in stage pixels: - Saltmarch at x 340–1040, y 190–860: a ragged coast with two deep bays and a long south-west peninsula ending at Cape Wistful; the Thornfell range along its spine; the Whisperwood in the east; Hollowmere in the north; the river Wend running from the mountains to Port Aubery's bay; - Greyholm at x 1180–1640, y 170–470: rocky, with low hills and Wrenhaven harbor; - the Lantern Isles: seven islets in an arc around (1330, 640); - the compass rose centered at (1640, 660), radius 130; the cartouche at x 1180–1740, y 840–950; the scale bar at x 150–470, baseline 945. Build every coast once at load from a base polygon by seeded midpoint displacement (six levels), with inlets and headlands. - Pen line: every stroke is a filled shape made from its centerline offset by a width profile, 1.2–3.2px, swelling on downstrokes and tapering where the nib lifts, with a tiny blot where it first touched; strokes wander ±0.5px. A steel dip-pen nib (a split point, a breather hole, a wooden holder, its shadow 8px down-right) rides the leading tip while the main coast is drawn. - Water lining: four lines echoing every coast outward at 7, 16, 28 and 44px, in Prussian blue at 1.4, 1.1, 0.9 and 0.7px, each starting 0.25s after the one inside it. Extract them at load as iso-lines of a distance field from the land mask (marching squares), so they follow every inlet and never cross. The lake gets two lines inward. - Symbols, all in pen: - Thornfell: about 18 peaks drawn as Λ profiles 30–70px tall in two overlapping rows, the east (shadow) flank of each hatched with 4–9 short umber strokes, foothills as small humps; - the Whisperwood: about 120 tiny trees 14–22px (round crowns on short trunks, some pines) in clusters over a sap-green wash; - the river: a line tapering from 1px at its source to 3px at its mouth, with meanders; - towns: a small castle with crenellations for Port Aubery, clusters of three or four little houses for the others, each with a town dot; roads as vermilion dots (3px, 9px apart) between them; - two sea serpents: one in the Glass Channel near (1110, 330), one in the west sea at x 130–320, y 560–860: each three or four arched humps rising out of small water rings, a head with a finned crest, a curled tail, scales as overlapping arcs, the undersides hatched; - a two-masted ship near (1120, 760) with square sails bellied by the wind, pennants and a short wake; - the compass rose: 16 points, the four cardinals split into ink and paper halves, the four intercardinals in gold, eight small points in ink, two ringed scales with degree ticks and a vermilion fleur-de-lis at north; 16 hairline rhumb lines (ink at 40%) run from its center to the neatline, hidden where they cross land; - the cartouche: a ribbon scroll with curled ends in ink and gold edging, holding the title in Cinzel Decorative 700, 34px, and the subline in IM Fell English 400 italic, 22px; the scale bar: alternating bars with LEAGUES and 0 10 20 30 in IM Fell English SC 400, 20px. - Lettering, along curves as a cartographer letters (SVG textPath, ink unless noted): SALTMARCH in IM Fell English SC 400, 40px, tracked 0.4em, arched over the island; GREYHOLM 30px and THE LANTERN ISLES 22px in the same face; THORNFELL MOUNTAINS 22px along the range; the Whisperwood, Hollowmere and Cape Wistful in IM Fell English 400 italic, 24px; town names in IM Fell English 400, 22px, beside their dots; the Sea of Hush and the Glass Channel in IM Fell DW Pica 400 italic, 34px, tracked 0.12em, Prussian blue, on gentle arcs through open water. No label crosses a coast, a symbol or another label. - Washes: painted once at load into a canvas under the SVG (multiply): soft edges with seeded granulation, a 3px darker dried rim, each revealed by spreading from a seed point over 0.6s like a wet wash. - Camera: the SVG viewBox opens at 2.2× on Saltmarch's north-west coast, follows the nib round the coast, and eases back to the whole sheet at 1.0 by 5.4s (easeInOutSine). - Motion: lines draw at the speed of a steady hand (about 1600px/s for the coast, faster for small symbols) on easeInOutSine within each stroke; letters ink on one by one, 35ms apart, each from 0 to full over 0.12s; wet ink carries a faint 6% darker sheen that dries off over 1s. After drawing, the serpents' humps rise and fall ±4px on twos and the ship rocks ±2°, both easing to stillness by 8.8s. - Premium: a pen line that swells, tapers and blots, water lining that follows every inlet, mountains lit from one side, lettering that bends with the land, washes with dried edges. Cheap: a parchment texture, a generic brush font and clip-art dragons. Banned: parchment or burnt-edge textures, real places or real coastlines, fire-breathing dragons, clip-art icons, drop shadows, glow, 3D terrain, uniform-weight vector strokes, brush or script fonts, anything flashing more than 3 times per second. </direction> <structure> - 0.0–0.4s: bare oyster paper close up, faint pencil construction lines of the coast at 12%; the nib comes in. - 0.4–2.6s: the nib draws Saltmarch's coast as the camera follows; the water lining ripples outward behind it; the camera begins to ease back and the nib lifts away. - 2.6–3.6s: Greyholm and the Lantern Isles draw with their water lining; the coastal and land washes spread; the border draws round the sheet. - 3.6–4.8s: Thornfell's peaks and hatching, the river and Hollowmere, the Whisperwood's trees and wash, the towns and the vermilion roads. - 4.8–5.8s: the compass rose draws ring by ring and point by point and its rhumb lines run out to the neatline; the ship and both serpents ink in; the camera reaches the whole sheet at 5.4s. - 5.8–7.4s: the lettering writes on: seas, islands, features, towns (the 6.0s frame: the whole map inked and washed, compass and rhumb lines complete, the first sea name writing). - 7.4–8.4s: the cartouche ribbon unfurls from its center, its title and subline ink in; the scale bar draws. - 8.4–10.0s: hold; the serpents and ship come to rest by 8.8s. For other lengths, scale every timestamp proportionally. </structure> <build> - One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code. - window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame. - Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop. - Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek. - Engine: inline SVG for all line work and lettering, the camera as the viewBox; each tapered stroke is a filled path built once at load and revealed by a mask whose stroked centerline animates stroke-dashoffset. The paper, fibers and washes are canvases rendered once at load under the SVG (mix-blend-mode: multiply). - Coasts, the distance field and water lining, symbol placement and every stroke's start time are computed once at load from a seeded PRNG; each frame only sets reveal amounts, opacities and the viewBox from t. </build> <check> Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check every coast carries four water lines that follow its inlets without crossing, strokes taper and swell rather than run at one weight, mountains are hatched on one side only, no label crosses land, symbols or another label, rhumb lines stop at the coasts, the washes stay inside their areas, and the cartouche and scale bar sit clear of the compass rose. Confirm seek(10) and seek(11) match, so the final frame holds. </check>
Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.
A calm cartographic animation: smooth brown contour lines draw in from valley to summit, the terrain slowly morphs as a…
A print-style travel map that draws itself: water-lined coast, ink mountains and serif labels, then a red route line ca…
A night map seen through a phone that works like a lens, the city dimmed around it: a coral route draws along procedura…
A print-style dotted globe of a fictional world turns on warm paper while vermilion and cobalt arcs fly a new airline's…
More like this on the motion design inspiration board: Line art animation inspirationMap animation inspiration