Marshwall Logo Animations

Stroke Draw & Fill

Each letter path is drawn with a stroke animation, then fills in. The icon draws last with a red stroke reveal. Hero / About

Stagger Fade Up

Icon drops in from above while each letter fades up with staggered spring easing. Fast and elegant. Hero / Nav

Clip Reveal + Stamp

Icon drops in from above while each letter fades up with staggered spring easing. Fast and elegant. Hero / Nav

Scatter Assemble

Letters scatter from random positions with blur and rotation, then assemble into place. Icon bounces in from above. Preloader / Splash

Glitch Reveal

Digital glitch effect with hue shifts and position jitter. Letters appear in rapid succession with a scanline overlay. Tech / Gaming

Elastic Pop

Each element pops in from zero scale with an elastic overshoot. Bouncy, playful, and modern. App / Startup

Typewriter Cursor

Icon fades in, then the wordmark types in character-by-character with a blinking red cursor. Clean editorial feel. Editorial / Blog

Slide & Divider

Icon slides in from left, a red divider line draws across, then the wordmark slides in from right. Cinematic split reveal. Portfolio / Agency

3D Flip In

Icon flips in on the Y-axis, then each letter flips up from the X-axis with perspective depth. Premium 3D motion feel. SaaS / Corporate

Preloader with Progress Bar

Icon breathes with a subtle pulse while a progress bar fills. Wordmark fades in once loading completes. Perfect full-screen preloader. Preloader

How to Import & Use Your Exports

SVG

Inline SVG (Best Quality)

Embed the animated SVG directly in HTML. Infinitely scalable, smallest file size, smoothest animation.

<!-- Inline: paste SVG contents directly -->
<div class="logo">
  <svg xmlns="..." viewBox="0 0 707 345">
    <style>...</style>
    <path class="icon" .../>
    ...
  </svg>
</div>

<!-- Or reference as an image -->
<img src="/assets/marshwall-anim.svg"
     alt="Marshwall" width="440" />

<!-- Or as an object (allows interaction) -->
<object type="image/svg+xml"
  data="/assets/marshwall-anim.svg"
  width="440"></object>

CSS

SVG Preloader Overlay

Use the animated SVG as a full-screen preloader. Much lighter than GIF and resolution-independent.

<div class="preloader" id="preloader">
  <object type="image/svg+xml"
    data="/assets/marshwall-anim.svg"
    width="300"></object>
</div>

<style>
.preloader {
  position: fixed; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  z-index: 9999;
  transition: opacity .5s ease;
}
.preloader.hidden {
  opacity: 0;
  pointer-events: none;
}
</style>

<script>
window.addEventListener('load', () => {
  setTimeout(() => {
    document.getElementById('preloader')
      .classList.add('hidden');
  }, 2800);
});
</script>

React / Next.js

SVG or GIF Component

Import either format into your React component. SVG for web, GIF for email/social.

<!-- SVG: import as React component -->
import { ReactComponent as Logo }
  from './marshwall-anim.svg';

function Hero() {
  return <Logo width={440} />;
}

<!-- GIF: import as image source -->
import logoGif from './marshwall.gif';

function Preloader({ onDone }) {
  useEffect(() => {
    const t = setTimeout(onDone, 2800);
    return () => clearTimeout(t);
  }, [onDone]);
  return (
    <div className="preloader">
      <img src={logoGif} alt="Loading"/>
    </div>
  );
}

Format Guide

SVG vs GIF: When to Use

Choose the right format based on where the animation will be used.

SVG (recommended for web)
  + Infinitely scalable, sharp at any size
  + Tiny file size (5-15 KB)
  + Smooth 60fps CSS animation
  + Editable: tweak colors & timing
  - Not supported in email clients

GIF (for compatibility)
  + Works everywhere: email, Slack, social
  + No browser rendering differences
  - Fixed resolution, larger file size
  - Limited to 256 colors per frame

Rule of thumb:
  Website / App  →  SVG
  Email / Social →  GIF

Marshwall — Logo Animation System

Export Animation as GIF

How to Import & Use Your Exports

Inline SVG (Best Quality)

SVG Preloader Overlay

SVG or GIF Component

SVG vs GIF: When to Use