Pattern of irregular clickable shapes

po10cySA :

I need to make a pattern of many non rectangular shapes. Each shape must be interactive and reveal an image on click.
The request is to take an image of a stained glass and turn it into a webpage that is filled with the image. Each pane must be clickable, similar to those you see in churches, but on first load each shape is black and white and on click it reveals the color of the glass.

I imagine that this solution will encompass 2 parts, the color version of the entire stained glass image and a black and white version ontop of it. Then somehow each little glass pane on click needs to hide the black and white portion underneath it to reveal the color image underneath.

I have no idea what the best solution to go about this would be and haven't found anything useful to help along the way of doing something similar with shapes and so random interactive areas. I have inserted an example below of the outcome, imagine each glass portion is clickable and on click reveals the color.

The white lines just designates that each pane behaves independently of the others.

web-tiki :

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2020-07-14

Comments

0 comments

TOP Ranking

Article

Pattern of irregular clickable shapes

Pattern of irregular clickable shapes

pump.io port in URL

How to import an asset in swift using Bundle.main.path() in a react-native native module

Failed to listen on localhost:8000 (reason: Cannot assign requested address)

Double spacing in rmarkdown pdf

SQL Server : need add a dot before two last character

C++ 16 bit grayscale gradient image from 2D array

JMeter: Why get error when try to save test plan

JWT gives JsonWebTokenError "invalid token"

How to make thrown errors visible outside of a Promise?

How to tell if iOS Today Widget is being updated in the background?

Calling Doctrine clear() with an argument is deprecated

Capybara Selenium Chrome opens About Google Chrome

How to update azerothcore-wotlk docker container

Adding Ripple Effect to RecyclerView item

mysql.connector.errors.InterfaceError: 2003: Can't connect to MySQL server on '127.0.0.1:3306' (111 Connection refused)

Error while applying filter on dataframe - PySpark

Unable to add slack to bluemix project

MyPy fails dataclass argument with optional list of objects type

How can I validate and parse phone numbers to extract their country calling code and area code?

Single Sign-On in Spring by using SAML Extension and Shibboleth

python how to create many-to-many of lists inside one list