Joaquim Santos Joaquim Santos - 6 months ago 44
Javascript Question

How to draw a responsive shape

Back story/context:
I'm doing a child activity in which the child will hear a sound and decide on what colour to use to paint a section of a catterpillar body.
This has to be responsive. I'm using just HTML, CSS and Javascript. Bootstrap is taking care of my responsive side, and I'm using measures in %'s or vmin/vmax...
I need to be able to address each section of the body separately, so I can colour it according to choices made by the user!

So far:
I tried using a div with 20 divs inside, each for a section with an image for each section and I tried drawing them with CSS; I also tried the first approach with just one div and everything inside...

The Problem:
All the solutions so far fail when I resize my window. I tried position as absolute, as relative, ...

So: I need to position up to 20 circles, CSS or SVG (preferably), that can be addressed each on its own by an user interaction (click on it to change colour), and that maintain their shape when you resize the window.

Below I'm putting an image of the catterpillar I would like to recreate in html:

Catterpilar

Any hints, directions or how-to's will help. Or if you have any other view on how to solve this...

Cheers!

Answer

There can be several approaches to make your catterpillar responsive. You could use svg, multiple elements/pseudo elements, box-shadows...

Here is an example using multiple box shadows and the appraoch described here : Overlapping circles in CSS with 1 div using the second example with viewport related units :

DEMO

div{
  width:20vmin; height:20vmin;
  border-radius:50%;
  background:gold;
  margin:0 auto;
  box-shadow: -10vmin   1vmin  0  .2vmin teal,
              -18vmin  .5vmin  0   1vmin pink,
              -25vmin  .8vmin  0  .5vmin tomato,
              -37vmin   1vmin  0  .2vmin green,
              -50vmin   1vmin  0  .5vmin teal,
              -63vmin   1vmin  0  .2vmin aqua;
}
<div></div>

And here is an example using an svg with the circle element :

svg{
  display:block;
  width:100%;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20">
    <circle cx="35" cy="10" r="4" fill="green" stroke="black" stroke-width="0.5" />
    <circle cx="40" cy="9" r="5.1" fill="teal" stroke="black" stroke-width="0.5" />
    <circle cx="46" cy="11" r="5" fill="pink" stroke="black" stroke-width="0.5" />
    <circle cx="50" cy="10" r="4" fill="tomato" stroke="black" stroke-width="0.5" />    
</svg>

Comments