Visual
SVG
Aug 26, 2025
0 views
An SVG point-field arranged along the golden-angle (Fermat) spiral. Each dot can pulse in size and opacity with phase offsets from the spiral index, and the entire field can rotate smoothly. Works great for meditative backgrounds, hero motifs, and data-art accents.
//
Tags
Add SCGoldenSpiral to your canvas; choose Size Mode = fixed (px) or dynamic (% of container).
Set Points (e.g., 400–1200) and Dot Radius (1.5–3 for dense fields).
Enable Pulse Effect to animate dot r and opacity; choose Duration, Min/Max Size, Min/Max Opacity, and Pulse Direction (inside or outside).
Toggle Rotate for slow turntable motion; adjust Rotation Speed and Direction.
Frame the motif via Anchor presets plus X/Y Offset.
Calm Aura: points=700 · r=2 · pulseEffect=on · duration=4 · size 0.8–1.25 · opacity 0.25–0.9 · rotate off
Hero Drift: points=900 · r=2 · pulseEffect=on · duration=3 · rotate on · speed=0.2 · dir=clockwise
Minimal Static: points=500 · r=1.5 · pulseEffect=off · rotate off
Golden-angle placement: For index i (0-based), uses idx=i+0.5, frac=idx/N, r=√(frac)*maxRadius, θ=idx*φ, φ=π(3−√5).
Responsive sizing: maxRadius derives from the smaller of width/height; in dynamic mode it scales via Width%/Height% of the container.
Pulsing: Each circle animates r and opacity with SVG <animate>, offset by its normalized frac. Direction flips phase (inside uses 1−frac).
Rotation: A requestAnimationFrame loop increments a local rotation state; applied as transform: rotate(...) on the <svg>.
Anchoring: Predefined anchors shift the cluster by ±¼ of the shorter side; X/Y Offset fine-tunes.
SVG handles hundreds of circles well; thousands plus pulsing is still reasonable on desktops.
Prefer points ≤ 1200 on laptops; reduce dotRadius for density instead of adding excessive points.
Keep duration ≥ 2s for smoother, less battery-intense motion.
Disable showFPS when shipping.
Evergreen browsers support SVG animation broadly; older iOS Safari may need testing for heavy <animate> counts.
Rotation uses CSS transforms—GPU-friendly.
No SSR output differences; geometry is computed at mount with current box size.
Decorative by default; add aria-hidden="true" if it conveys no information.
If used behind text, ensure adequate contrast and avoid excessive motion that could distract.
No network, storage, or permissions.
Only window resize listeners; they’re removed on unmount.
No dangerouslySetInnerHTML or dynamic code execution.
Decorative by default; add aria-hidden="true" if it conveys no information.
If used behind text, ensure adequate contrast and avoid excessive motion that could distract.
No network, storage, or permissions.
Only window resize listeners; they’re removed on unmount.
No dangerouslySetInnerHTML or dynamic code execution.
Original animation: Filip Zrnzević — golden-angle (Fermat) spiral of SVG circles with phased <animate> pulses for radius and opacity.
Framer/React adaptation: SecretoCho Design — responsive sizing (fixed/dynamic), anchor presets + X/Y offsets, global rotation, inside/outside pulse direction, property controls, and optional FPS overlay.
Derivative work notice: This component is an adaptation of Filip Zrnzević’s original concept. Before commercial use or redistribution, review the original work’s license/terms and ensure proper attribution consistent with those terms.
Filip Zrnzevic
Source Link
SecretoCho Design 2025
Derivative work notice: This component is an adaptation of Filip Zrnzević’s original concept. Before commercial use or redistribution, review the original work’s license/terms and ensure proper attribution consistent with those terms.
Warranty: Provided “as is” for visual/UX purposes only. Validate performance, accessibility (motion/contrast), and compatibility in your target environments.
Stay ahead of the curve with insights into emerging visualization trends and technologies.