Skip to content

Instantly share code, notes, and snippets.

@bleything bleything/index.html
Last active Jan 28, 2019

Embed
What would you like to do?
Laser Swatch SVG
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.