About this set
Three illustrated maps for travel, events and venues, built from inline SVG and CSS with no JavaScript. The trail map draws a three-day coastal walk from Porto Covo to Zambujeira do Mar: the route line draws itself once with stroke-dashoffset on a pathLength of 1, over a dotted guide path, with the stops labelled, a compass and a scale bar, and a stats row and numbered stage list beside it. The itinerary map follows a four-day trip up the Douro valley; each day is a radio button with a short description, and the checked day turns its leg of the route solid and orange through :has(), so the list and the map stay in step without a script. The floor plan shows a ground floor with a main hall, two workshop rooms, a café, a cloakroom and toilets; choosing a room from a row of radio pills fills that room and shows a dotted way-finding line from the entrance. Use them for walking routes, tour itineraries, conference venues and office maps, where a hand-drawn map is clearer than a street map.
What’s included
- Route line drawn once with stroke-dashoffset and pathLength
- Day itinerary that highlights its route leg with :has()
- Floor plan with room highlight and way-finding line
- No JavaScript in any variant
- Labels with a paint-order halo for legibility on the map
Accessibility
Each map is an image with a text description, and the details are in real text beside it: the stage list, the day descriptions and the room names. The itinerary and floor plan controls are native radio buttons in fieldsets with legends, so they work with the keyboard and are announced correctly, and they show a focus outline. Under prefers-reduced-motion the route appears already drawn and the highlight transitions are removed.
Customise it
Change the route colour in .rt-line and .rt-stop circle, the itinerary highlight in the :has() rule for .it-seg, and the room highlight and way-finding colours in the .fp rules. Replace the SVG paths with your own route, river or rooms.
