Skip to content
arrie.dev Templates
Commission

Logos & marks

Draw-On Marks

Five SVG marks that draw themselves in under a second. One file, no library.

R1 450

Once. Yours to keep

Get this template

The shape of it, not a screenshot

What it is

Five marks that animate as they appear. The stroke draws on, the fill catches up, then it stops and stays put. The animation is CSS inside the SVG file, so there is no JavaScript, no Lottie, no runtime dependency and nothing to keep updated. You paste the SVG into your markup and it plays once on load.

Each mark comes four ways: the animated file, a static SVG for anywhere motion is wrong, a version that honours prefers-reduced-motion and simply appears, and a looping variant for a loading state. PNGs, the favicon set and the colour values are included as usual, cut from the static file, because favicons do not animate.

Suits a product with a splash screen or an empty state, a landing page hero, or anything where the mark is the first thing on screen. Wrong choice if it has to be printed, embroidered or handed to a sign writer. The motion is the point, and on paper these are five plain marks.

Included

What you get

  • 5 marks as animated SVG, CSS inside the file
  • Static SVG of each for print and email
  • Reduced-motion version that skips the animation
  • Looping variant for loading states
  • PNG at four sizes and a favicon set
  • One-page note on timing and where not to animate
How it works

After you buy

  1. 01 You message me On WhatsApp. Tell me which one and where it is going.
  2. 02 I set it up for you Your words, your colours, your logo dropped in — or the raw files if you would rather do it yourself.
  3. 03 It goes live On your hosting or on mine. Either way it ends up in your own account.
  4. 04 It is yours The whole thing, with nothing to renew and nothing tied back to me.
Nearby

You might also want

Next Wide Nav