Animated SVG Penrose Triangle Loader

This is an Animated SVG Penrose Triangle Loader. It combines the impossible geometry of the Penrose triangle with a continuous circular spinner to create a hypnotic, high-fidelity loading animation. Its function is to provide a visually stunning and technically impressive waiting state for applications, using SVG filters and GSAP to add depth and motion.

Specs

• Weight: ~35 KB (GSAP dependency). The SVG itself is inline.
• Performance: High. All animations are handled by GSAP targeting the transform and opacity properties, ensuring smooth, GPU-accelerated rendering.
• Theming / Customization: The color scheme is defined by a series of linearGradient elements within the SVG’s <defs> block.
• Responsiveness: Fluid. Uses preserveAspectRatio="xMinYMin meet" and max-width: 100% to ensure the SVG scales correctly within its container.
• Graceful Degradation: Fails to a static SVG graphic if JavaScript is disabled. The core visual is still present, just not animated.

Anatomy

The component is a self-contained SVG with embedded styles and filter effects, controlled by a minimal JavaScript layer.

• HTML (The Skeleton): A single inline <svg> element. The geometry is defined by <path> elements, and colors are handled by <linearGradient> definitions.
• CSS (The Skin): Minimal styles to center the SVG and set the background color.
• JS (The Nervous System): A few lines of GSAP. One gsap.to() call creates an infinitely repeating rotation for the .circle-spinner group, and another creates a subtle pulsing opacity on the .penrose-bg path to simulate a glow.

Logic

The standout technical feature is the SVG Filter Glow Effect.

<filter id="penrose-glow">
  <feGaussianBlur stdDeviation="20" />
  <feComponentTransfer>
    <feFuncA type="linear" slope="1.5" />
  </feComponentTransfer>
  <feBlend in2="SourceGraphic" />
</filter>

<path class="penrose-bg" filter="url(#penrose-glow)" ... />

Instead of using a simple box-shadow or drop-shadow, the developer uses a more powerful SVG <filter>. feGaussianBlur creates a soft, blurred version of the shape. Then, feComponentTransfer with feFuncA intensifies the alpha channel of this blurred shape, making it brighter and more solid. Finally, feBlend composites this intensified blur behind the original source graphic. This creates a much softer and more realistic “bloom” or “glow” than standard CSS shadows allow.

Feel

Hypnotic and technical. The endless rotation of the inner spinner provides a clear sense of progress or an active state, while the impossible geometry of the Penrose triangle adds an element of visual intrigue. The subtle pulsing glow of the background gives the entire component an energetic, almost alive quality. It feels less like a simple loading icon and more like a piece of complex machinery at work.