024
Optional AI setup

Tattoo Studio Template

£10

A complete one-page site for a tattoo studio, built around a flash-sheet picker: choose a design off the sheet and watch its linework ink itself stroke by stroke with DrawSVG, black lines first, red packed in last.

ScrollTriggerDrawSVG Lenis intermediate
5 more details
svg-line-drawscroll-revealstaggerclick-togglekeyboard-navigation
Tattoo Studio Template - website template preview

This template reads better at your own screen size than in the frame below:

Open the template in a new tab
Open Tattoo Studio Template demo in new tab

About this template

A production-ready one-pager for a tattoo studio, art-directed like the studio's own wall: a dried-blood brick ground, flash sheets as bone-paper panels pinned to it, black linework and tattoo red on the paper, one aged gold for the small lettering, and a blackletter display face doing the sign-writing. Photography ships as six bundled WebP derivatives baked to one high-contrast black and white grade.

Read the full template overview

The signature is the flash-sheet picker. The flash section is a real sheet of six hand-drawn designs - serpent, dagger, rose, swallow, panther, sacred heart, all inline SVG linework, no image files - and picking one inks it into the detail panel stroke by stroke with DrawSVGPlugin, each line taking time proportional to its real length, the red packed in last the way a tattooer would actually work. The panel prices the piece by size, names its artist and suggests placement, so the interaction is also the menu.

Around it the page stays disciplined: a hero where the sheet's rose draws itself at wall size, three resident artists with graded photography, the studio section with rates, a genuinely useful aftercare card written the way studios actually talk, and a booking section with a deposit policy that reads real. Swap the names, prices and photos, point the booking link at your inbox, and deploy it as static files - there is no build step.

What's included

12 items
  • Complete deployable one-page site: nav, hero with self-inking wall art, flash-sheet picker, three artists, studio and rates, aftercare card, booking, footer
  • Signature flash picker: six hand-drawn SVG flash designs that ink themselves stroke by stroke on selection, with each line taking time in proportion to its own length
  • The picker is a real tablist: buttons with aria-selected, roving tabindex, and full arrow-key, Home and End navigation - selection follows focus
  • Every design's detail panel is real content: artist, placement advice, healing time, and three sizes with prices
  • Six flash artworks authored as clean inline SVG linework - recolour them with two CSS variables, or swap in your own paths and the inking still works
  • Bundled studio photography baked to one high-contrast black and white grade, about 160KB for the whole set
  • An aftercare section written as the card studios actually hand over: four real stages, honest instructions, a free touch-up policy
  • Blackletter display type (Pirata One) used at disciplined sizes for the sign-writing, with Libre Franklin doing the reading and Cousine pricing the work
  • Five-colour token block with RGB triples and a measured contrast table in the stylesheet header - a reskin is a five-value edit
  • Degrades completely: with JavaScript off every design renders fully drawn and all six panels read stacked like a pinned-up sheet
  • Reduced motion keeps the picker fully working - designs appear instantly complete instead of drawing, via both the CSS media query and the script's own motion branch
  • Lenis smooth scrolling wired in and fully optional

Perfect for

5 use cases
  • Tattoo studios, private studios and guest-spot artists
  • Piercing and body-art studios with a flat-priced menu
  • Any business selling a priced set of designs: sign painters, letterpress printers, illustrators selling prints
  • Barbers, nail artists and anyone whose services suit a pick-a-piece menu
  • Learning DrawSVG: a real, content-driven example of stroke-by-stroke SVG drawing tied to a picker

How it works

5 sections

Structure

One script initialises each section with a single setup and teardown path and one motion branch, keyed only on reduced motion so exactly one branch runs on every device. Every querySelector is guarded, so any section - the artists, the aftercare card, the whole flash sheet - can be deleted and the rest keeps working. Reveal start states are double-gated behind a has-js class and the motion media query, so a blocked CDN or a reduced-motion preference both leave a complete static page.

The flash sheet

The sheet is a real tablist: each design is a button carrying aria-selected and a roving tabindex, with arrow keys, Home and End moving both focus and selection. The six designs are hand-authored inline SVG - stroke-only paths, round caps, one shared stroke width - so they are also the source of truth for the animation: there are no sprite sheets and no image requests.

The inking

Selecting a design builds one timeline: every stroke is drawn from nothing to its full length in document order, each taking time in proportion to how long the line actually is, so a long coil takes visibly longer than a whisker tick - the linework goes on the way a tattooer would run it. Red accents are authored last in the markup so the red goes in after the black, and the one filled element (the dagger's blood drop) fades in at the end. Selecting the same design again re-inks it.

Accessibility and reduced motion

Under reduced motion the picker keeps working - it is a control, not decoration - but designs appear fully drawn instantly: the reduce branch never touches drawSVG, and the CSS media query kills the reveal start states. Lenis is not created at all when reduced motion is on. Focus rings flip colour by surface, because the gold that reads on brick fails completely on bone paper.

Without JavaScript

SVG strokes render fully drawn by default - the script prepares the undrawn state, CSS never hides a stroke - so with JavaScript off the whole sheet reads as printed flash, and all six detail panels stack in order like pages on a clipboard. The hero, artists, studio, aftercare and booking sections are plain readable markup throughout.

Plugins ScrollTrigger, DrawSVG
Difficulty Intermediate
Smooth scroll Lenis integration
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Questions about this template

Can I put my own flash designs in?

Yes. The six designs are clean inline SVG linework, and the inking gives each line time in proportion to its own length, so your own paths draw correctly without retiming anything. Recolouring is two CSS variables. Getting your artwork to clean SVG paths is the work; the template handles the rest.

Does it need the DrawSVG plugin?

Yes, this one does. DrawSVG drives the stroke-by-stroke inking, and it is available on the CDN like every other plugin, including the former Club ones. With JavaScript off, every design simply renders fully drawn instead.

Can people book a consultation through it?

There is a booking section but no backend, so it is an enquiry rather than a booking. Point it at your existing system or a form handler. Most studios triage enquiries by hand anyway, since a tattoo booking needs a conversation about placement and sizing first.

Is the pricing on each design real?

The structure is: every design's panel carries artist, placement advice, healing time and three sizes with prices, as real content rather than lorem. The numbers are placeholders you replace. The aftercare section is likewise written as the card studios actually hand over, including a free touch-up policy you should check against your own.

Is blackletter type going to be a readability problem?

No, because it is used at disciplined sizes for the sign-writing only. Libre Franklin does the reading and Cousine prices the work, so the display face never carries body copy. The stylesheet header includes a measured contrast table for the five-colour token block.

Paid template

Purchase to unlock the code.

Buying Tattoo Studio Template opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects.

£10 Standard license, unlimited projects

Browse free effects

Documentation

Quick Start

  1. Copy the whole folder to your web host (or open index.html locally).
  2. Replace the studio name, address, hours and prices - search index.html for "Gallows Hill", "Fossgate" and the £ amounts.
  3. Point the two booking links at your own inbox: search for mailto:bookings@gallowshill.tattoo.
  4. Swap the photos in assets/img/ for your own (details below).

The page keeps working as you cut it down: every section (#flash, #artists, #studio, #aftercare, #book) can be deleted wholesale and the script skips what it can't find.

Files

Code snippet omitted: it ships with the download.

The flash-sheet picker

Each design exists twice in index.html: a small copy inside its sheet button, and a large copy inside its detail panel. Both are plain inline SVG.

To change a design's details (name, artist, placement, sizes, prices) edit its panel - everything is ordinary markup.

To add a design of your own:

  1. Copy an existing <button class="flash-tab"> and <div class="flash-panel"> pair, give them fresh id/aria-controls values that match each other.
  2. Replace the SVG paths. Rules the inking relies on: stroke-only paths (fill="none" comes from CSS), keep data-ink on every path that should draw, and author red accent paths (class="p-red") after the black ones so the red goes in last, the way it would in the chair.
  3. Filled shapes can't draw stroke-by-stroke; give them data-fill instead (see the dagger's blood drop) and they fade in after the linework.

Draw speed: each stroke's duration is its measured length divided by 560 (clamped 0.16-1.0s), in draw() in script.js. Raise the divisor for faster inking.

The picker is a real tablist: click or tap any design, or focus the sheet and use the arrow keys, Home and End. Selecting the design that is already selected re-inks it.

Per-section options

  • Hero - the big rose is decorative (aria-hidden) and draws itself on load. Swap its paths for any of the other designs, or delete .hero-art entirely; the copy column takes over.
  • Flash - see above. Prices sit in each panel's .flash-sizes list; the sheet caption and footer lines are in .sheet-head / .sheet-foot.
  • Artists - three cards; add or remove <article class="artist-card"> blocks freely. The books-open line is just text.
  • Studio - rates in .studio-rates; the wide band image and the two tiles are ordinary <img> tags.
  • Aftercare - the four steps are real advice, but they are yours to edit; the numbered structure is a real healing sequence, so keep them in order.
  • Book - no form by design: studios triage by email. The steps and the deposit policy are plain markup; the CTA is a mailto: link with a subject line.

Photography

The images are bundled, optimised WebP derivatives - Unsplash sources with this template's high-contrast black and white grade baked into the pixels (fully desaturated, gamma lifted, brightness matched per image). They are not the original files and should not be treated as a photo library.

To swap in your own photos, just replace the files in assets/img/ (same names), or change the <img> tags. A background-color sits behind every photo, so a missing image never leaves a hole.

To re-run the grade (GSAP Vault repo tooling): edit assets/img-manifest.json (source URL, size, per-image brightness) and run:

Code snippet omitted: it ships with the download.

Image credits (Unsplash sources)

Palette

There is deliberately no palette switcher: this palette is the identity. A reskin is still a small edit, because every colour on the page resolves from five tokens (plus their RGB triples, which feed every translucent value) at the top of assets/style.css:

Code snippet omitted: it ships with the download.

Change a hex and its triple together. The stylesheet header records the measured contrast of every pair as used - re-measure yours against those floors before shipping, especially the two standing bans: red is never type on brick, and gold never touches bone paper.

--brick-deep and --brick-lift are the same brick pushed darker and lighter; move them with the ground.

Accessibility

  • Keyboard: the flash sheet is a tablist with roving tabindex and arrow-key/Home/End support; every interactive element is a real <button> or <a>; focus rings are always visible and flip colour per surface.
  • Reduced motion: honoured twice - a CSS media query removes all reveal start states, and the script's matchMedia reduce branch shows designs fully drawn instantly, never creates Lenis, and keeps the picker fully functional.
  • No JavaScript: the whole page reads. SVG strokes are drawn by default (the script prepares the undrawn state; CSS never hides a stroke), and all six flash panels stack in order.
  • Screen readers: the flash artwork and hero rose are aria-hidden decoration; the panels' text carries all the information; tab/panel wiring uses aria-controls/aria-labelledby/aria-selected.

Dependencies

Loaded from CDN at the end of index.html:

  • GSAP core, ScrollTrigger, DrawSVGPlugin (3.15.0)
  • Lenis smooth scroll (1.3.17) - optional; delete its tag and the page falls back to native scrolling

Fonts: Pirata One, Libre Franklin, Cousine via Google Fonts.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.

Your cart

Your cart is empty

The Vault £99

Every effect, template and UI element: 165 today, plus everything we release next.

Or browse effects, templates or UI elements.