CodePen Embed - style svg use

<svg style="display: none;">
<symbol id="codrops" viewBox="0 0">
  <rect width="40" height='40' fill="var(--first-color)" />
    <rect x="20" y='20' width="50" height="50" fill="var(--second-color)" /> 
  <rect x="60" y='60' width="20" height="20" fill="var(--third-color)" /> 
    
</symbol>
</svg>
<svg height="100px" width="100px">
  <use xlink:href="#codrops" class="codrops-1"/>
</svg>
<svg height="100px" width="100px">
  <use xlink:href="#codrops" class="codrops-2"/>
</svg>
<svg height="100px" width="100px">
  <use xlink:href="#codrops" class="codrops-3"/>
</svg>

.codrops-1 {
  --first-color: #FFDD9E;
  --second-color: #E89D84;
  --third-color: #FF61C8;
}
.codrops-2 {
  --first-color: #93C5FF;
  --second-color: #7BE883;
  --third-color: #FFE487;
}
.codrops-3 {
  --first-color: #FF3C57;
  --second-color: #E8A52C;
  --third-color: #482CE8;
}

This Pen is owned by deathhell on CodePen.

See more by @deathhell on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.