<svg width="100%" height="100%">
<!-- Define the pattern -->
<pattern id="pattern-cubes" x="0" y="126" patternUnits="userSpaceOnUse" width="126" height="200" viewBox="0 0 10 16">
<!-- Cube code courtest of SVGeneration: http://www.svgeneration.com/recipes/3D-Cubes/ -->
<g id="cube">
<!-- We'll apply the `fill` in the CSS for flexibility -->
<path class="left-shade" d="M0 0l5 3v5l-5 -3z" />
<path class="right-shade" d="M10 0l-5 3v5l5 -3" />
</g>
<!-- Apply the cube shapes -->
<use x="5" y="8" xlink:href="#cube" />
<use x="-5" y="8" xlink:href="#cube" />
</pattern>
<!-- The canvas for our pattern -->
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-cubes)" />
</svg>
$fill: orange;
body, html {
height: 100%;
}
.left-shade {
fill: $fill;
}
.right-shade {
fill: lighten($fill, 30%);
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.