Make custom shapes from images with people

Let’s say you are in a search for human shapes doing some activities like dancing, hugging, jogging and so on, but you can’t find one on the internet. There is the other situation where you want the shape on mouseover to turn into a real image or an image on mouseover to turn into a shape.

To be able to do the before mentioned effect we need to use CSS filters and play a little bit with the available values. Let’s go through some colours for the shapes.

We will use this image for our shape creation. It is an image with transparent background and a green background added separatelly on the html:

Grey shape

The invert() filter will invert every colour in the image to it’s opposite colour in the colour wheel, but if you set it to 50%, then you will just reset the colours to the same colour, more specifically grey. If you take a look what is in the center of a colour wheel you can observe that it is grey.

https://www.canva.com/colors/color-wheel/

img {
   filter: invert(.5)
}

Black shape

If you want to make a black shape from an image, just “turn off the lights” on the image pixels with brightness:

img {
   filter: brightness(0);
}

White shape

It would be logical to just set a high brightness level to get a white shape but that does not work properly. So we will do a little workaround, by setting the image again to black and then invert the black to it’s opposite(white).

img {
   filter: brightness(0) invert(1);
}

Orange shape

In this case we will start by making all colours grey in the image and then adding a sepia tint on the grey. Now we have a really light sepia colour but if we saturate it a little bit we can have more emphasized colours.

img {
   filter: invert(.5) sepia(1) saturate(5);
}

Red shape

To get a red shape we just need to make the sepia color even more saturated:

img {
    filter: invert(.5) sepia(1) saturate(100);
}

Other coloured shape

Now that we have the red colour for the shape which is the top colour in the colour wheel, we can just rotate this wheel till we get a different colour. If we want the new colour more darker we add more saturation on it, if lighter then less saturation.

img {
    filter: invert(.5) sepia(1) saturate(100) hue-rotate(90deg);
}

So after resetting all colours to grey and adding sepia to every pixel and making it more saturated(filled with colour) we can rotate the colour wheel on that colour to get a different one(Green in this case).

Shape with specific hex colour

To get a specific colour we use a more complex combination of css filters. Let’s say we want to have a yellow colour shape(#ffe700 hex value):

img {
   filter: invert(92%) 
           sepia(69%) 
           saturate(2626%) 
           hue-rotate(344deg) 
           brightness(95%) 
           contrast(112%);
}

Of course it would be hard to do it manually so we can just use some online converter:

https://isotropic.co/tool/hex-color-to-css-filter/

If you want to see these filters in action, check out my video on my Youtube channel:

0