Animated Identity · 15 Marks · Auto-Loop · Copy Prompts

Logos in motion.

Brand Motion Vol. 03 / 2026
Pure SVG · CSS keyframes · auto-loops every ~6s
Click any prompt panel to copy
Lens / Aperture01
APERTURE

Aperture

Optics
est. 2026
APERTURE / Camera Brand CLICK TO COPY
Create an SVG logo animation for a camera/optics brand called "Aperture":
- 7 black triangular aperture blades (like a camera diaphragm) arranged in a circle around center point (50,50)
- Animate blades rotating 30deg from scaled 0.3 to 1, opacity 0 to 1, with 50ms stagger between each blade (1.2s total)
- After blades close: a thin black outer ring (radius 33) springs in with cubic-bezier(.34,1.56,.64,1) at 1.1s
- Then a small red dot (#ff3b1f) pops at center at 1.5s with spring easing
- Finally, the wordmark "APERTURE" in extra-bold sans-serif with 0.5em letter-spacing fades in at 1.7s
- Background: pure white. Use only fill/transform/opacity with CSS keyframes.
Orbital Mark02

Orbital

Aerospace
Systems
ORBITAL / Aerospace CLICK TO COPY
Create an SVG logo animation for an aerospace company called "Orbital":
- 3 concentric thin white circles (radii 22, 32, 42) on blue (#0066ff) background
- Each circle draws using stroke-dasharray/dashoffset trick (1.4s ease-out), staggered 200ms
- A small yellow (#ffd400) satellite dot orbits the rings starting at 1.4s, infinite linear rotation 4s per loop
- A horizontal white bar (the wordmark base) scales-X from left at 1.6s with cubic-bezier(.7,0,.3,1)
- Solid blue background, no gradient. NASA-style minimal aesthetic.
Heritage Crest03

Maison

Automotive
Heritage
MAISON / Automotive Crest CLICK TO COPY
Create an SVG logo animation for a luxury automotive brand "Maison":
- Black background. A circular emblem (radius 30) split into two halves: white-left, blue-right (#3d6bff)
- Left half slides in from translateX(-60px), right half from translateX(60px), both 1s cubic-bezier(.5,0,.2,1)
- Two thin white outline rings (radii 30 and 34) spring in at 1s with cubic-bezier(.34,1.56,.64,1)
- After 2s: a white shine bar (rotated 20deg, clipped to circle) sweeps left-to-right repeatedly every 2.5s
- Use clip-path to keep halves inside the circle. BMW/Aston-Martin heritage feel.
Energy Strike04

Volt

Energy
Solutions
VOLT / Energy CLICK TO COPY
Create an SVG logo animation for an energy company called "Volt":
- Yellow (#ffd400) background, black elements
- A black thunderbolt polygon (lightning shape) drops from translateY(-60px), squashes (scaleY 1.15 then 0.95) on landing — 0.5s strike at 1s delay
- Surrounding it: a black thin circle (radius 36) traces clockwise from top using stroke-dashoffset (1s, starts at 0)
- A white flash circle scales from 0.5 to 2.2 with opacity 0→0.9→0 at the moment bolt lands
- After landing, bolt has continuous drop-shadow glow pulse every 2s
- Tesla/Shell energy aesthetic.
Monogram05

Atelier

Maison de
Couture
ATELIER / Couture House CLICK TO COPY
Create an SVG logo animation for a luxury fashion house monogram "Atelier":
- Cream/off-white background (#f5f0e8), dark ink (#1a1a1a)
- Three thick strokes form letter "A": left-leg, right-leg, crossbar — each draws via stroke-dashoffset, sequentially with 400ms gaps (1.2s each)
- After A is complete (1.6s): a thin square frame (64x64) draws around it via stroke-dasharray (1.4s ease-out)
- After frame closes (2.6s): four small dots fade in at frame corners, 100ms staggered
- Hermès/Dior heritage couture aesthetic. Sharp, geometric, refined.
Bullseye06

Bullseye

Athletic
Retail Co.
BULLSEYE / Retail CLICK TO COPY
Create an SVG logo animation for a retail/sports brand "Bullseye":
- Crimson red (#dc143c) background
- 4 concentric circles alternating white/red/white/red (radii 34, 26, 18, 10) all centered at (50,50)
- Each circle springs in from scale(0) with cubic-bezier(.34,1.56,.64,1), 150ms stagger between each (largest first)
- After all circles in (1s+): two white outline ping rings continuously expand from scale 0.4 to 2 with opacity 0.8→0, infinite 2s loop with 700ms delay between them
- Target/Beats by Dre minimal commercial logo feel.
Interlock07

Linka

Connect
Networks
LINKA / Network Interlock CLICK TO COPY
Create an SVG logo animation for a network/payments brand "Linka":
- White background, two overlapping circles (radius 20 each, centered at x=38 and x=62)
- Left circle is red (#ff3b1f) starting at translateX(-40px), right is blue (#0066ff) at translateX(40px)
- Both slide to position over 0.8s with cubic-bezier(.5,0,.2,1), final opacity 0.85 (so overlap area becomes purple multiply)
- After 1.2s: two black outline circles trace the same positions via stroke-dasharray (1.5s each, second delayed 1.4s)
- Mastercard/Venn-diagram interlocking aesthetic.
Crystal Mark08

Prism

Fintech
Platform
PRISM / Fintech Crystal CLICK TO COPY
Create an SVG logo animation for a fintech platform "Prism":
- Dark navy background (#1a1a2e). A diamond/crystal made of 4 triangular facets
- Each facet has a different gradient (purple→blue, cyan→blue, fuchsia→purple, sky-blue→cyan)
- Facets spring in from scale(0) rotate(-180deg), 100ms stagger, cubic-bezier(.34,1.56,.64,1)
- After 1.2s: the entire diamond rotates infinitely at 8s/turn (linear)
- A blurred white glow circle behind pulses opacity 0→0.3→0 every 3s
- Stripe/Linear/Vercel SaaS-startup aesthetic.
Shield Crest09

Sentinel

Bank &
Trust Co.
SENTINEL / Bank Shield CLICK TO COPY
Create an SVG logo animation for a bank/insurance brand "Sentinel":
- Deep teal (#0a3d3d) background. A pentagonal shield silhouette in mint (#a8e6cf)
- Shield reveals via clip-path inset wipe (left to right) over 1s with cubic-bezier(.7,0,.3,1)
- After shield in (1s): three vertical dark-teal "vault bars" (3 rectangles) inside it scale-Y from 0 to 1, 150ms staggered
- After bars (1.6s): a 5-pointed white star at top of shield springs in with rotate(-180deg) to 0, scale 0 to 1
- Chase/AmEx/financial-institution gravitas.
Continuous Mark10
STAYWELL

Staywell

Hospitality
Group
STAYWELL / Hospitality CLICK TO COPY
Create an SVG logo animation for a hospitality brand "Staywell":
- White background, single red (#ff3b1f) heavy stroke
- Draws a heart-pin-A hybrid shape (rounded pointed top, drops to a point) using one continuous SVG path
- Use stroke-dasharray/dashoffset to draw the entire path over 1.8s with cubic-bezier(.5,0,.2,1)
- After drawn (2s): the whole shape gently wobbles ±2deg rotation with scale 1→1.02 every 2.5s ease-in-out infinite
- Below shape: bold sans-serif "STAYWELL" wordmark fades up from translateY(8px) at 1.6s
- Airbnb single-line-mark aesthetic.
Swoosh11
KINETIC

Kinetic

Performance
Wear
KINETIC / Sportswear CLICK TO COPY
Create an SVG logo animation for a sportswear brand "Kinetic":
- Black background, yellow (#ffd400) swoosh shape (curved diagonal that thickens like a comma)
- Swoosh path filled with yellow, transform-origin left-bottom corner
- Animates from scaleX(0) skewX(-10deg) to scaleX(1.05) skewX(0) at 70%, settles to scaleX(1) — 1s cubic-bezier(.34,1.56,.64,1)
- Below swoosh: italic bold white "KINETIC" wordmark fades in from translateX(-10px) at 1s
- Nike-style energetic confident swoosh feel.
Roastery12

Roastery

Coffee
Co.
ROASTERY / Coffee CLICK TO COPY
Create an SVG logo animation for a coffee shop "Roastery":
- Cream background (#fef3e2), dark brown elements (#3d1f0a)
- A coffee bean (vertical ellipse 22x28) springs in from scale(0) rotate(-90deg) with cubic-bezier(.34,1.56,.64,1) over 0.9s
- A cream-colored center curve line draws on the bean (stroke-dashoffset) at 0.9s
- After bean (1.4s): an outer thin brown circle (radius 38) traces around the whole emblem via stroke-dasharray
- Three steam wisps (vertical wavy paths) above repeatedly rise and fade out (translateY 0→-15px, opacity 0→0.7→0), staggered 200ms, infinite 2s loop
- Starbucks-style coffee emblem.
Tri-Star13

Trion

Motors &
Aviation
TRION / Auto/Aviation Tri-Star CLICK TO COPY
Create an SVG logo animation for a high-end auto/aviation brand "Trion":
- Deep navy (#0d1b3d) background
- A three-pointed star (Mercedes-style) made of 3 thin white triangle arms at 120° apart, all meeting at center
- Each arm springs in from scale(0) rotate(180deg) to scale(1) rotate(0), 150ms stagger, cubic-bezier(.34,1.56,.64,1)
- After arms (0.6s): two thin white outline circles (radius 36 then 32) trace via stroke-dashoffset, second delayed 900ms
- After all in (1.8s): the star group rotates infinitely at 12s per turn (slow majestic)
- Mercedes-Benz style luxury car emblem.
Editorial Mark14
N O B L E EDITION · MMXXVI

Noble

Editorial
House
NOBLE / Editorial House CLICK TO COPY
Create an SVG logo animation for a publishing house "Noble":
- Warm off-white background (#f0ebe0). Five Playfair Display heavy-italic letters spell "NOBLE"
- Each letter drops in from translateY(50px) with cubic-bezier(.34,1.56,.64,1) over 0.7s, 80ms stagger
- After letters land (0.9s): a thin horizontal underline scales-X from left over 0.8s
- After underline (1.5s): a tiny mono-spaced label "EDITION · MMXXVI" centered below, fades in
- Vogue/NYT/Penguin Books editorial typography aesthetic.
Vital Pulse15

Vitalis

Biotech
Diagnostics
VITALIS / Biotech Pulse CLICK TO COPY
Create an SVG logo animation for a biotech/medical brand "Vitalis":
- Pure black background, neon green (#00ff88) elements
- A thin green outline circle (radius 36) traces via stroke-dasharray over 1s
- An ECG-style polyline (flat, peak, valley, peak, flat shape) draws across center horizontally with stroke-dasharray, with neon drop-shadow glow
- After drawn (1.5s): the dasharray offset continuously animates -200 making the wave appear to "flow/run" left infinitely (3s loop)
- At wave's right end: a small green circle springs in at 1s, then continuously beats (scale 1→1.4→1) every 1.2s with intense glow on peak
- Pfizer/Moderna biotech aesthetic.