Generative Glitch Cube Art

This is Generative Glitch Cube Art. It is a piece of procedural digital art created entirely with CSS. Its function is to demonstrate how complex, three-dimensional geometry and dynamic lighting effects can be simulated without JavaScript or SVG, relying solely on multi-layered conic-gradient backgrounds and CSS custom property animation.

Specs

• Weight: < 2 KB. Zero dependencies.
• Performance: High. The blinking is handled by CSS keyframes animating a single custom property (--p), which is then read by the GPU to render the gradients.
• Theming / Customization: Colors (--c1, --c2) and animation timing are controlled via CSS variables and @keyframes. The geometric shading is hardcoded into the gradient definitions.
• Responsiveness: Fluid. Uses vw units to ensure the grid scales with the viewport.
• Graceful Degradation: The 3D shading will render statically in browsers without @property support, but the blinking animation will be lost.

Anatomy

The component uses a grid of mirrored pseudo-3D blocks to build the illusion.

• HTML (The Skeleton): A flat grid structure. A main .xyz container holds three groups (.x, .y, .z), each containing a .left and .right div to form the six primary panels.
• CSS (The Skin): The core of the piece. Each panel’s background is a stack of multiple conic-gradient declarations. Some gradients create the shaded, angular look of a cube face, while others are used for the colored “blinking” sections.
• JS (The Nervous System): Completely absent.

Logic

The core mechanism is “Color Blending via Custom Property Animation”.

@property --p {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: true;
}

@keyframes blink {
  from, to { --p: 0%; }
  1%, 4%, 20% { --p: 90%; }
  /* ... */
}

.left {
  animation: blink 10s linear infinite;
  background: conic-gradient(
    color-mix(in srgb, #f672ca, transparent var(--p)), 
    /* ... */
  );
}

By defining --p with @property, the browser knows how to smoothly interpolate it from one percentage to another. The @keyframes blink animation rapidly fluctuates the value of --p. Inside the background declaration, color-mix() blends the base color (e.g., #f672ca) with transparent based on the current value of --p. When --p is 90%, the color is almost fully transparent; when it’s 0%, it’s fully opaque. This animates the color itself, creating the flashing/glitching light effect.

Feel

Geometric, electric, and atmospheric. The animation is not smooth but intentionally jittery and unpredictable, mimicking a faulty neon sign or a futuristic sci-fi interface. The conic gradients create a surprisingly effective illusion of 3D depth and lighting without any actual 3D transforms. The subtle noise overlay (mix-blend-mode: overlay) adds a final layer of texture, completing the industrial, cyberpunk aesthetic.