Creating an SVG Image Map with Figma and a Touch of Javascript

Uncovering the meanings behind The Prettiest Curse

Image for post
Image for post
Image for post
Image for post
A pen tool tracing in Figma
<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1722 656C1714.33 647.667 1692.7 636 1667.5 656C1642.3 676 1655.33 705 1665 717L1712 780C1718.5 788.5 1733.5 798 1752.5 780L1815.5 717C1826.67 705.667 1841.5 677.6 1811.5 656C1804.67 651 1780 644.5 1765.5 656C1751 667.5 1739.5 677 1722 656Z"/>
...
</svg>
<div id="artwork">
<svg>
...
</svg>
</div>
<style>
#artwork{
background: url(artwork.jpg);
background-size: cover;
}
#artwork:after{
content: '';
display: block;
padding-bottom: 100%;
}
#artwork svg{
height: 100%;
width: 100%;
}
</style>
#artwork svg path{
cursor: pointer;
fill: rgba(255, 255, 255, 1);
}
let paths = Array.from(document.getElementsByTagName('path'))paths.forEach(path => {
path.addEventListener('click', (e) => {
// do something with e.target
})
})

Written by

I develop websites for rock 'n' roll bands and get paid in sex and drugs. Previously Silva Artist Management, SoundCloud, and Songkick. Currently: Available

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store