Fractal Animation
A canvas-based fractal animation that draws animated curves using interpolated circles. The animation creates organic, flowing patterns through mathematical interpolation and phase-shifted circular motion.
Preview
Watch the fractal curves animate as they draw. The animation adapts to your design system colors and theme.
Features
- Canvas-based fractal curve animation using interpolated circles
- Uses design system color tokens (primary, secondary) for dynamic theming
- Responsive canvas that adapts to container width
- Noisy data generation using midpoint displacement algorithm
- Phase-shifted circular motion creating organic patterns
- Automatic cleanup and regeneration on resize
Usage
Import and use the FractalAnimation component:
import FractalAnimation from "@/components/lattice/FractalAnimation";
export default function MyComponent() {
return (
<div className="w-full">
<FractalAnimation />
</div>
);
}Configuration
The animation automatically reads from CSS custom properties:
--primary- Primary color for curve gradients--secondary- Secondary color for curve gradients
The animation height is fixed at 480px, and the width adapts to the container. The component handles theme changes automatically and includes proper cleanup on unmount. The animation regenerates on window resize.
Implementation Details
Midpoint Displacement Algorithm
The animation uses a midpoint displacement algorithm to generate noisy curve data. Starting with two endpoints, the algorithm recursively subdivides segments by inserting new points at midpoints with random vertical offsets. This creates natural, organic variations in the curve patterns.
Circular Interpolation
The animation uses multiple circles (15 by default) positioned across the canvas. Each circle has a phase offset and variable radius based on the noisy curve data. Points are calculated using circular motion (cos/sin) with these parameters, creating flowing, organic curves.
Curve Drawing
Curves are drawn by interpolating between adjacent circles. The interpolation uses both linear and cosine-based blending for smooth transitions. Each frame draws a new line segment as the animation progresses through the full rotation, creating a progressive drawing effect.
Color Gradients
Colors are interpolated between the primary and secondary design system colors based on the noisy curve data. Each point along the curve gets a color value that transitions smoothly between the two colors, creating rich, gradient-like effects.
Rendering
The animation is rendered on an HTML5 canvas element using the "lighter" composite operation, which allows overlapping lines to blend additively. Lines are drawn progressively as the animation cycles through all points, creating a mesmerizing drawing effect.