Lens / Aperture01
Aperture
Optics
est. 2026
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
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
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
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
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.
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
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
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.
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
Hospitality
Group
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
Performance
Wear
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.
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
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
Noble
Editorial
House
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
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.