Rainbow zig-zag

HTML
<div class="playground"></div>
SCSS
$colors: ( (#ee5568, #d63c5d), (#ee245a, #de1d39), (#f3744b, #f15e2e), (#fec34e, #f7a01f), (#c1b631, #a2a337), (#00ab95, #118d79), (#41c0bf, #00b1b4), (#4e85a0, #496982), (#9a2989, #81236a), (#c13b8d, #a72060), (#ee5568, #d63c5d), ); $fill: #fbe7b9; $gradient-size: 60px; // or (window height / number of colors) dependent .playground { width: 100%; height: (length($colors)-1)*$gradient-size; margin: auto; $gradient: (); @for $i from 1 through length($colors)-1 { $item: nth($colors, $i); $lighter: nth($item, 1); $darker: nth($item, 2); $gradient: append($gradient, linear-gradient(135deg, $darker 24.9%, transparent 25.1%) -.5*$gradient-size #{($i - 1)*$gradient-size}, comma); $gradient: append($gradient, linear-gradient(225deg, $lighter 24.9%, transparent 25.1%) -.5*$gradient-size #{($i - 1)*$gradient-size}, comma); $item: nth($colors, $i + 1); $lighter: nth($item, 1); $darker: nth($item, 2); $gradient: append($gradient, linear-gradient(315deg, $darker 24.9%, transparent 25.1%) 0 #{($i - 1)*$gradient-size}, comma); $gradient: append($gradient, linear-gradient(45deg, $lighter 24.9%, transparent 25.1%) 0 #{($i - 1)*$gradient-size}, comma); } background: $gradient; background-color: $fill; background-repeat: repeat-x; background-size: $gradient-size $gradient-size; } html, body { display: flex; height: 100%; width: 100%; }
JAVASCRIPT
Expand for more options Login