Skip to content

Instantly share code, notes, and snippets.

@djberg96
Created October 5, 2023 11:01
Show Gist options
  • Save djberg96/acf94e1ad04a60e73e41bc2327c63566 to your computer and use it in GitHub Desktop.
Save djberg96/acf94e1ad04a60e73e41bc2327c63566 to your computer and use it in GitHub Desktop.
Display the source blob
Display the rendered blob
Raw
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="225">
<rect width="100%" height="100%" fill="white"/>
<!-- The filterUnits seems to confuse Inkscape -->
<filter id="ridge" filterUnits="userSpaceOnUse">
<feTurbulence
type="fractalNoise"
baseFrequency="0.65"
numOctaves="7"
result="noise"
/>
<feDisplacementMap
in2="noise"
in="SourceGraphic"
scale="25"
xChannelSelector="R"
yChannelSelector="G"
/>
</filter>
<defs>
<polygon
id="hexagon"
fill="#BBC77E"
points="50.24,0.25 100.23,29.112 100.23,86.835 50.24,115.697 0.25,86.835 0.25,29.112 50.24,0.25"
stroke="black"
/>
<polyline
id="line"
points="0.25,29.112 50.24,0.25 100.23,29.112"
fill="none"
stroke="black"
stroke-width="25"
stroke-linecap="square"
stroke-opacity="0.5"
stroke-linejoin="arcs"
filter="url(#ridge)"
/>
<clipPath id="hex">
<use xlink:href="#hexagon"/>
</clipPath>
</defs>
<g id="hexes">
<g transform="translate(25,50)">
<use xlink:href="#hexagon"/>
<use xlink:href="#line" clip-path="url(#hex)"/>
</g>
<g transform="translate(125,50)">
<use xlink:href="#hexagon"/>
<use xlink:href="#line" clip-path="url(#hex)"/>
</g>
</g>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment