Logo Draw
A three-step emblem — circle, hexagon, centre dot — drawn stroke by stroke on one shared cycle, looping or just once, with no JavaScript.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. SVG has 30 effects, including 3 free. Explore the category →
3 usage examples
How it works
The 120×120-unit SVG holds three elements: a circle of radius 55 (.lgd-ring, 4-wide purple stroke), a hexagon (.lgd-shape, 3-wide magenta stroke with rounded corners) and a filled dot of radius 8 in the centre (.lgd-dot). Both outlines carry pathLength="100" and a dash of 100: shifting that dash (stroke-dashoffset from 100 to 0) makes the stroke appear from its starting point.
The three animations share one duration (--lgd-speed, 2.5 s) and split the cycle: the circle draws from 0 to 40%, the hexagon from 20 to 60%, then the dot grows from its centre and turns opaque between 60 and 70%. The drawing stays complete until the end of the cycle. When looping (the default), it vanishes at once and starts over; with --lgd-repeat: 1, it draws once and stays on screen.
The three elements follow a single clock: the dot lights up only once per cycle, growing from its own centre (transform-box: fill-box), and the hexagon stays in step with the circle from one cycle to the next. --lgd-play: paused makes the drawing wait (nothing visible) until you set the variable back to running; hiding then showing the root replays the drawing from the start.
Accessibility
- Decorative: the SVG carries
aria-hidden="true". Used as a clickable logo, the brand name must be in the link (visible text oraria-label). - Reduced motion: with
prefers-reduced-motion: reduce, the three animations are removed and the emblem shows complete, even while waiting with--lgd-play: paused(measured in all three engines: 0 running animations, stable image). - No blinking: the dot lights up only once per cycle; when looping, the emblem redraws every 2.5 s.
- Contrast: the
#8b5cf6purple circle reaches 4.7:1 on the shipped background and 4.2:1 on white; the#d946efmagenta drops to 3.5:1 on white, enough for a graphic element.
Browser compatibility
Pure CSS. pathLength on a circle needs Chrome 57, Firefox 61 and Safari 14; transform-box (growing from the dot's centre), Chrome 64, Firefox 55 and Safari 11; the reduced-motion rule, Chrome 74 and Firefox 63. Measured in Chromium 151, Firefox 153 and WebKit 26.5: 0 errors, the three elements restart together (once in 3 s each), two independent copies.
Without CSS animations, the emblem shows complete. Before Safari 14, dashes ignore pathLength: the circle and hexagon draw as dotted lines.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0600-root">
<svg class="lgd-svg" viewBox="0 0 120 120" aria-hidden="true">
<circle class="lgd-ring" pathLength="100" …/>
<path class="lgd-shape" pathLength="100" d="…"/>
<circle class="lgd-dot" …/>
</svg>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
--lgd-repeat |
infinite |
1: the logo draws once and stays on screen. |
--lgd-play |
running |
paused: nothing is drawn until you set the variable back to running (for instance when the logo becomes visible). |
--lgd-speed |
2.5s |
Length of a cycle: the three elements keep their order and proportions. |
--lgd-size |
120px |
Drawing width (never wider than its container). |
--lgd-ring, --lgd-shape, --lgd-dot |
#8b5cf6, #d946ef, #6366f1 |
Colours of the circle, the hexagon and the dot. |
--lgd-bg and --lgd-min-h |
#0a0a0f and 300px |
Frame background and minimum height; transparent and 0 inside a header. |
| Your own shapes | circle, hexagon, dot | Replace the SVG elements but keep the classes (lgd-ring draws first, lgd-shape next, lgd-dot appears last) and pathLength="100" on outlines. |
FAQ
--lgd-repeat: 1 on .fx-0600-root.--lgd-play: paused on the root, then: new IntersectionObserver(e => { if (e[0].isIntersecting) root.style.setProperty('--lgd-play', 'running'); }).observe(root);. To replay it later, hide then show the root again.@keyframes rule modelled on lgdShape with other percentages.
