Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Posted by Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Making image white

How can I make this specific immage white? but with the background transparent as it is?

Can I write some CSS so it adds a layer only where is the svg black? Or how can i achieve this with sketch? I got it but i don't have time to invest 10hours to learn it and I really focus on web development, but I got an idea so i need that kind of shape, a similar one.

Or are there any websites that have these shapes?

2 Answers

Kallil Belmonte
Kallil Belmonte
35,561 Points
Kallil Belmonte
Kallil Belmonte
35,561 Points

SVG is just code, so to change the image you need to change the code (applying CSS for example). And as HTML you can do it inline or with a style tag at the top of the code.

INLINE

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="-444 1590.9 371.5 46.2" style="enable-background:new -444 1590.9 371.5 46.2;" xml:space="preserve">
<g>
    <path fill="#ffffff" d="M-403.4,1621.2c6.4-1.5,11-6.5,17.5-7.6c8.6-1.4,17.5,2.8,24,8.1c6.4,5.2,11.6,12.5,20.9,9c11.2-4.3,12.7-22.6,27.5-18.8
        c11.2,2.9,16.1,17.3,28.4,18.4c21,1.9,23.6-35.9,48.3-23.7c16.7,8.2,25.2,26.4,44.8,29.6c13.8,2.2,28.7,0.3,41.1-6.4
        c12.9-7,19.1-22.8,32.4-28.3c14.2-5.9,29.6,2.7,42.6-7.6c1.2-0.9,2.3-2,3.4-3H-444C-433.7,1606.5-420.6,1625.2-403.4,1621.2z"/>
</g>
</svg>

STYLE TAG

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="-444 1590.9 371.5 46.2" style="enable-background:new -444 1590.9 371.5 46.2;" xml:space="preserve">
  <style>
    path {fill: #ffffff;}
  </style>
  <g>
    <path d="M-403.4,1621.2c6.4-1.5,11-6.5,17.5-7.6c8.6-1.4,17.5,2.8,24,8.1c6.4,5.2,11.6,12.5,20.9,9c11.2-4.3,12.7-22.6,27.5-18.8
        c11.2,2.9,16.1,17.3,28.4,18.4c21,1.9,23.6-35.9,48.3-23.7c16.7,8.2,25.2,26.4,44.8,29.6c13.8,2.2,28.7,0.3,41.1-6.4
        c12.9-7,19.1-22.8,32.4-28.3c14.2-5.9,29.6,2.7,42.6-7.6c1.2-0.9,2.3-2,3.4-3H-444C-433.7,1606.5-420.6,1625.2-403.4,1621.2z"/>
  </g>
</svg>
Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

lol some advanced stuff :D tahnk you, i managed to do the effect somehow with something but btw, think this is good? :D

https://github.com/AurelianSpodarec/hcchristmasite/tree/gh-pages

and here is the site :D https://aurelianspodarec.github.io/hcchristmasite/

Kallil Belmonte
Kallil Belmonte
35,561 Points
Kallil Belmonte
Kallil Belmonte
35,561 Points

The website was beautiful, but these divisors images are a little blurry to me, so when I did look at it, I saw that you used .png instead of .svg, well... I really encourage you to use svg always when it is possible to deal with graphics/illustrations, because they will never get blurry, and you don't need to worry with Retina screens... ; )

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

The divisors.. well, i just had to get any :D ill try what you told me and ill see if it will work. Thanks you :)