The Buddhist Wheel of Existence is a custom WordPress plugin that transforms ancient Buddhist iconography into an interactive educational tool. Built around multi-layered SVG graphics with independent rotation controls, clickable hotspot regions, and contextual modal overlays, it demonstrates the twelve links of dependent origination and six realms of existence through direct interaction rather than passive reading.

The technical challenge was creating smooth, independent animations for multiple concentric SVG layers while maintaining precise clickable regions that rotate with their parent layers. The solution combines CSS transforms, SVG path manipulation, and coordinate transformation mathematics to achieve 60fps animations even on mobile devices.

• Multi-Layer SVG Architecture: Three concentric SVG layers (outer wheel, middle realms, inner hub) that rotate independently at different speeds and directions, each maintaining clickable hotspot accuracy despite constant transformation
• Rotation Controls: Custom-built speed and direction controls for each layer with smooth acceleration/deceleration curves, pause/resume functionality, and synchronized animation timing using requestAnimationFrame for optimal performance
• Interactive Hotspots: SVG path-based clickable regions that detect mouse/touch events within complex polygonal shapes, with hit-testing that accounts for parent layer rotation using transformation matrix calculations
• Modal System: Context-aware overlay displays for the twelve nidanas (links) and six realms, featuring rich text content, traditional imagery, and cross-references between related concepts - all accessible via keyboard navigation
• Responsive Scaling: SVG viewBox manipulation ensures the wheel scales perfectly from desktop (800px) to mobile (320px) while maintaining crisp vector graphics and accurate touch targets at all sizes
• Educational Tooltips: Hover-activated labels for each realm and link, positioned dynamically based on SVG coordinates and current rotation angle, with collision detection to prevent overlap

SVG Layer Management: Each wheel layer exists as a separate SVG group element with its own transform origin point. Rotation is applied via CSS transforms rather than SVG rotate attributes, enabling hardware acceleration and smooth 60fps animations even when all three layers spin simultaneously.

Coordinate Transformation: Clicking a hotspot requires converting screen coordinates to SVG coordinates, then accounting for the layer's current rotation. This uses transformation matrix math (getScreenCTM and inverse matrices) to determine if a click falls within a rotated polygon - essential for maintaining interactivity during animation.

Animation Loop: A single requestAnimationFrame loop manages all three layer rotations, calculating delta time between frames to ensure consistent rotation speeds regardless of device performance. Layers can spin clockwise or counter-clockwise at independent speeds from 0-360°/second.

Content Structure: The twelve nidanas and six realms are stored as structured PHP arrays containing titles, descriptions, traditional symbolism, and relationships. This data drives both the SVG hotspot generation and modal content, ensuring consistency between visual and textual elements.

Touch Optimization: Mobile users experience touch-specific enhancements: larger hit areas (minimum 44px), momentum-based rotation gestures, and bottom-sheet modal styling that doesn't obscure the wheel. Touch events are debounced to prevent accidental double-taps during animation.

SVG Hit Detection Pattern: The polygon-based click detection demonstrates how to work with complex SVG shapes programmatically. Given a click coordinate and a rotated SVG path, the code determines if the point falls within the path using point-in-polygon algorithms adapted for transformed coordinate spaces.

Animation State Management: Three independent rotation states (speed, direction, current angle) per layer, managed in a single state object. The animation loop reads this state, updates angles based on elapsed time, and applies transforms - a pattern applicable to any multi-element animation system.

Dynamic Tooltip Positioning: Tooltips appear at appropriate positions relative to hotspots, accounting for wheel rotation, viewport boundaries, and other tooltip positions. The positioning algorithm uses polar-to-cartesian conversion, edge detection, and collision avoidance - transferable to any dynamic UI overlay system.

Progressive Enhancement: Without JavaScript, the wheel displays as a static SVG with accessible text labels. JavaScript adds interactivity progressively: first click handlers, then rotation controls, then tooltips. Each enhancement layer detects browser capabilities (SVG support, touch events, CSS transforms) before activating.

Challenge: Maintaining clickable accuracy on rotating SVG paths
Solution: Implemented transformation matrix calculations that convert click coordinates from screen space to SVG space, then account for the current rotation angle. The hit detection uses SVG's native isPointInFill() method after coordinate transformation, ensuring pixel-perfect accuracy regardless of rotation state.

Challenge: Smooth animations with multiple independent layers
Solution: Single requestAnimationFrame loop with delta time calculations prevents animation drift. Rather than setting fixed rotation increments, the code calculates exact rotation based on elapsed milliseconds and desired degrees-per-second, maintaining consistent speed even if frame rate fluctuates.

Challenge: Educational content accessibility for complex Buddhist concepts
Solution: Each of the twelve nidanas and six realms includes multiple levels of explanation: brief tooltip (10-15 words), modal introduction (50-75 words), and detailed exploration (200+ words with traditional symbolism). Users can engage at their comfort level - quick overview or deep study.

Challenge: Mobile performance with complex SVG and animations
Solution: Hardware-accelerated CSS transforms (transform: rotate()) rather than SVG animate elements. Simplified hit detection on touch devices using bounding boxes first, then precise polygon detection only when needed. Reduced animation complexity when battery saver mode detected.

This project demonstrates advanced SVG manipulation techniques rarely covered in standard web development tutorials. The transformation matrix math, coordinate space conversion, and point-in-polygon detection are applicable far beyond this specific use case - any project involving interactive vector graphics, data visualizations, or animated diagrams can benefit from these patterns.

The animation architecture shows how to build smooth, multi-element animations without relying on heavy libraries like GSAP or Anime.js. RequestAnimationFrame with delta time calculations, state management patterns, and CSS transform optimization create professional-quality animations with minimal overhead.

The progressive enhancement approach ensures the educational content remains accessible even in degraded environments - screen readers receive semantic HTML descriptions, JavaScript-disabled browsers see static graphics with text labels, and touch-only devices get optimized interactions. This is web development as it should be: inclusive first, enhanced second.

Study the source code particularly for the coordinate transformation logic and animation loop architecture - these are transferable skills that elevate web development from basic interactivity to sophisticated user experiences.

• SVG (Scalable Vector Graphics) for wheel imagery
• Vanilla JavaScript (ES6+) for animations and interactions
• CSS Transforms (hardware-accelerated rotation)
• RequestAnimationFrame API (smooth 60fps animations)
• WordPress custom plugin architecture
• PHP (content management and data structure)
• Transformation Matrix Mathematics (coordinate conversion)
• Touch Events API (mobile gesture support)