The logo draws itself
The square and the circle are each drawn as a single stroke, then TOMATO LABORATORIES wipes in beneath them from left to right. This is the animation in the tomatolab.org header.
Timing
| Part | Starts | Ends | Easing |
|---|---|---|---|
| Square and circle (stroke draws) | 0s | 1.5s | cubic-bezier(0.39, 0.575, 0.565, 1) |
| Wordmark (wipes in, left to right) | 0.3s | 1.5s | cubic-bezier(0.39, 0.575, 0.565, 1) |
Using it
- Site headers, once per visit
- Opening titles and end cards
- Loading screens that last over 1.5s
- Never on loop, never in body content
On a website, inline the SVG with the tl-logo-draw class and Roma’s CSS animates it in any brand color. As a file, the animated SVGs below play on their own anywhere an SVG can be shown, including an <img> tag.
<link rel="stylesheet" href="https://brand.tomatolab.org/assets/roma.css">
<svg class="tl-logo-draw" style="color:#FF223C" …>…</svg>
<!-- or, as a self-contained file -->
<img src="tomato-lab-animated-red.svg" alt="Tomato Laboratories">Download animated SVG: Tomato · Dirt · Lab Coat
Stickers have weight
When letter stickers move, they behave like real objects: they fall, pile up, bounce and roll. Grab one and throw it.
The full playground is on the Patterns page.
Fades and wipes
Everything else stays quiet. Images fade in once. The logo never fades: it draws itself, as on the cover of this guide. Panels wipe in the direction they are read, left to right. Interface feedback, like a toggle sliding or a button changing color, takes 120ms or less.
Reduced motion
When someone has asked their device for less motion, skip straight to the final frame: the logo appears fully drawn, stickers appear already settled, and nothing slides.