Hexacubos animados con CSS

Buscando unos cubos para un proyecto hace unos años, de casualidad, di con una de las obras de la serie «Hexacubos» del artista Julio Plaza. Me moló y quise recrear una de estas obras con código CSS.

No se me dio mal y en un rato había conseguido usando la propiedad background de CSS una fiel copia de uno de los cubos que componen esta serie.

Cubo en zigzag

See the Pen ZigZag Striped Cube – CSS by Josetxu (@josetxu) on CodePen.

Animado

No tardé mucho en imaginarme las líneas que crean el cubo en movimiento y probé a añadir una animación en CSS, a ver que tal quedaba. En realidad son dos animaciones, una para el cuadrado superior y otra para los laterales:

@keyframes move-top {
	100% { background-position: 30% 30%; }
}
@keyframes move-side {
	100% { background-position: -20% -20%; }
}

See the Pen ZigZag Striped Cube (Animated) – CSS by Josetxu (@josetxu) on CodePen.

Coloreado

Lo siguiente fue darle un toque de color, y como no acababa de decidirme por uno tiré de animación CSS de nuevo para ir rotando entre todos los colores:

@keyframes color {
	100% { filter: hue-rotate(360deg); }
}

See the Pen ZigZag Striped Cube (Colored & Animated) – CSS by Josetxu (@josetxu) on CodePen.

Línea coloreada

¿Y si le pusiera una sola línea de otro color?
Así, esa línea, se iría moviendo a través del cubo y el efecto podía quedar chulo… Dicho y hecho:

root {
	[...]
	--bg:	
      [...]
      conic-gradient(var(--ini) 50% 50%, var(--start) var(--end))
}

See the Pen ZigZag Striped Cube (Line Trougth Animated ) – CSS by Josetxu (@josetxu) on CodePen.

Arcoíris

Lo siguiente fue poner cada línea de un color, manteniendo la animación, y también quedó curioso el resultado:

:root {
    [...]
	--red: red;
	--orange: #ff5722;
	--yellow: #ffc107;
	--green: #b7dc39;
	--cyan: #39dcc7;
	--blue: #3992dc;
	--purple: #4739dc;
	--violet: #9c39dc;
	--pink: #dc399c;
	--brown: #b13333;
}

See the Pen ZigZag Striped Cube (Rainbow Animation) – CSS by Josetxu (@josetxu) on CodePen.

Sombreado

Para acabar, en una última prueba, añadí un sombreado interior y cambié de dirección la animación de las líneas, para que fueran hacia dentro en lugar de hacia afuera:

.cube {
	[...]
	animation: move-top calc(var(--speed) * 1s) var(--trans) 0s infinite reverse;
	box-shadow: 3vmin 3vmin 8vmin 2vmin var(--hole) inset;
}

See the Pen ZigZag Striped Cube (Inwards Rainbow Animation Shadowed) – CSS by Josetxu (@josetxu) on CodePen.

Como en muchos otros casos de una idea van saliendo otras simplemente añadiendo o cambiando propiedades en el código.