Lacquer

index.html

body
  .lacquer.centered
    svg(width="600", height="400", viewPort="0 0 400 400", xmlns="http://www.w3.org/2000/svg")
      defs
        linearGradient(id="golden")
          stop(offset="0%", stop-color="#ffb400" stop-opacity=".5")
          stop(offset="100%", stop-color="gold" stop-opacity="0")
        linearGradient(id="golden2")
          stop(offset="0%", stop-color="#ffb400" stop-opacity=".5")
          stop(offset="100%", stop-color="#ffb400" stop-opacity="0")
      

Lacquer.markdown

Lacquer

A Pen by Luke Winikates on CodePen.

License.

script.js

var s = Snap(document.querySelector("svg"));

var starts = [];

for(var x  = 0; x < 40; x++) {
  for(var y  = 0; y < 40; y++) {
    starts.push({x: -100 + ((x +y) * 25) + (x * 50), y: -100 +((x +y) * 25) +  (y * 50)});
  }
}

var zerp = function(x, y){
var deg = 10;

var rects = [];

for(var i = 0; i < 12; i++) {
  rects.push(
    s.rect(x, y, 80, 2)
      .attr({fill: (i % 2) == 0 ? "url(#golden)" : "url(#golden2)"})
      .transform(`rotate(${(i-2) * 10} ${x} ${y})`)
  )
}
 
};

starts.map(start => {
  zerp(start.x, start.y);
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>

style.css

.centered {
  width: 600px;
  min-height: 400px;
  margin: auto;
}

.lacquer {
  border-radius: 4px;
  background-color: lighten(black, 5%);
}