Hero prompt
With a planA bold editorial hero built around a luminous self-drawing SVG contour map: dozens of flowing lines trace themselves in over a soft sun glow, glowing routes ignite, nodes pulse, and hovering lights the nearest line.
A picture of the design. The live, interactive preview, the full prompt and the code unlock with a Dapols plan. See the plans.
Want this on your own site? Pick it for your plan.
Everything on this page except these four tabs is free to read. The tabs unlock with a paid Dapols plan.
Isoline Contour Hero is included with every Dapols plan
Free visitors get the free prompts. Any Dapols plan, the one-time setup or the monthly subscription, unlocks every prompt.
Unlocking this prompt gives you:
Already have a paid plan?
Not on a plan yet?
The preview, description and FAQ on this page are free. A plan unlocks this prompt and every other one in the library.
See the plansWant to try one now? Browse the free prompts.
Isoline is a hero section where the art is the headline's partner. Behind a heavy sans headline with one italic serif word sits a large inline SVG: a topographic contour map of more than fifty hand-authored paths, crossed by seven glowing route lines and seven pulsing nodes. On load every path continues drawing itself from an already visible start using a stroke-dashoffset animation, staggered from the main peak outward, while the routes ignite with a soft glow. A sun glow sits behind the peak, tiny elevation labels interrupt the lines and a film grain adds paper texture. The lines use gradient strokes, and hovering one lights it in signal orange while the rest dim, with no JavaScript at all. The map is built with a viewBox and a crop rule, so on a phone it recentres on the peak instead of shrinking into noise. Ink and a single signal orange keep it restrained; the dark theme pairs icy blue lines and a midnight glow with molten orange routes. Reduced motion shows the finished drawing instantly. It suits mapping, logistics, infrastructure, data and architecture brands, or any studio that wants a first screen people remember and ask how it was made.
Pairs well with the Foundry, Atelier and Meridian Looks in the Dapols website studio. See website examples.
Every path gets pathLength set to 1, a dash pattern of 1 and a dash offset that animates down to 0, starting at 0.55 here so the first frame already shows part of every line. Because the length is normalised, the same two keyframes draw any path, long or short, and a CSS variable per path staggers the start times. No script is needed.
It animates only stroke-dashoffset, transform and opacity. The one filter is a blur on a copy of the seven route lines, which fades in as an opacity change instead of being re-blurred every frame. On weak phones you can lower the blur or hide the glow group below a breakpoint.
Yes. All animation sits inside a prefers-reduced-motion no-preference query, and the default styles are the finished drawing, so those visitors see the complete map at once with no movement.
HeroWith a plan
A magazine-style hero on grainy paper: an oversized serif headline with an italic spot-colour word, a flat-shadow button, a framed riso-print plate collage built only from CSS shapes, halftone dots and two tiny pictograms, and a numbered issue strip. Ink on paper with one spot colour.
HeroWith a plan
A calm, confident hero on a sheet of grainy paper: one huge tight-tracked headline with a hand-drawn accent loop, a topographic contour map of a mountain lake as the only graphic, one button and one quiet link. Warm off-white, near-black and one restrained accent.
HeroFree
A night-sky hero lit by real aurora curtains of mint, lime and cyan rays, with the headline held in a frosted-glass card with a specular rim, fine grain and floating glass tiles. Includes a pale-fog light theme with the same hues.
Need a whole site, not one section? Pick the designs you like, choose your colors and fonts, and Dapols builds the website for you as part of your plan. Answer a few questions about your business to get started.
