CodePen Embed - 3. Duplicating big cube with SVG <use> and CSS variables

<svg class="pink-cube" viewBox="0 0 300 230" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <g id="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>
  <use xlink:href="#cube" x="121" y="112"/>
  <use xlink:href="#cube" x="100" y="124"/>
  <use xlink:href="#cube" x="142" y="124"/>
  <use xlink:href="#cube" x="121" y="136"/>
  <use xlink:href="#cube" x="79" y="136"/>
  <use xlink:href="#cube" x="163" y="136"/>
  <use xlink:href="#cube" x="142" y="148"/>
  <use xlink:href="#cube" x="100" y="148"/>
  <use xlink:href="#cube" x="121" y="160"/>
  <use xlink:href="#cube" x="121" y="88"/>
  <use xlink:href="#cube" x="100" y="100"/>
  <use xlink:href="#cube" x="142" y="100"/>
  <use xlink:href="#cube" x="121" y="112"/>
  <use xlink:href="#cube" x="79" y="112"/>
  <use xlink:href="#cube" x="163" y="112"/>
  <use xlink:href="#cube" x="142" y="124"/>
  <use xlink:href="#cube" x="100" y="124"/>
  <use xlink:href="#cube" x="121" y="136"/>
  <use xlink:href="#cube" x="121" y="64"/>
  <use xlink:href="#cube" x="100" y="76"/>
  <use xlink:href="#cube" x="142" y="76"/>
  <use xlink:href="#cube" x="121" y="88"/>
  <use xlink:href="#cube" x="79" y="88"/>
  <use xlink:href="#cube" x="163" y="88"/>
  <use xlink:href="#cube" x="142" y="100"/>
  <use xlink:href="#cube" x="100" y="100"/>
  <use xlink:href="#cube" x="121" y="112"/>
</svg>

<svg class="blue-cube" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 -40 300 200">
  <use xlink:href="#cube" x="121" y="48"/>
  <use xlink:href="#cube" x="121" y="24"/>
  <use xlink:href="#cube" x="121" y="0"/>
  <use xlink:href="#cube" x="100" y="60"/>
  <use xlink:href="#cube" x="100" y="36"/>
  <use xlink:href="#cube" x="100" y="12"/>
  <use xlink:href="#cube" x="142" y="60"/>
  <use xlink:href="#cube" x="142" y="36"/>
  <use xlink:href="#cube" x="142" y="12"/>
  <use xlink:href="#cube" x="163" y="72"/>
  <use xlink:href="#cube" x="163" y="48"/>
  <use xlink:href="#cube" x="163" y="24"/>
  <use xlink:href="#cube" x="79" y="72"/>
  <use xlink:href="#cube" x="79" y="48"/>
  <use xlink:href="#cube" x="79" y="24"/>
  <use xlink:href="#cube" x="121" y="72"/>
  <use xlink:href="#cube" x="121" y="48"/>
  <use xlink:href="#cube" x="121" y="24"/>
  <use xlink:href="#cube" x="100" y="84"/>
  <use xlink:href="#cube" x="100" y="60"/>
  <use xlink:href="#cube" x="100" y="36"/>
  <use xlink:href="#cube" x="142" y="84"/>
  <use xlink:href="#cube" x="142" y="60"/>
  <use xlink:href="#cube" x="142" y="36"/>
  <use xlink:href="#cube" x="121" y="96"/>
  <use xlink:href="#cube" x="121" y="72"/>
  <use xlink:href="#cube" x="121" y="48"/>
</svg>

body {
  margin: 0 auto;
  max-width: 500px;
}
.cube-unit {
  fill-opacity: .9;
  stroke-miterlimit:0;
}

.blue-cube {
  --mainColor: #009CDE;
  --strokeColor: #0079ad;
  --lightColor: #00affa;
  --darkColor: #008bc7;
}
.pink-cube {
  --mainColor: #de0063;
  --strokeColor: #ad004e;
  --lightColor: #fa0070;
  --darkColor: #c7005a;
}

This Pen is owned by Mariana Beldi on CodePen.

See more by @marianab on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.