SVG Decorations Showcase

This post demonstrates the new multi-SVG decoration system in action!

Features Demonstrated

This post card includes 4 different SVG decorations:

1. Top Center - Using the "hiTopCenter" preset
2. Left Side - Custom configuration with warm color filter
3. Right Side - Smaller SVG with high rotation
4. Bottom Left - Medium sized with subtle animation

Configuration Examples

Using Presets

svgDecorations:
  - "hiTopCenter"  # Simple preset reference

Custom Configuration

svgDecorations:
  - svg: "hi.svg"
    position: "left"
    offsetPercentage: 70
    offsetX: -8
    offsetY: 5
    size: 0.45
    opacity: 0.3
    rotation: -25
    hoverScale: 1.4
    filter: "sepia(40%) saturate(180%) hue-rotate(30deg) brightness(1.2)"

Animation Features

• Load Animation: SVGs fade and scale in when the card appears
• Hover Effects: Each SVG scales and rotates slightly on hover
• Staggered Timing: Multiple SVGs animate at slightly different rates
• Spring Physics: Natural, bouncy animation feel

Try hovering over this post card to see all the animations in action!

Position Options

• top - Above the card
• bottom - Below the card
• left - Left side of the card
• right - Right side of the card

Each position supports percentage-based offsets (0-100) for precise placement.