Skip to content

Animated Triangular Logo

The triangular SVG from the original Depictio progressive loading script, now with dynamic animations!

Interactive Triangular SVG

Click the logo to trigger enhanced animation!

💡 Hover over the logo to see the sequential triangular animation!

Triangular Animation Features

The animated triangular logo includes the exact effects from the original Python implementation:

1. Sequential Triangle Pulsing

  • 7 Triangular Shapes: Each triangle (shape-1 through shape-7) animates individually
  • Sequential Timing: 0.1s delays between each triangle (0s, 0.1s, 0.2s, 0.3s, 0.4s, 0.5s, 0.6s)
  • Pulse Effect: Each triangle scales from 100% to 120% and back with brightness changes
  • Transform Origin: Each shape uses center origin and fill-box for proper scaling

2. Color-Coded Triangles

  • Shape 1: #f1c547 (Golden yellow)
  • Shape 2: #c064d3 (Purple/magenta)
  • Shape 3: #58b3cb (Light blue)
  • Shape 4: #6279f0 (Blue)
  • Shape 5: #ee9644 (Orange)
  • Shape 6: #7d5dec (Purple)
  • Shape 7: #a1d44d (Green)

3. Interactive Features

  • Click Activation: Click to trigger the sequential animation
  • Automatic Cycling: Animation triggers every 10 seconds
  • Debug Console: Console logs show triangle detection and animation status

Shape Animation Timing

Triangle 1

Delay: 0.0s

Color: Golden Yellow

Triangle 2

Delay: 0.1s

Color: Purple/Magenta

Triangle 3

Delay: 0.2s

Color: Light Blue

Triangle 4

Delay: 0.3s

Color: Blue

Triangle 5

Delay: 0.4s

Color: Orange

Triangle 6

Delay: 0.5s

Color: Purple

Triangle 7

Delay: 0.6s

Color: Green

Technical Implementation

The animation system consists of:

  1. CSS Keyframes: Define the core animation patterns
  2. JavaScript Enhancement: Adds interactivity and advanced effects
  3. Sequential Timing: Staggered animations with delays
  4. Responsive Design: Animations adapt to different screen sizes

Animation Keyframes Used

  • sequential-pulse: Main pulsing animation with scaling and color effects
  • logo-breathe: Subtle breathing effect with rotation and glow
  • color-shift: Smooth color transitions across the spectrum
  • particle-float: Floating particle effects around the logo

Code Reference

The implementation can be found in: - CSS: docs/stylesheets/extra.css:92-166 (Animation definitions) - JavaScript: docs/javascripts/animated-logo.js:1-150 (Interactive enhancements) - Configuration: mkdocs.yml:77-78 (Asset loading)

SVG Details

This SVG contains 7 triangular shapes with the following colors:

  • Shape 1: Golden yellow (#f1c547)
  • Shape 2: Purple/magenta (#c064d3)
  • Shape 3: Light blue (#58b3cb)
  • Shape 4: Blue (#6279f0)
  • Shape 5: Orange (#ee9644)
  • Shape 6: Purple (#7d5dec)
  • Shape 7: Green (#a1d44d)

The original Python script animates each triangle sequentially with a 0.1s delay between each one.