webdevpuneet.com

Related Snippets

175 in Animations category
7–12 of 60

Snap.svg Logo Draw Reveal

Babylon.js Particle Fountain

Vanilla SVG Icon Morph (No Library)

Status Icon Morph — Spinner to Check/Cross

Inbox Row Expand — Vanilla FLIP Detail View

Layout Switcher Container Morph

Snap.svg Logo Draw Reveal — Animated Hero Monogram Snippet

Snap.svg Logo Draw Reveal · Animations · Plain HTML, CSS & JS · Live preview

CategoryAnimations
TagsSVGMicro-InteractionsJS Libraries

Copy & paste

Source Code

Requires
JS · snap.svg-min.js
<section class="sld-hero">
  <div class="sld-glow"></div>
  <div class="sld-inner">
    <svg id="sldSvg" viewBox="0 0 220 220" width="180" height="180"></svg>
    <h1 class="sld-word">NOVARA</h1>
    <p class="sld-sub">A geometric monogram, drawn stroke by stroke, then filled.</p>
    <button class="sld-replay" id="sldReplay">Replay intro</button>
  </div>
</section>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Dash-offset outline reveal
The same stroke-dasharray/dashoffset technique used for chart lines.
Sequenced fill fade-in
fillOpacity animates in only inside the outline animation\u2019s completion callback.
Straight-line-only geometry
A pure M/L/Z path keeps the draw speed visually even across the shape.
Cross-system synchronization
A Snap.svg callback triggers a plain CSS class toggle for the wordmark.
Ambient glow backdrop
A blurred radial-gradient glow gives the hero depth without extra assets.
Replayable sequence
One draw() function tears down and rebuilds the entire reveal.
No external icon/logo asset
The monogram is pure inline SVG path data, no image file needed.
mina easing curves
easeinout and easeout shape the stroke and fill animations distinctly.

About this UI Snippet

Snap.svg Logo Draw Reveal — Outline First, Fill Second

Screenshot of the Snap.svg Logo Draw Reveal snippet rendered live

A logo reveal reads as premium when it happens in the right order: the *shape* establishes itself first, stroke by stroke, and only once it's recognizable does *substance* — solid color — fill it in. This snippet builds that two-stage reveal with Snap.svg, reusing the same dash-offset draw technique as an animated line chart, but finishing with a second animation stage the chart doesn't need.

Building a monogram from straight lines only

MONOGRAM_PATH = 'M110,20 L200,110 L110,200 L20,110 Z M60,110 L160,110' describes a diamond (four L commands closed with Z) plus a horizontal crossbar (a second M/L pair). Every command here is a straight line — no curves — which matters for this technique specifically: getTotalLength() and the dash-offset reveal work on *any* path, curved or straight, but a path made purely of lines has a length that's simple to reason about and reveals with a perfectly even, constant-feeling draw speed, since every point along it represents an equal fraction of straight-line distance.

Stage 1 — the outline draws itself

Identical mechanism to a self-drawing chart: strokeDasharray and strokeDashoffset are both set to the path's getTotalLength(), making the stroke start fully invisible, then strokeDashoffset animates down to 0 over 1.4 seconds so the outline appears to trace itself from the top point around to the crossbar.

Stage 2 — the fill fades in, gated by the outline's completion

The interesting new piece is what happens in the .animate() call's completion callback, which only fires after stage 1 finishes:

outline.attr({ fill: '#818cf8', fillOpacity: 0 }); outline.animate({ fillOpacity: 0.85 }, 700, mina.easeout);

fill-opacity is a distinct SVG attribute from the shape's overall opacity — it controls only the interior fill's transparency while leaving the stroke fully opaque. Setting the fill color and fillOpacity: 0 in the same attr() call primes the shape with a color that's present but invisible, so the subsequent animate({ fillOpacity: 0.85 }) has something to fade *to* without a flash of full-opacity color appearing instantly. Because this second animation is triggered from the first one's callback rather than started in parallel, the fill can never begin fading in before the outline has visually finished — which is what makes the sequence read as "outline, then substance" instead of everything happening at once.

Gating the wordmark text on the same sequence

The <h1> wordmark next to the SVG is a plain CSS opacity/transform transition, toggled by adding an .is-in class — but that class is added inside the *same* completion callback, delayed by a further setTimeout. This keeps the DOM-based text animation synchronized with the SVG-based logo animation even though they're driven by two completely different animation systems (Snap.svg tweens vs. CSS transitions).

Replay resets cleanly

draw() calls s.clear() first and removes the .is-in class from the wordmark, so clicking "Replay intro" tears down the previous SVG state and CSS state together before rebuilding both from scratch.

Step by step

How to Use

  1. 1
    Add the Snap.svg CDNInclude snap.svg-min.js from the CDN panel — it attaches a global Snap function.
  2. 2
    Paste HTML, CSS, and JSThe hero plays its logo reveal automatically on load.
  3. 3
    Watch the outline drawstroke-dashoffset eases the diamond-and-crossbar path in over 1.4s.
  4. 4
    Watch the fill fade infill-opacity animates in only after the outline finishes tracing.
  5. 5
    Watch the wordmark arriveA CSS transition brings in the text, synced via the same callback chain.
  6. 6
    Replace the monogramSwap MONOGRAM_PATH for your own straight-line SVG path data.

Real-world uses

Common Use Cases

Brand and product heroes
Open with a monogram that draws itself stroke by stroke, then fades in its fill once the outline is complete.
Portfolio and agency intros
Create a signature moment on a personal site, where straight-line geometry keeps the drawing speed visually even across every edge.
Sequenced SVG teaching
Learn how to chain a stroke animation into a fill fade, with a Snap.svg callback triggering a plain CSS class toggle.
Splash and loading screens
Use a drawn logo as a branded loader, with the outline establishing the shape before solid colour gives it substance.
Launch page wordmarks
Pair an animated mark with a wordmark on a product launch page, with a replay button for demos and design reviews.

Got questions?

Frequently Asked Questions

The dash-offset draw technique works on curves too, but a path made purely of M/L/Z commands has a length that is simple straight-line distance, so the reveal traces at an even, predictable speed across the whole shape rather than seeming to speed up or slow down through curved sections.

fill-opacity controls only the transparency of the shape\u2019s interior fill, leaving its stroke fully opaque. The overall opacity attribute would fade the stroke and fill together. Using fillOpacity lets the outline stay crisp while only the interior fades in.

Snap.svg\u2019s .animate() accepts a completion callback as its fourth argument, which only fires once that animation finishes. Starting the fill fade there guarantees the fill never begins appearing until the outline has visually finished tracing, preserving the "shape first, then substance" sequence.

The wordmark\u2019s .is-in class (which triggers its CSS opacity/transform transition) is added inside the same JavaScript callback that starts the fill animation, with an additional short setTimeout delay \u2014 so a Snap.svg tween and a CSS transition, two unrelated animation systems, are chained through one shared callback.

draw() is reused as the replay handler. Clearing the SVG and resetting the wordmark\u2019s class ensures each replay starts from the same blank state as the initial page load, rather than animating on top of an already-revealed logo.

Split MONOGRAM_PATH into two separate Snap.svg path elements (one for the diamond, one for the crossbar), give each its own getTotalLength()/dashoffset setup, and chain the crossbar\u2019s animation to start in the diamond\u2019s completion callback for a deliberate two-part outline sequence.