I have this image bellow wich is an png and I want to fill with color different areas with css. The best way to do that is with svg. But I dont know how to make this different areas separated and color them. Is there some way to convert this image to svg and create this different areas and color them?

enter image description here

Here are the areas I want to color. How would I create these different paths and color them

enter image description here

  • 1
    SVG would be easier since you want to color the sections using CSS. I wouldn't convert it to SVG, I would find the original vector file if possible or just look for a different brain icon. There must be thousands of brain icons in vector file format out there. Of course, they might be slightly different, but that's just a matter of how in love are you of this specific squiggly line pattern. I did find one version of this same icon in a vector format but it looked like it was automatically traced from a raster image and didn't look so good. Check out Iconfinder.com and thenounproject.com – Joonas Jun 17 at 6:44

This could easily be done using vector image editing software such as Illustrator (not free) or Inkscape (free and Open Source), or similar editor.

Since the PNG is quite good quality, you could auto trace the PNG to get a fairly good result, and then create the coloured pieces with the Bézier/Pen tool, apply a fill colour to each, and send to the bottom of the stack.

For example, this was made in Inkscape

enter image description here

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.