Laser Swatch SVG

index.html

<svg width="100mm" height="100mm" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
  <style type="text/css">
    #cut {
      stroke: black;
      fill: none;
    }

    line {
      stroke: black;
    }

    text {
      font-family: sans-serif;
      fill: black;
      font-size: 8pt;
      text-anchor: middle;
    }
    
    text#banner {
      alignment-baseline: before-edge;
      font-size: 20pt;
    }
    
    text#details {
      display: none;
    }
    
    text#url {
      font-size: 14pt;
    }

    g#gradient {
      display: none;
    }
    
    g#gradient rect {
      fill: url(#gradient0);
      stroke: url(#gradient0);
    }
    
    g#vgradient rect {
      fill: url(#gradient1);
      stroke: url(#gradient1);
    }
    
    g#sgradient rect {
      fill: url(#gradient1);
      stroke: url(#gradient1);
    }
    
    g#sgradient text {
      text-anchor: middle;
      dominant-baseline: middle;
    }
    
    g#vgradient text {
      text-anchor: middle;
      dominant-baseline: middle;
    }
    
    text.legend {
      writing-mode: tb;
      dominant-baseline: middle;
      text-anchor: start;
    }
    
    text#black {
      text-anchor: start;
    }

    text#white {
      text-anchor: end;
    }
  </style>

  <defs>
    <linearGradient id="gradient0" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="rgb(0%, 0%, 0%)"/>
      <stop offset="25%" stop-color="rgb(25%, 25%, 25%)" />
      <stop offset="50%" stop-color="rgb(50%, 50%, 50%)" />
      <stop offset="75%" stop-color="rgb(75%, 75%, 75%)" />
      <stop offset="100%" stop-color="rgb(100%, 100%, 100%)" />
    </linearGradient>
    
    <linearGradient id="gradient1" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="rgb(0%, 0%, 0%)"/>
      <stop offset="25%" stop-color="rgb(25%, 25%, 25%)" />
      <stop offset="50%" stop-color="rgb(50%, 50%, 50%)" />
      <stop offset="75%" stop-color="rgb(75%, 75%, 75%)" />
      <stop offset="100%" stop-color="rgb(100%, 100%, 100%)" />
    </linearGradient>
  </defs>

  <rect id="cut" rx="3mm" width="100mm" height="100mm" />

  <text id="banner" x="50mm" y="1mm">Black LED Acrylic</text>

  <text id="details" x="50mm" y="12mm">
    Material: Acrylic | Thickness: 1/8" (3.175mm) | Vendor: TAP Plastics
  </text>
  
  <g id="vgradient">
    <rect id="front" x="3mm" y="15mm" width="5mm" height="70mm" />
    <rect id="reverse" x="3mm" y="15mm" width="5mm" height="70mm" />

    <line x1="8mm" x2="10mm" y1="15mm" y2="15mm" />
    <text class="label" x="14mm" y="15.2mm">black</text>
    <line x1="18mm" x2="20mm" y1="15mm" y2="15mm" />

    <line x1="8mm" x2="10mm" y1="32.5mm" y2="32.5mm" />
    <text class="label" x="14.2mm" y="32.5mm">25%</text>
    <line x1="18mm" x2="20mm" y1="32.5mm" y2="32.5mm" />
    
    <line x1="8mm" x2="10mm" y1="50mm" y2="50mm" />
    <text class="label" x="14.2mm" y="50.15mm">50%</text>
    <line x1="18mm" x2="20mm" y1="50mm" y2="50mm" />

    <line x1="8mm" x2="10mm" y1="67.5mm" y2="67.5mm" />
    <text class="label" x="14mm" y="67.7mm">75%</text>
    <line x1="18mm" x2="20mm" y1="67.5mm" y2="67.5mm" />

    <line x1="8mm" x2="10mm" y1="85mm" y2="85mm" />
    <text class="label" x="14mm" y="85mm">white</text>
    <line x1="18mm" x2="20mm" y1="85mm" y2="85mm" />
  </g>
  
  <g id="sgradient">
    <rect x="85mm" y="3mm" height="94mm" width="12mm" />
    
    <text class="label" x="90.5mm" y="5.5mm" style="fill: white;">black</text>
    <text class="label" x="90.5mm" y="26.5mm" style="fill: white;">25%</text>
    <text class="label" x="91mm" y="50mm" style="fill: white;">50%</text>
    <text class="label" x="90.5mm" y="73.5mm">75%</text>
    <text class="label" x="90.5mm" y="94.5mm">white</text>
  </g>

  <g id="gradient">
    <!-- white/black labels -->
    <text id="black" class="label" x="5mm"  y="69mm">black</text>
    <text id="white" class="label" x="95mm" y="69mm">white</text>
    
    <!-- gradient rectangle -->
    <rect x="5mm" y="70mm" width="90mm" height="10mm" />

    <!-- grey percentage ruler -->
    <text class="legend" x="5mm" y="85mm">0%</text>
    <line x1="5mm" x2="5mm" y1="81mm" y2="84mm" />

    <text class="legend" x="27.5mm" y="85mm">25%</text>
    <line x1="27.5mm" x2="27.5mm" y1="81mm" y2="84mm" />

    <text class="legend" x="50mm" y="85mm">50%</text>
    <line x1="50mm" x2="50mm" y1="81mm" y2="84mm" />

    <text class="legend" x="72.5mm" y="85mm">75%</text>
    <line x1="72.5mm" x2="72.5mm" y1="81mm" y2="84mm" />

    <text class="legend" x="95mm" y="85mm">100%</text>
    <line x1="95mm" x2="95mm" y1="81mm" y2="84mm" />
  </g>

  <text id="url" x="50mm" y="97mm">go/laser-swatches</text>
</svg>

laser-swatch-svg.markdown

Laser Swatch SVG

A Pen by Ben Bleything on CodePen.

License.