#

## 🎬 Animated Logos

CSS Animations & Effects

Systematic Orchestration, Perfectly Arranged

💡 Quick Tips: Entry animations can be replayed with the restart button. Loop animations run continuously. Click any preview to open the SVG in a new tab.

## 🎯 Main Logos - Quick Access

### Primary Logo Variations

ANIMATED
Horizontal Lockup
Complete logo with animated icon and static text. Perfect for hero sections and splash screens.
syntax_logo_a.svg • 800×200px
ANIMATED
Compact Horizontal
Horizontal logo without tagline with animated icon. Ideal for toolbars and navigation.
syntaxis_logo_c_a.svg • 400×100px
ANIMATED
Vertical Stack
Animated icon stacked above text. Perfect for social profiles and mobile app headers.
syntax_logo_vertical_a.svg • 250×380px
ANIMATED
Compact Vertical
Animated vertical logo without tagline for compact spaces. Ideal for icons and app headers.
syntax_logo_vertical_c_a.svg • 200×280px

### Icon & Monogram

ANIMATED
Main Icon
Animated geometric icon with assembly, breathing, and disassembly phases. Perfect for loading states.
syntax_icon_a.svg • 200×200px
ANIMATED
Favicon
Animated icon for browser tabs and bookmarks. Available in SVG, and in ICO (32×32, 16×16) and PNG formats upon request.
syntax_favicon_a.svg • 200×200px

### Monochrome Versions

ANIMATED
Horizontal Lockup (B&W)
Complete logo in black and white with animated icon. Perfect for print-ready monochrome applications.
syntax_logo_bn_a.svg • 800×200px
ANIMATED
Compact Horizontal (B&W)
Horizontal logo without tagline in black and white with animated icon. Ideal for monochrome applications.
syntaxis_logo_bn_c_a.svg • 400×100px
ANIMATED
Vertical Stack (B&W)
Stacked layout in black and white with animated icon. Perfect for square spaces and monochrome layouts.
syntax_logo_vertical_bn_a.svg • 250×380px

### Scalability Test

Icon Scalability

The animated icon maintains clarity and proportions at various sizes. Recommended minimum: 32px.

16×16px
32×32px
64×64px
128×128px
256×256px

Full Logo Scalability

The horizontal full logo displays well at various aspect ratios with responsive scaling.

Small (200px)
Medium (400px)

## 🚀 Entry Animations (One-Time)

These animations run once when the page loads. Reload (Cmd+R or Ctrl+R) to see them again.

## ♾️ Loop Animations (Continuous)

These animations run continuously in an infinite loop.

## 🖱️ Interactive Animations

These animations respond to user interaction (hover, click).