---
title: "Rive vs Lottie vs SVG: Animating a Logo on Your Website"
description: "An animated logo for your website: Rive, Lottie, CSS/SVG or video compared on file size, Core Web Vitals and WCAG, with data from a live Rive logo."
url: "https://dardo.studio/en/blog/rive-vs-lottie/"
language: "en"
translations: {"es":"https://dardo.studio/es/blog/logo-animado-pagina-web/","pt":"https://dardo.studio/pt/blog/animacao-de-logo-site/"}
updated: "2026-10-29T18:28:53.764Z"
---

[Blog](https://dardo.studio/en/blog/)

# Rive vs Lottie vs SVG vs video: how to animate a logo on a website

Four ways to put an animated logo on a website, and what each costs in weight, speed and accessibility, measured on the Rive logo we built for Gissi.

By [Nicolás Cerón](https://www.linkedin.com/in/nicoceron/) · October 29, 2026

![A quiet music room at night: warm amber lamplight falls on a piano and open sheet music, and a single deep-crimson ribbon curls through the air above the keys like a moving line.](https://dardo.studio/_astro/01M646C3607XP9F7J8DP742SAT_20cbCK.webp)

## Key takeaways

- The player costs more than the animation: on gissimusic.com on 29 October 2026, the logo's .riv was about 4.5 KB over the wire and the Rive runtime about 378 KB.
- CSS on an inline SVG needs no player at all; reach for Rive or Lottie when the logo needs states, interaction or a motion designer's timeline.
- Ship the static SVG first, posed exactly where the animation comes to rest, and skip the animation for reduced motion and Save-Data.
- A canvas isn't a Largest Contentful Paint candidate, but the runtime's download still competes with the element that is.
- Under WCAG 2.2.2, motion that runs longer than five seconds next to other content needs a way to pause, stop or hide it.
- Video suits looks vectors can't draw: a 6-second 1440 × 810 recording of Gissi's hero is 1.5 MB and can't react to a hover.
- Make holes real cut-outs and version the logo's file addresses, or dark backgrounds and caches will show the wrong mark.

## Four ways to animate a logo, side by side

A logo can move on a web page in four ways: CSS animating an SVG that sits in the page's HTML, a Lottie player reading an After Effects export, a Rive player reading a .riv file, or a video. The logo can look much the same in all four. What changes is what each visitor downloads, who can edit the motion, and what happens for people who switch animation off.

| Route             | Format                                                             | Good at                                                                   | What drives the weight                                                                                                    | Interactivity                                                                                       | Reduced motion                                                   |
| ----------------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
| CSS on inline SVG | SVG markup in the HTML, animated with CSS keyframes or transitions | Draw-ins, pops, bounces and fades of the logo's own parts                 | The SVG's paths; there is no player                                                                                       | Hover and focus in CSS; more with a little JavaScript                                               | One @media (prefers-reduced-motion) rule                         |
| Lottie            | JSON (lottie-web) or a zipped .lottie file (dotLottie)             | Timelines a motion designer builds in After Effects or LottieFiles' tools | The player (76 KB gzipped for lottie-web's full build, about 500 KB of WebAssembly for dotLottie) plus the animation file | Play, pause, speed and frame from code; dotLottie state machines handle click, hover and completion | Up to your code: don't autoplay, show a still frame              |
| Rive              | Binary .riv file                                                   | Logos with states that react to hover, taps or data                       | The runtime (about 378 KB over the wire for the smallest package on Gissi's site) plus the .riv                           | State machines with pointer, keyboard and focus listeners                                           | Not automatic: pass the preference in, or don't load the runtime |
| Video             | MP4 or WebM                                                        | Footage, 3D renders, grain and effects that vectors can't draw            | Resolution, length and bitrate                                                                                            | Play and pause only                                                                                 | Don't autoplay; show the poster                                  |

## The player usually weighs more than the animation

A logo's animation file is small. What makes one route heavier than another is the code that plays it, which arrives before the first frame. We downloaded each player as published on npm (through jsDelivr) on 29 October 2026 and compressed it with gzip, as a web server would. Servers that use Brotli or Zstandard send a little less.

| Player                        | What the browser downloads                    | Uncompressed | Gzipped |
| ----------------------------- | --------------------------------------------- | ------------ | ------- |
| lottie-web 5.13.0, full build | JavaScript                                    | 306 KB       | 76 KB   |
| dotLottie web player 0.81.0   | WebAssembly engine, plus a JavaScript wrapper | 1.24 MB      | 496 KB  |
| Rive canvas-lite 2.49.0       | WebAssembly engine, plus a JavaScript wrapper | 830 KB       | 339 KB  |
| Rive webgl2 2.49.0            | WebAssembly engine, plus a JavaScript wrapper | 2.34 MB      | 974 KB  |
| CSS or video                  | Nothing extra: the browser does the work      | 0            | 0       |

The vendors' own documentation points the same way. Rive calls [canvas-lite](https://rive.app/docs/runtimes/web/canvas-vs-webgl) its smallest web package, because it drops the text, layout, audio and scripting engines; it recommends webgl2 for most projects, and by our measurement that engine is about three times larger. LottieFiles puts [the dotLottie engine](https://github.com/LottieFiles/dotlottie-web/tree/main/packages/web) at about 500 KB compressed and fetches it from a CDN when the first player starts, unless you preload or host it yourself.

Logo design

Want Dardo to do this for you?

Tell us what you need. Nico replies personally within one business day.

[Get a proposal](https://dardo.studio/en/contact/?service=logo-design) · [See the service](https://dardo.studio/en/services/logo-design/)

## The worked example: Gissi's logo

Gissi Music Academy is a music school in Bogotá that was called A medio tono until October 2026; on 23 October its site moved to the new name and to gissimusic.com. The logo is pink bubble lettering that spells "gissi", with a yellow shadow under the two i dots. That day we redrew the owner's logo file as vectors, one smooth outline per letter with the g's counter as a real hole, and animated it for the homepage hero with Rive. The details below come from the site's code and its commit history; the [Gissi case study](https://dardo.studio/en/work/gissi/) covers the rest of the site.

### One drawing, every output

The letters live in a single file of coordinates. One build command, npm run logo:build, turns it into:

- the static SVG used in the navigation bar, the footer and as the hero's fallback;
- the Rive scene, written as Rive shapes from the same coordinates (nothing is imported from an SVG) and compiled to a .riv file with Rive's command-line tool;
- the PNG and WebP logos, the default 1200 × 630 share image, the favicon and the app icons.

Because every output comes from the same coordinates, the animation comes to rest on exactly the pose the SVG shows, and the switch from one to the other can't be seen.

### What the animation does

- **Intro.** The five letters pop in from left to right, each growing a little past full size and settling. It lasts about 1.1 seconds.
- **Idle.** A "piano wave": each letter rises a few pixels and settles, 0.15 seconds after the one before, then the word holds still. It plays once and lasts about 1.8 seconds.
- **Hover or tap.** The letter under the pointer squashes and stretches for about half a second. These are Rive [listeners](https://rive.app/docs/editor/state-machine/listeners) on pointer enter and pointer down, so they work with a mouse and on a touch screen.
- **Shadows.** The yellow shadow under each i dot replays its dot's motion 0.1 seconds later, so the dot lifts away from it and the shadow catches up.

### A mistake worth avoiding: painted holes

The first version, on 23 October, painted the gaps between letters in the page's background colour. On any other background those gaps showed up as outlines around the letters. The fix, shipped the same day, gives each letter with a hole a clipping shape that uses the even-odd rule, so the g's counter is transparent and moves with the letter. In the SVG the same holes are a mask. A logo that will sit on light and dark backgrounds needs holes that are actually holes.

## How the homepage loads it

- **The static SVG comes first.** It is in the HTML as an <img> of 4,425 bytes, about 2.3 KB over the wire. It sits under the animation's canvas, invisible, and CSS fades it in 1.4 seconds after it renders unless the animation has already taken over.
- **The runtime and the logo file load together.** The runtime is Rive's canvas-lite package. Its WebAssembly file is served from gissimusic.com with the package version in its name: Rive's documentation says the [WASM must match the package version](https://rive.app/docs/runtimes/web/preloading-wasm), and hosting it yourself gives you control over its origin and caching.
- **The .riv ships gzipped.** The host serves .riv files as an unknown binary type and doesn't compress them, so the build gzips the file (9,872 bytes become 3,998) and the browser unzips it with DecompressionStream.
- **A late arrival skips the intro.** If the runtime arrives after the static logo has appeared, the animation starts on a second state machine, Calm, that goes straight to the idle wave, so the logo never pops in twice.
- **Reduced motion and Save-Data get the SVG only.** Visitors whose system asks for reduced motion, or whose browser sends Save-Data, download neither the runtime nor the .riv. With reduced motion the static logo shows at once; with Save-Data it fades in on its usual schedule.
- **Off screen, it stops.** When the page scrolls over the hero, the logo stops drawing with Rive's [stopRendering](https://rive.app/docs/runtimes/web/rive-parameters) and starts again when the hero comes back.
- **The name is announced once.** The wrapper has role="img" and the school's name as its aria-label; the <img> has empty alt text and the canvas is hidden from assistive technology.

## What we measured on gissimusic.com

On 29 October 2026 we loaded the live homepage in headless Chromium with the cache disabled: three times in a 1440 × 900 desktop window, twice in a 390 × 844 phone window throttled to a slow 4G connection (150 ms round trips, 1.6 Mbps down) with a four times slower CPU, and once with reduced motion on. "Over the wire" includes HTTP headers.

| What                                             | Uncompressed | Over the wire |
| ------------------------------------------------ | ------------ | ------------- |
| Static SVG logo                                  | 4,425 bytes  | About 2.3 KB  |
| Logo animation (.riv, gzipped by the site)       | 9,872 bytes  | 4.5 KB        |
| Rive JavaScript (canvas-lite 2.45.0, as bundled) | 197 KB       | 57.6 KB       |
| Rive WebAssembly                                 | 792 KB       | 320.5 KB      |
| Hero background animation (a second .riv)        | 150 KB       | 45.7 KB       |
| Whole homepage, motion on (desktop)              | –            | 1.16 MB       |
| Whole homepage, reduced motion (desktop)         | –            | 0.73 MB       |

What the numbers say:

- **The logo's own file is about 4 KB. The runtime that plays it is about 378 KB,** more than 150 times the static SVG.
- **Sharing the runtime changes the sums.** On Gissi the same runtime also plays the animated hero background, so the logo adds only its 4 KB file. A site that animates nothing but its logo pays the whole runtime for it.
- **Rive is most of the difference between the two loads.** About 428 KB of the 0.43 MB gap is the runtime and the two .riv files; the rest is a small smooth-scrolling script that also stays off under reduced motion.
- **The fallback covers slow connections.** On desktop without throttling, the animation took over about 1.4 seconds after navigation began, so the static logo never had to appear. On the throttled phone, the logo's space stayed empty for the 1.4 seconds the page waits for the intro, the static logo appeared at about 2.6 seconds, and the animation took over at about 6.4 to 6.5 seconds on the Calm state, without replaying the intro. In between, visitors saw the finished logo rather than an empty box.
- **The canvas was never the Largest Contentful Paint element.** On desktop, LCP was the navigation bar's SVG logo, an <img>; on the throttled phone, the hero's background image. [web.dev lists the elements LCP considers](https://web.dev/articles/lcp): images, <image> inside an SVG, video, CSS background images and blocks of text. Canvas isn't among them, and Chromium skips elements at opacity 0, such as the hidden fallback. The runtime's download still shares the connection with whatever the LCP element is; our [Core Web Vitals guide](https://dardo.studio/en/blog/pass-core-web-vitals/) covers the rest.

The limits: these are lab runs from one location in one browser engine, two or three runs per setup, not field data from real visitors. We didn't measure the animation's CPU use or frame rate.

## The video route, in numbers

For the Gissi case study on our own site we recorded the same homepage intro as a video: 6 seconds at 1440 × 810 and 60 frames a second, H.264 with no audio track. It weighs 1,513,399 bytes, about 1.5 MB. The film shows the logo and the animated background together, so it isn't a like-for-like comparison, but it is about three and a half times everything Rive sends to the homepage, and it can't respond to a hover or a tap.

Video is still the right call when the look is footage, 3D, grain or effects a vector player can't draw, or when the animation is a preview of a site rather than part of one, as on our portfolio. If you use it:

- Leave the audio out or mute it. Browsers [don't block autoplay](https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Autoplay) for a video with no audio track or with its audio muted.
- Use autoplay, loop, muted and playsinline for GIF-like behaviour, plus a poster image. Skip the animated GIF: in [web.dev's example](https://web.dev/articles/replace-gifs-with-videos), a 3.7 MB GIF became a 551 KB MP4 and a 341 KB WebM.
- A <video> can be the LCP element. The poster image or the first frame counts, whichever comes first, so keep the poster light.
- Under reduced motion, show the poster and don't autoplay. A loop that runs past five seconds needs controls, as the next section explains.

If what you need is a film rather than a moving logo, that's a different job; our [product launch videos](https://dardo.studio/en/services/product-launch-videos/) service covers it.

## The accessibility rules for a moving logo

### Five seconds: WCAG 2.2.2 Pause, Stop, Hide

WCAG 2.2 success criterion [2.2.2](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html), at level A, covers moving content that starts automatically, lasts more than five seconds and is shown alongside other content: there must be a way to pause, stop or hide it, unless the movement is essential. A logo intro that finishes in a second or two and then holds still falls outside it. A loop doesn't.

Gissi's intro lasts about 1.1 seconds. Until 29 October, the piano wave that follows repeated every 4.5 seconds with no pause control. Visitors who ask for reduced motion never saw it, and it stopped drawing once the page covered the hero, but the W3C's Understanding document doesn't say an operating-system setting counts as the mechanism, so by our reading the loop fell short of 2.2.2. We found it while researching this article and changed it the same day: the wave now plays once. In headless Chromium, checking the logo's canvas every 100 milliseconds, the old build moved again every 4.5 seconds for as long as we watched; the new one stops about 3.5 seconds after the page opens and stays still. Hovering over or tapping a letter still bounces it, because the visitor starts that motion.

### Motion you trigger: WCAG 2.3.3 Animation from Interactions

Success criterion [2.3.3](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html) is level AAA: motion that an interaction triggers, like Gissi's hover squash, should be possible to switch off unless it's essential. The W3C's sufficient technique is the prefers-reduced-motion media query ([C39](https://www.w3.org/WAI/WCAG22/Techniques/css/C39)). On Gissi, reduced motion means the .riv never loads, so the squash can't play.

### Reduced motion is your job in every format

[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion) describes prefers-reduced-motion as detecting that someone has asked their device to minimise non-essential motion, which can cause discomfort for people with vestibular disorders. None of the players applies it for you. Rive's documentation says it [doesn't apply reduced motion automatically](https://rive.app/docs/editor/accessibility/reduced-motion) and suggests passing the preference into the file through data binding, with a reduced path in the state machine. The lottie-web README doesn't mention it, so your code decides whether to autoplay. With CSS it's one media query. For a logo, the simplest reduced version is the still logo.

### Give the logo its name once

To assistive technology, a [canvas is just a bitmap](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/canvas), so a Rive logo, or a Lottie logo drawn on canvas, needs its name on a wrapper element (role="img" with an aria-label) and the canvas hidden. lottie-web's SVG renderer can add a title and a description to the SVG it draws, and Rive's web runtime has an experimental option that builds an accessible layer over the canvas. Our [brand guidelines guide](https://dardo.studio/en/blog/brand-guidelines/) covers flashing limits and how to write motion rules down, and the [WCAG 2.2 checklist](https://dardo.studio/en/tools/wcag-2-2-checklist/) helps you test the rest of the page.

## How to choose

- **CSS on inline SVG** when the motion is moves, scales and fades of the logo's own parts. Put the SVG in the HTML so CSS can reach each letter; loaded as an <img>, the SVG is a single image to the page and [scripts inside it don't run](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG%5Fas%5Fan%5Fimage). [Animate transform and opacity](https://web.dev/articles/animations-guide), which the browser can handle at the compositing stage, and set [transform-box: fill-box](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transform-box) so a letter scales around its own centre rather than the SVG's. [CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) need no JavaScript, and the browser can slow them down in tabs nobody is looking at.
- **Lottie** when a motion designer builds the timeline in After Effects, exported with Bodymovin, or in LottieFiles' tools, and the logo plays rather than reacts. [lottie-web](https://github.com/airbnb/lottie-web) draws to SVG, canvas or HTML; its full player is 76 KB gzipped. [dotLottie](https://dotlottie.io/) files are compressed and can bundle several animations, themes and state machines, but the player brings about 500 KB of WebAssembly.
- **Rive** when the logo has states or reacts: hover, taps, a loading state, a theme. It pays off most when the same runtime plays other things on the site, as Gissi's hero background does. Start with canvas-lite if the file uses no Rive text, layouts, audio or scripting.
- **Video** when the look can't be drawn with vectors and nobody needs to interact with it.

Whichever you pick, the same five rules apply:

1. Ship the static SVG first, at exactly the pose the animation comes to rest on.
2. Load the animation after the page's main content, and skip it for reduced motion and Save-Data.
3. Stop drawing when the logo is off screen.
4. Keep automatic motion under five seconds, or give it a pause control.
5. Name the logo once for screen readers.

## What to ask your logo designer for

- A vector master in which every part that will move is its own named shape, and every hole is a cut-out, not a patch of background colour.
- The animation's rest pose, which doubles as the static logo.
- A motion section in the [brand guidelines](https://dardo.studio/en/blog/brand-guidelines/): durations, easing, what loops and what never moves.
- A reduced-motion version, usually the still logo.
- Versioned file addresses for the web. Gissi's /logo-mark.svg was cached for a day, so visitors who had seen the previous mark kept it in the navigation bar after the new logo shipped; on 23 October its address gained a content hash, as the .riv's already had. Our [rebrand launch checklist](https://dardo.studio/en/blog/brand-launch-checklist/) covers the other files that need the same care.

If the logo itself is still being commissioned, [what logo design costs](https://dardo.studio/en/blog/logo-design-cost/) compares published prices; ask for the motion files in the same brief, because adding separate shapes later means redrawing.

## Where Dardo comes in

We design logos through our [logo design](https://dardo.studio/en/services/logo-design/) service, build complete identities through [brand creation](https://dardo.studio/en/services/brand-creation/) and do the motion and WebGL work on websites through [creative development](https://dardo.studio/en/services/creative-development/). If your logo needs to move, [tell us](https://dardo.studio/en/contact/) where it will live and what it should do.

## Common questions

**Does an animated logo slow down a website?**

The animation file rarely does; its player can. On gissimusic.com on 29 October 2026, the Rive logo file was about 4.5 KB over the wire and the Rive runtime about 378 KB, against 2.3 KB for the static SVG. Show the SVG first, load the animation after the main content, and skip the runtime for reduced motion and Save-Data.

**Is Rive or Lottie lighter?**

It depends on the player. Gzipped, as published on 29 October 2026: lottie-web's full build is 76 KB of JavaScript, Rive's smallest web package carries 339 KB of WebAssembly, and the dotLottie player about 496 KB. Animation files are usually small either way; Gissi's .riv is 4 KB. For a logo on its own, CSS on an SVG is lighter than both.

**Can I use an animated GIF for my logo?**

You can, but a video or an animated SVG will be lighter. In web.dev's example, a 3.7 MB GIF became a 551 KB MP4 and a 341 KB WebM. A GIF is also a bitmap, so it won't stay sharp at every size the way an SVG does.

**Does an animated logo need a pause button?**

Only if it moves on its own for more than five seconds alongside other content: that's WCAG 2.2 success criterion 2.2.2, at level A. A short intro that ends and holds still doesn't need one. A loop that keeps going does, unless you stop it within five seconds.

**What should visitors who prefer reduced motion see?**

Usually the still logo. Check the prefers-reduced-motion media query before loading any player. On Gissi's site those visitors download neither the Rive runtime nor the animation file and see the static SVG at once. Neither Rive nor Lottie applies the setting for you.

**Does an animated logo affect Largest Contentful Paint?**

A canvas isn't one of the elements LCP considers, so a Rive logo won't be the LCP element; an <img> SVG logo or a <video> can be. In our runs on Gissi's homepage, LCP was the navigation bar's SVG logo on desktop and the hero background image on a throttled phone. The runtime's download still competes with them.

**Should the logo in the navigation bar animate too?**

On Gissi's site it doesn't: the navigation bar and footer use the static SVG, and only the homepage hero animates. Motion in the header follows visitors onto every page, so we keep it for one place where the logo has room.

**Can my existing logo be animated, or does it need redrawing?**

It needs to be vectors, with each moving part a separate shape. If all you have is a flat image, it gets redrawn first: Gissi's logo arrived as a 1619 × 971 image, and we redrew each letter as one vector outline before animating it.

## Sources & further reading

Sources behind this page, with further detail from the original publishers.

- [Rive Docs: Canvas vs WebGL, choosing a web package](https://rive.app/docs/runtimes/web/canvas-vs-webgl) · rive.app
- [Rive Docs: Web (JS) runtime](https://rive.app/docs/runtimes/web/web-js) · rive.app
- [Rive Docs: Preloading WASM](https://rive.app/docs/runtimes/web/preloading-wasm) · rive.app
- [Rive Docs: Rive parameters (stopRendering, semantics)](https://rive.app/docs/runtimes/web/rive-parameters) · rive.app
- [Rive Docs: State machines](https://rive.app/docs/editor/state-machine/state-machine) · rive.app
- [Rive Docs: Listeners](https://rive.app/docs/editor/state-machine/listeners) · rive.app
- [Rive Docs: Reduced motion](https://rive.app/docs/editor/accessibility/reduced-motion) · rive.app
- [Rive Docs: .riv file format](https://rive.app/docs/runtimes/advanced-topic/format) · rive.app
- [Airbnb: lottie-web on GitHub](https://github.com/airbnb/lottie-web) · github.com
- [LottieFiles: dotlottie-web on GitHub](https://github.com/LottieFiles/dotlottie-web/tree/main/packages/web) · github.com
- [dotLottie: the .lottie file format](https://dotlottie.io/) · dotlottie.io
- [W3C: Understanding SC 2.2.2 Pause, Stop, Hide](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html) · w3.org
- [W3C: Understanding SC 2.3.3 Animation from Interactions](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html) · w3.org
- [W3C: Technique C39, the prefers-reduced-motion query](https://www.w3.org/WAI/WCAG22/Techniques/css/C39) · w3.org
- [MDN: prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion) · developer.mozilla.org
- [MDN: Using CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) · developer.mozilla.org
- [MDN: transform-box](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transform-box) · developer.mozilla.org
- [MDN: SVG as an image](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG%5Fas%5Fan%5Fimage) · developer.mozilla.org
- [MDN: The canvas element (accessibility)](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/canvas) · developer.mozilla.org
- [MDN: Autoplay guide for media and Web Audio APIs](https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Autoplay) · developer.mozilla.org
- [web.dev: Largest Contentful Paint (LCP)](https://web.dev/articles/lcp) · web.dev
- [web.dev: How to create high-performance CSS animations](https://web.dev/articles/animations-guide) · web.dev
- [web.dev: Replace animated GIFs with video](https://web.dev/articles/replace-gifs-with-videos) · web.dev
- [Gissi Music Academy homepage (measured 29 October 2026)](https://gissimusic.com/) · gissimusic.com
- [jsDelivr: lottie-web 5.13.0 player files](https://cdn.jsdelivr.net/npm/lottie-web@5.13.0/build/player/) · cdn.jsdelivr.net
- [jsDelivr: @lottiefiles/dotlottie-web 0.81.0 files](https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web@0.81.0/dist/) · cdn.jsdelivr.net
- [jsDelivr: @rive-app/canvas-lite 2.49.0 files](https://cdn.jsdelivr.net/npm/@rive-app/canvas-lite@2.49.0/) · cdn.jsdelivr.net
- [jsDelivr: @rive-app/webgl2 2.49.0 files](https://cdn.jsdelivr.net/npm/@rive-app/webgl2@2.49.0/) · cdn.jsdelivr.net

[Nicolás Cerón](https://www.linkedin.com/in/nicoceron/)

Nicolás Cerón is the founder of Dardo, a brand, web design and development studio in Bogotá, Colombia.

## Related articles

- [**Brand guidelines: what to include, section by section, with a checklist, a template and real examples**Logo rules with clear space and minimum sizes, colours for screen and print with tested contrast, licensed type, voice with examples, templates and an owner.](https://dardo.studio/en/blog/brand-guidelines/)
- [**How much does logo design cost in 2026? Prices from logo makers, contests, freelancers and US studios**A logo costs USD 35–72 from a logo maker, USD 249–1,199 in a contest, USD 150–1,500 from a freelancer and USD 99–2,495 from US studios that publish prices.](https://dardo.studio/en/blog/logo-design-cost/)
- [**How much does brand identity design cost? Published packages, guidelines prices and timelines (2026)**Published US brand identity packages ran USD 1,299–13,000 without strategy and USD 8,000–40,000+ with it. Tiers, guidelines prices and timelines.](https://dardo.studio/en/blog/brand-identity-cost/)
- [**3D websites: when they're worth it and how to keep them fast**When a 3D website earns its place, when video or images work better, and how we kept Janus Observatory's ten 3D worlds fast, accessible and usable.](https://dardo.studio/en/blog/3d-websites/)

## Keep exploring.

- [Service · **Logo design for companies: a mark that works everywhere it appears**](https://dardo.studio/en/services/logo-design/)

- [Your project · **Start a conversation**](https://dardo.studio/en/contact/)