Rubiks' Cube

Example from:
https://css-tricks.com/use-and-reuse-everything-in-svg-even-animations/

Show All
Single Cube
Big Cube
Multiple Big Cubes
Animations

Note the transformations done to create a cube from some rects.

<svg viewBox="-130 -20 300 100">
    <g id="cube" class="cube-unit">
        <rect width="21" height="24" fill="#00affa" stroke="#0079ad" transform="skewY(30)" />
        <rect width="21" height="24" fill="#008bc7" stroke="#0079ad" transform="skewY(-30) translate(21 24.3)" />
        <rect width="21" height="21" fill="#009CDE" stroke="#0079ad" transform="scale(1.41,.81) rotate(45) translate(0 -21)" />
    </g>
</svg>

.cube-unit {
  fill-opacity: .9;
  stroke-miterlimit: 0;
}

Note that the cube in the previous example is in a defs tag. The cube is reused by the use tag.
Positions are changed per use of the cube to create a Rubik's Cube.

<svg viewBox="0 0 300 230" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <g id="cube" class="cube-unit">
            <rect width="21" height="24" fill="#00affa" stroke="#0079ad" transform="skewY(30)" />
            <rect width="21" height="24" fill="#008bc7" stroke="#0079ad" transform="skewY(-30) translate(21 24.3)" />
            <rect width="21" height="21" fill="#009CDE" stroke="#0079ad" transform="scale(1.41,.81) rotate(45) translate(0 -21)" />
        </g>
    </defs>
    <use href="#cube" x="121" y="112" />
    <use href="#cube" x="100" y="124" />
    <use href="#cube" x="142" y="124" />
    <use href="#cube" x="121" y="136" />
    <use href="#cube" x="79" y="136" />
    <use href="#cube" x="163" y="136" />
    <use href="#cube" x="142" y="148" />
    <use href="#cube" x="100" y="148" />
    <use href="#cube" x="121" y="160" />
    <use href="#cube" x="121" y="88" />
    <use href="#cube" x="100" y="100" />
    <use href="#cube" x="142" y="100" />
    <use href="#cube" x="121" y="112" />
    <use href="#cube" x="79" y="112" />
    <use href="#cube" x="163" y="112" />
    <use href="#cube" x="142" y="124" />
    <use href="#cube" x="100" y="124" />
    <use href="#cube" x="121" y="136" />
    <use href="#cube" x="121" y="64" />
    <use href="#cube" x="100" y="76" />
    <use href="#cube" x="142" y="76" />
    <use href="#cube" x="121" y="88" />
    <use href="#cube" x="79" y="88" />
    <use href="#cube" x="163" y="88" />
    <use href="#cube" x="142" y="100" />
    <use href="#cube" x="100" y="100" />
    <use href="#cube" x="121" y="112" />
</svg>

.cube-unit {
  fill-opacity: .9;
  stroke-miterlimit: 0;
}

Note that the Rubik's Cube in the previous example is now also in a defs tag. The Rubik's Cube is reused by the use tag.
The colors are manipulated using CSS variables. This can't be done with normal CSS traversion because the SVG in the use tag is in a shadow DOM.

<svg style="display:none;">
    <defs>
        <g id="single_cube" class="cube-unit">
            <rect width="21" height="24" fill="var(--lightColor)" stroke="var(--strokeColor)" transform="skewY(30)" />
            <rect width="21" height="24" fill="var(--darkColor)"  stroke="var(--strokeColor)" transform="skewY(-30) translate(21 24.3)" />
            <rect width="21" height="21" fill="var(--mainColor)"  stroke="var(--strokeColor)" transform="scale(1.41,.81) rotate(45) translate(0 -21)" />
        </g>
    </defs>
    <defs>
        <g id="big_cube">
        <use href="#single_cube" x="121" y="112" />
        <use href="#single_cube" x="100" y="124" />
        <use href="#single_cube" x="142" y="124" />
        <use href="#single_cube" x="121" y="136" />
        <use href="#single_cube" x="79" y="136" />
        <use href="#single_cube" x="163" y="136" />
        <use href="#single_cube" x="142" y="148" />
        <use href="#single_cube" x="100" y="148" />
        <use href="#single_cube" x="121" y="160" />
        <use href="#single_cube" x="121" y="88" />
        <use href="#single_cube" x="100" y="100" />
        <use href="#single_cube" x="142" y="100" />
        <use href="#single_cube" x="121" y="112" />
        <use href="#single_cube" x="79" y="112" />
        <use href="#single_cube" x="163" y="112" />
        <use href="#single_cube" x="142" y="124" />
        <use href="#single_cube" x="100" y="124" />
        <use href="#single_cube" x="121" y="136" />
        <use href="#single_cube" x="121" y="64" />
        <use href="#single_cube" x="100" y="76" />
        <use href="#single_cube" x="142" y="76" />
        <use href="#single_cube" x="121" y="88" />
        <use href="#single_cube" x="79" y="88" />
        <use href="#single_cube" x="163" y="88" />
        <use href="#single_cube" x="142" y="100" />
        <use href="#single_cube" x="100" y="100" />
        <use href="#single_cube" x="121" y="112" />
        </g>
    </defs>
</svg>

<svg class="pink-cube" viewBox="0 0 300 230" xmlns="http://www.w3.org/2000/svg">
        <use href="#big_cube" />
</svg>

<svg class="blue-cube" viewBox="0 0 300 230" xmlns="http://www.w3.org/2000/svg">
        <use href="#big_cube" />
</svg>

CSS variables are defined for the colored cubes.

.cube-unit {
  fill-opacity: .9;
  stroke-miterlimit: 0;
}

.pink-cube {
  --mainColor: #de0063;
  --strokeColor: #ad004e;
  --lightColor: #fa0070;
  --darkColor: #c7005a;
}

.blue-cube {
  --mainColor: #009cde;
  --strokeColor: #0079ad;
  --lightColor: #00affa;
  --darkColor: #008bc7;
}

<svg style="display:none;">
    <defs>
        <g id="anim_cube" class="cube-unit">
            <rect width="21" height="24" fill="var(--lightColor)" stroke="var(--strokeColor)" transform="skewY(30)" />
            <rect width="21" height="24" fill="var(--darkColor)"  stroke="var(--strokeColor)" transform="skewY(-30) translate(21 24.3)" />
            <rect width="21" height="21" fill="var(--mainColor)"  stroke="var(--strokeColor)" transform="scale(1.41,.81) rotate(45) translate(0 -21)" />
        </g>
    </defs>
</svg>

<svg class="pink-cube hover" viewBox="0 0 300 230" xmlns="http://www.w3.org/2000/svg">
    <line opacity=".5" x1="80" x2="100" y1="150" y2="150" fill="none" stroke-width="1" stroke-linecap="round" stroke="var(--lightColor)" stroke-dasharray="2.5" />
    <line opacity=".5" x1="186" x2="204" y1="90" y2="90" fill="none" stroke-width="1" stroke-linecap="round" stroke="var(--lightColor)" stroke-dasharray="2.5" />
    <line opacity=".5" x1="115" x2="115" y1="75" y2="85" fill="none" stroke-width="1" stroke-linecap="round" stroke="var(--lightColor)" stroke-dasharray="2.5" />
    <use href="#anim_cube" x="121" y="112" />
    <use href="#anim_cube" x="100" y="124" />
    <use href="#anim_cube" x="142" y="124" />
    <use href="#anim_cube" x="121" y="136" />
    <use href="#anim_cube" x="79" y="136" class="m-left" />
    <use href="#anim_cube" x="163" y="136" />
    <use href="#anim_cube" x="142" y="148" />
    <use href="#anim_cube" x="100" y="148" />
    <use href="#anim_cube" x="121" y="160" />
    <use href="#anim_cube" x="121" y="88" />
    <use href="#anim_cube" x="100" y="100" />
    <use href="#anim_cube" x="142" y="100" />
    <use href="#anim_cube" x="121" y="112" />
    <use href="#anim_cube" x="79" y="112" />
    <use href="#anim_cube" x="163" y="112" />
    <line opacity=".5" x1="165" x2="185" y1="155" y2="155" fill="none" stroke-width="1" stroke-linecap="round" stroke="var(--lightColor)" stroke-dasharray="2.5" />
    <use href="#anim_cube" x="142" y="124" class="m-right" />
    <use href="#anim_cube" x="100" y="124" />
    <use href="#anim_cube" x="121" y="136" />
    <use href="#anim_cube" x="121" y="64" />
    <use href="#anim_cube" x="100" y="76" class="m-up" />
    <use href="#anim_cube" x="142" y="76" />
    <use href="#anim_cube" x="121" y="88" />
    <use href="#anim_cube" x="79" y="88" />
    <use href="#anim_cube" x="163" y="88" class="m-right" />
    <use href="#anim_cube" x="142" y="100" />
    <use href="#anim_cube" x="100" y="100" />
    <use href="#anim_cube" x="121" y="112" />
</svg>

<svg class="blue-cube hover" viewBox="0 -40 300 200" xmlns="http://www.w3.org/2000/svg">
    <line opacity=".5" x1="96" x2="110" y1="45" y2="45" fill="none" stroke-width="1" stroke-linecap="round" stroke="var(--lightColor)" stroke-dasharray="2.5" />
    <line opacity=".5" x1="190" x2="205" y1="45" y2="45" fill="none" stroke-width="1" stroke-linecap="round" stroke="var(--lightColor)" stroke-dasharray="2.5" />
    <use href="#anim_cube" x="121" y="48" />
    <use href="#anim_cube" x="121" y="24" />
    <use href="#anim_cube" x="121" y="0" />
    <use href="#anim_cube" x="100" y="60" />
    <use href="#anim_cube" x="100" y="36" class="m-left" />
    <use href="#anim_cube" x="100" y="12" class="m-left" />
    <use href="#anim_cube" x="142" y="60" />
    <use href="#anim_cube" x="142" y="36" />
    <use href="#anim_cube" x="142" y="12" />
    <g class="m-right">
        <use href="#anim_cube" x="163" y="72" />
        <use href="#anim_cube" x="163" y="48" />
        <use href="#anim_cube" x="163" y="24" />
    </g>
    <g class="m-left">
        <use href="#anim_cube" x="79" y="72" />
        <use href="#anim_cube" x="79" y="48" />
        <use href="#anim_cube" x="79" y="24" />
    </g>
    <use href="#anim_cube" x="121" y="72" />
    <use href="#anim_cube" x="121" y="48" />
    <use href="#anim_cube" x="121" y="24" />
    <use href="#anim_cube" x="100" y="84" />
    <g class="m-left">
        <use href="#anim_cube" x="100" y="60" />
        <use href="#anim_cube" x="100" y="36" />
    </g>
    <use href="#anim_cube" x="142" y="84" />
    <use href="#anim_cube" x="142" y="60" />
    <use href="#anim_cube" x="142" y="36" />
    <use href="#anim_cube" x="121" y="96" />
    <use href="#anim_cube" x="121" y="72" />
    <use href="#anim_cube" x="121" y="48" />
</svg>

CSS variables are defined for the colored cubes.

.cube-unit {
  fill-opacity: .9;
  stroke-miterlimit: 0;
}

.pink-cube {
  --mainColor: #de0063;
  --strokeColor: #ad004e;
  --lightColor: #fa0070;
  --darkColor: #c7005a;
}

.blue-cube {
  --mainColor: #009cde;
  --strokeColor: #0079ad;
  --lightColor: #00affa;
  --darkColor: #008bc7;
}

@keyframes moveX {
  to { transform: translateX(var(--translate, 35px)); }
}
@keyframes moveY {
  to { transform: translateY(var(--translate, -35px)); }
}

.m-left, .m-right { 
  animation: 2s moveX alternate infinite paused; 
}
.m-up, .m-down { 
  animation: 2s moveY alternate infinite paused; 
}
.m-left { --translate: -50px; }
.m-right { --translate: 50px; }

svg.hover:hover * { animation-play-state: running; }

Single Cube

HTML

CSS

Big Cube

HTML

CSS

Multiple Big Cubes

HTML

CSS

Animations

HTML

CSS

Description

Single Cube

HTML

CSS

Big Cube

HTML

CSS

Multiple Big Cubes

HTML

CSS

Animations

HTML

CSS