Fundamentals

Buttons Text & Typography Forms Navigation & UI Loading

Design & Visuals

Backgrounds Glass & Morphism Visual Effects Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Depth Cursors

Gallery & More

Cards & Layouts Gallery & Media Data & Visualization Atmosphere Utilities
All Effects New Favorites Templates Blog Tips ✨ Go Premium
SVG✨ Premium

SVG Text Draw

An SVG word whose letter outlines draw themselves, then fill with colour: on a loop, just once, or at the moment you choose.

CSSText

Updated

SVG Text Draw — preview ▶ Free account: live preview + 1 free effect

This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. SVG has 30 effects, including 3 free. Explore the category →

View in catalogue

3 usage examples

A wine estate's name drawn as the top-of-page headline (Domaine de Velaurac) — SVG Text Draw example 1

① A wine estate's name drawn as the top-of-page headline (Domaine de Velaurac)

WhenWhen the site opens, under "Domaine de", the name draws in large serif letters against an evening sky above the vine rows, then fills with cream and stays above the "Discover the wines" button.
WhyThe name written as if by pen gives the estate a refined entrance, and the headline stays real text inside the <h1>.
SettingsviewBox 250×66, --txd-width: 440px, outline and fill #fbead0, --txd-stroke: .9, serif font (Didot, Georgia, serif), --txd-weight: 400, --txd-speed: 3.4s, --txd-repeat: 1. For the demo, the scene replays the opening every 7 s.
The chair's signature drawn at the foot of a foundation's annual letter (Fondation Ysarde) — SVG Text Draw example 2

② The chair's signature drawn at the foot of a foundation's annual letter (Fondation Ysarde)

WhenThe donor reads the thank-you letter; when the handwritten signature is fully on screen, it draws in blue ink and fills, just above the signatory's name and role.
WhyA signature that writes itself as it is read makes the letter feel more personal than a still image, without asking anything of the reader.
SettingsviewBox 220×60, left-aligned text (x="4"), --txd-width: 210px, ink #1e3a8a, --txd-stroke: .6, a handwriting font installed on the device (cursive stack), --txd-speed: 2.2s, --txd-repeat: 1, --txd-play: paused. A page IntersectionObserver sets the variable to running; the scene scrolls the letter.
Mystery word drawn large when the player finds the answer (Lettrimbe) — SVG Text Draw example 3

③ Mystery word drawn large when the player finds the answer (Lettrimbe)

WhenIn a letter game's daily puzzle, the player puts five letters back in order and checks: the word MELON draws in large orange capitals, fills, and the points won appear below.
WhyThe answer writing itself in front of the player stretches the small victory, and the final fill marks that the round is won.
SettingsviewBox 250×66, --txd-width: 360px, outline #ffb347, fill #ff9f1c, --txd-stroke: 1.2, default font and weight, --txd-speed: 2.6s, --txd-repeat: 1. The win panel goes from display: none to visible on checking, which starts the drawing.

How it works

The word is a <text> element (class .txd-text) centred in a 220×80-unit SVG, at size 48 and weight 800. It gets an outline (--txd-line, width 1.5) cut into 400-unit dashes; each letter has its own outline and the dash restarts at the beginning of each, so all the letters draw at the same time.

The txdDraw animation lasts --txd-speed (3 s): from 0 to 50%, the dash offset goes from 400 to 0 and the outline draws over still-empty letters; from 50 to 70%, the fill colour (--txd-fill) comes in; the word then stays filled until the end of the cycle. By default the cycle loops and restarts from an empty word; --txd-repeat: 1 plays it once and leaves the word filled, --txd-play: paused makes it wait.

The drawing depends on the font: the code asks for Inter, then the system font. It downloads no font; if Inter is not installed, the system font is what gets drawn. The word is centred (x="110", text-anchor="middle"), so it stays in the middle when you change it.

Accessibility

  • Announced text: the SVG carries role="img" and a <title> repeating the word; that is what screen readers read. Change it together with the text.
  • Page heading: placed in an <h1> or <h2>, the SVG gives the heading its name; the word also stays present as text in the HTML.
  • Reduced motion: with prefers-reduced-motion: reduce, the word shows straight away with outline and fill, even when set to wait (measured in all three engines: 0 running animations).
  • Contrast: the #6366f1 indigo reaches 4.4:1 on the shipped background; for a word over a photo, keep a fairly plain area behind the letters.

Browser compatibility

Pure CSS. Reduced motion needs Chrome 74, Firefox 63 and Safari 10.1. Measured in Chromium 151, Firefox 153 and WebKit 26.5: 0 errors, a single animation per word, two independent copies, nothing overflowing at 390 px. The exact drawing varies with the font installed on the device.

Chrome 74+✓ Full (measured)
Firefox 63+✓ Full (measured)
Safari 10.1+✓ Full (measured in WebKit 26.5)
Edge 79+✓ Full (Chromium engine)
Safari iOS 10.3+✓ Full (WebKit engine, not tested on a device)
Chrome Android 74+✓ Full (Chromium engine)

Without CSS animations, the word shows filled with its outline. Without the requested font, it draws in the system's fallback font.

The code

HTML structure to paste into your page (the CSS + JS come with your purchase):

index.html — structure 
<div class="fx-0605-root">
  <svg class="txd-svg" viewBox="0 0 220 80" role="img">
    <title>SVG</title>
    <text class="txd-text" x="110" y="58" text-anchor="middle">SVG</text>
  </svg>
</div>

One-time payment, no subscription — the code is yours forever

Customize

Options passed to the API or data-* attributes:

Option / propertyDefaultEffect
The word (<text> and <title>) SVG Change both together; widen the viewBox (and x, its half) for a longer word.
--txd-repeat infinite 1: the word draws once and stays filled.
--txd-play running paused: nothing shows until set back to running (for instance when the word becomes visible).
--txd-speed 3s Cycle length: half for the outline, a fifth for the fill.
--txd-line and --txd-fill #6366f1 and #6366f1 Colours of the outline and of the final fill.
--txd-font, --txd-weight, --txd-stroke Inter then system font, 800, 1.5 Font, weight and outline width; a thin font calls for a thinner outline.
--txd-width, --txd-bg, --txd-min-h 220px, #0a0a0f, 300px Drawing width (the height follows the viewBox), frame background and minimum height.

FAQ

The outline is that of the font on screen. The code loads no font: without Inter installed, the system font takes over. For an identical drawing everywhere, host a web font yourself and put its name in --txd-font.
The size is fixed at 48 units: widen the viewBox (for example 0 0 420 80), set x to the middle (210) and raise --txd-width to keep the same on-screen size.
Each outline gets a 400-unit dash, which easily covers letters at size 48. With a very ornate font where one outline is longer than that, part of the letter only appears with the fill.