Home / Typography / Handwritten Accents
Handwritten Accents CSS Template, Free with Live Demo
Free handwritten accents template for a cooking school. Scribbled underlines, circles, arrows and notes drawn with SVG over a clean layout. Live demo. The example is Nonna's Kitchen, a cooking school.
What is handwritten accents?
Handwritten accents add little human marks to a clean page: a scribbled underline, a circle around a word, an arrow pointing at a note. It feels like someone went over the page with a pen for you.
Each mark is a small inline SVG path placed behind a word. They draw themselves in on load using stroke-dasharray, and the notes use Caveat, a free handwriting font.
Good for
- Cooking schools and food blogs
- Teachers and tutors
- Small shops and makers
- Friendly SaaS and onboarding pages
What you get in this template
- Scribbled underline and circle drawn with SVG
- Marks draw themselves in on page load
- Handwritten note with a curved arrow
- Card labels in handwriting that sit on the border
- Drawing stops for reduced motion
The key CSS
This is the part that makes the handwritten accents look work. Copy it into your own project.
.mark { position: relative; white-space: nowrap; }
.mark svg { position: absolute; left: -2%; width: 104%; pointer-events: none; }
.under svg { bottom: -.18em; height: .35em; }
.draw path {
stroke-dasharray: 600; stroke-dashoffset: 600;
animation: draw 1.2s .4s ease forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }How to use it
- Click Download HTML file above.
- Open the file in any code editor, like VS Code.
- Change the text, colors and links to match your project. Colors are at the top of the style tag.
- Upload it to any host, such as GitHub Pages, Netlify or your own server. It is one file with no build step.
Questions people ask
How do you make a hand drawn underline in CSS?
Place a small SVG with a slightly wavy path under the word, stretched to its width with preserveAspectRatio="none".
How does the draw in animation work?
Set stroke-dasharray and stroke-dashoffset to the path length so the line is hidden, then animate the offset to 0 so it appears as if drawn.
Which handwriting fonts are free?
Caveat, Kalam, Patrick Hand and Gochi Hand are all free on Google Fonts and easy to read.
More Typography designs
051. Kinetic Type
Shift, a dance studio
052. Variable Fonts
Flexa, a type foundry specimen page
053. Oversized Serif
Maison Clair, a boutique hotel
054. Outline Text
Museum of Sound, an exhibition site
055. Mixed Font Pairing
Paper Lantern, an independent bookshop
056. Image in Text
Alpenglow, a ski resort
057. Gradient Text
Sunset Sound, a festival lineup
059. Monospace
Byte Sized Weekly, a developer newsletter