Skip to content

Instantly share code, notes, and snippets.

@cwgw

cwgw/pen-tile.svg

Last active September 6, 2019 20:06
Show Gist options
  • Save cwgw/85e512b34f4f8cd426868ce6b39e7ed9 to your computer and use it in GitHub Desktop.
Save cwgw/85e512b34f4f8cd426868ce6b39e7ed9 to your computer and use it in GitHub Desktop.
Download ZIP
Display the source blob
Display the rendered blob
Raw
pen-tile.svg
<?xml version="1.0" encoding="UTF-8" ?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="900" preserveAspectRatio="none" >
<defs>
<style>
.handle--point { fill: #000; stroke: #000; stroke-width: 4px; }
.point { fill: #fff; stroke: #000; stroke-width: 4px; }
.handle--line,
.path--line,
.nib { fill: none; stroke: #000; stroke-width: 4px; stroke-miterlimit: 6; }
</style>
<symbol id="nib" y="-35" width="140" height="70" viewBox="0 -35 140 70" >
<rect class="nib" x="18" y="-18" width="16" height="36"/>
<path class="nib" d="M70,8a8,8,0,0,1-8-8,8,8,0,0,1,8-8,8.1,8.1,0,0,1,7.5,5H130L70-30,40-18V18L70,30,130,3H77.5A8.1,8.1,0,0,1,70,8Z"/>
</symbol>
<symbol id="point" x="-10" y="-10" width="20" height="20" viewBox="-10 -10 20 20" >
<rect class="point" x="-8" y="-8" width="16" height="16" />
</symbol>
<symbol id="handle" y="-10" width="80" height="20" viewBox="0 -10 80 20">
<line class="handle--line" x2="70" />
<circle class="handle--point" cx="70" cy="0" r="8" />
</symbol>
<symbol id="path-a" y="-10" width="600" height="245" viewBox="0 -10 600 245">
<path class="path path--line" d="M 170 0 c 44 0, 110 46, 110 110 v 115 h 338" />
<use xlink:href="#handle" href="#handle" x="280" y="110" width="80" height="20" transform="rotate(-90 280 110)" />
<use xlink:href="#point" href="#point" x="280" y="110" width="20" height="20" />
<use xlink:href="#point" href="#point" x="280" y="225" width="20" height="20" />
</symbol>
<symbol id="path-b" y="-10" width="600" height="640" viewBox="0 -10 600 640">
<path class="path path--line" d="M 170 0 c 44 0, 110 46, 110 110 v 430 c 0 60, -62 96, -113 68" />
<use xlink:href="#handle" href="#handle" x="280" y="110" width="80" height="20" transform="rotate(-90 280 110)" />
<use xlink:href="#point" href="#point" x="280" y="110" width="20" height="20" transform="rotate(-60 280 110)" />
<use xlink:href="#handle" href="#handle" x="280" y="540" width="80" height="20" transform="rotate(90 280 540)" />
<use xlink:href="#point" href="#point" x="280" y="540" width="20" height="20" transform="rotate(-60 280 540)" />
</symbol>
<symbol id="path-c" y="-10" width="600" height="620" viewBox="0 -10 600 620">
<path class="path path--line" d="M 170 0 c 44 0, 110 46, 110 110 v 84 c 0 56, 27 106, 78 136 l 136 77" />
<use xlink:href="#handle" href="#handle" x="280" y="110" width="80" height="20" transform="rotate(-90 280 110)" />
<use xlink:href="#point" href="#point" x="280" y="110" width="20" height="20" transform="rotate(60 280 110)" />
<use xlink:href="#handle" href="#handle" x="280" y="194" width="80" height="20" transform="rotate(90 280 194)" />
<use xlink:href="#point" href="#point" x="280" y="194" width="20" height="20" transform="rotate(60 280 194)" />
<use xlink:href="#handle" href="#handle" x="358" y="330" width="80" height="20" transform="rotate(-150 358 330)" />
<use xlink:href="#point" href="#point" x="358" y="330" width="20" height="20" transform="rotate(60 358 330)" />
</symbol>
<symbol id="tile" x="-600" y="-600" width="1200" height="1200" viewBox="-600 -600 1200 1200">
<g>
<use xlink:href="#nib" href="#nib" width="140" height="70" />
<use xlink:href="#path-a" href="#path-a" width="600" height="245" />
<use xlink:href="#path-a" href="#path-a" width="600" height="245" transform="scale(1, -1)" />
<use xlink:href="#handle" href="#handle" width="80" height="20" x="170" />
<use xlink:href="#point" href="#point" x="170" width="20" height="20" />
</g>
<g transform="rotate(-60)">
<use xlink:href="#nib" href="#nib" width="140" height="70" />
<use xlink:href="#path-b" href="#path-b" width="600" height="640" transform="scale(1, -1)" />
<use xlink:href="#path-c" href="#path-c" width="600" height="620" />
<use xlink:href="#handle" href="#handle" width="80" height="20" x="170" />
<use xlink:href="#point" href="#point" x="170" width="20" height="20" transform="rotate(60 170 0)" />
</g>
<g transform="rotate(60)">
<use xlink:href="#nib" href="#nib" width="140" height="70" />
<use xlink:href="#path-b" href="#path-b" width="600" height="640" />
<use xlink:href="#path-c" href="#path-c" width="600" height="620" transform="scale(1, -1)" />
<use xlink:href="#handle" href="#handle" width="80" height="20" x="170" />
<use xlink:href="#point" href="#point" x="170" width="20" height="20" transform="rotate(-60 170 0)" />
</g>
<g transform="rotate(180)">
<use xlink:href="#nib" href="#nib" width="140" height="70" />
<use xlink:href="#path-a" href="#path-a" width="600" height="245" />
<use xlink:href="#path-a" href="#path-a" width="600" height="245" transform="scale(1, -1)" />
<use xlink:href="#handle" href="#handle" width="80" height="20" x="170" />
<use xlink:href="#point" href="#point" x="170" width="20" height="20" />
</g>
<g transform="rotate(-120)">
<use xlink:href="#nib" href="#nib" width="140" height="70" />
<use xlink:href="#path-c" href="#path-c" width="600" height="620" transform="scale(1, -1)" />
<use xlink:href="#path-b" href="#path-b" width="600" height="640" />
<use xlink:href="#handle" href="#handle" width="80" height="20" x="170" />
<use xlink:href="#point" href="#point" x="170" width="20" height="20" transform="rotate(-60 170 0)" />
</g>
<g transform="rotate(120)">
<use xlink:href="#nib" href="#nib" width="140" height="70" />
<use xlink:href="#path-c" href="#path-c" width="600" height="620" />
<use xlink:href="#path-b" href="#path-b" width="600" height="640" transform="scale(1, -1)" />
<use xlink:href="#handle" href="#handle" width="80" height="20" x="170" />
<use xlink:href="#point" href="#point" x="170" width="20" height="20" transform="rotate(60 170 0)" />
</g>
</symbol>
<pattern id="pen-pattern" width="800" height="300" viewBox="0 0 2400 900" patternUnits="userSpaceOnUse" >
<use xlink:href="#tile" href="#tile" width="1200" height="1200" />
<use xlink:href="#tile" href="#tile" width="1200" height="1200" transform="translate(0, 900)" />
<use xlink:href="#tile" href="#tile" width="1200" height="1200" transform="translate(1200, -450)" />
<use xlink:href="#tile" href="#tile" width="1200" height="1200" transform="translate(1200, 450)" />
<use xlink:href="#tile" href="#tile" width="1200" height="1200" transform="translate(1200, 1350)" />
<use xlink:href="#tile" href="#tile" width="1200" height="1200" transform="translate(2400)" />
<use xlink:href="#tile" href="#tile" width="1200" height="1200" transform="translate(2400, 900)" />
</pattern>
<pattern id="v-tile-a" width="1200" height="900" viewBox="0 0 1200 900" patternUnits="userSpaceOnUse" >
<use xlink:href="#tile" href="#tile" width="1200" height="1200" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#pen-pattern)" />
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment