To make a pattern of irregular clickable polygons, you can use inline SVG with:
- the SVG link
<a>element - the polygon element to make the shapes
It will allow you to design any clickable shape and make them responsive.
Here is an example of what you can do with a hovered and focus state to make the shapes interactive:
svg {
display:block;
width:40%; height:auto;
margin:0 auto;
}
polygon {
fill:#ccc;
stroke:#fff; stroke-width:0.3;
transition: fill .15s;
}
a:hover .teal { fill:teal; }
a:hover .pink { fill:pink; }
a:focus .teal,
a:focus .pink { fill:orange; }<svg viewbox="0 0 20 19">
<a xlink:href="#"><polygon class="teal" points="0 0 10 5 8 10 0 5" /></a>
<a xlink:href="#"><polygon class="pink" points="0 0 10 5 15 0" /></a>
<a xlink:href="#"><polygon class="teal" points="0 5 8 10 0 15" /></a>
<a xlink:href="#"><polygon class="teal" points="15 0 10 5 20 19" /></a>
<a xlink:href="#"><polygon class="pink" points="20 19 10 5 8 10" /></a>
<a xlink:href="#"><polygon class="teal" points="20 19 8 10 0 15 8 13" /></a>
<a xlink:href="#"><polygon class="pink" points="20 19 0 19 0 15 8 13" /></a>
<a xlink:href="#"><polygon class="pink" points="15 0 20 19 20 20 20 0" /></a>
<a xlink:href="#"><polygon class="teal" points="20 17 18 16 16 17 17 20 20 20" /></a>
</svg>The polygon element only allows polygons. If you aim to make curved shapes, you will need to use the path element with curve commands.