Skip to main content
šŸŒ Public

Share visualization

Send this visualization to others.

Happy Saint Patrick's Day!

Public visualization

Viewing a saved revision (read-only)

1a539e0055e14985a068389d4b6910a4

Happy Saint Patrick's Day!

0 stars1šŸŒ Public
NNita
Last edited Mar 18, 2025
Created on Mar 18, 2025

This animated SVG scene celebrates Saint Patrick's Day with falling shamrocks that sway via custom `requestAnimationFrame` physics, a rainbow built from D3 arc paths, a clicking leprechaun that walks and jumps, and a field of clovers. Using d3 transitions and selectors, users can grow shamrocks or make them float away, click the pot for coins, and find four-leaf clovers for special effects.

AI-generated description

Saint Patrick's Day Visualization

An interactive visualization celebrating Saint Patrick's Day, implemented with HTML, CSS, and D3.js.

Features

  • Falling shamrocks with natural swaying movement
  • Colorful rainbow arc with pot of gold
  • Animated leprechaun character
  • Field of clovers with a rare four-leaf clover for good luck
  • Festive green theme
  • St. Patrick's Day greeting

Technical Highlights

  • Custom animation using requestAnimationFrame for smooth movement
  • D3.js for SVG elements and transitions
  • Emoji-based graphics for cross-platform compatibility
  • Responsive design that adapts to different screen sizes

ā˜˜ļø Happy Saint Patrick's Day! ā˜˜ļø