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

CSS

Posted by Ashish Mehra
Ashish Mehra
2,411 Points

Need help with SVG background color control

Hi everyone,

Happy christmas to all first :) 

<svg width="185" height="74" viewBox="0 0 185 74" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M92.2103 1.53992V72.9998" stroke="black" stroke-width="1.71558" stroke-linecap="round"/>
<path d="M182 64.1171C163.205 64.1171 145.087 56.7966 131.48 43.6044L117.722 30.2596C110.806 23.5492 104.115 15.9998 92.5376 15.9998C82.163 15.9998 74.2692 23.5492 67.3528 30.2596L53.52 43.6044C39.9127 56.7966 21.7946 64.1171 3.00002 64.1171" stroke="black" stroke-width="6" stroke-miterlimit="10" stroke-linecap="round"/>
</svg>

The above svg is a bell curve. I want to fill left side of the intersection line with gray color and the other left will be white.

Suppose if line is on 20% of svg width So that 20% area of SVG will be gray and rest will be white. I tried to do with linear gradient but it creates gradient and I want solid color on both sides.

Thanks,

Reggie Williams
Reggie Williams
Treehouse Teacher
Reggie Williams
Reggie Williams
Treehouse Teacher

Hey Ashish Mehra I hope you had a great Christmas. There isn't a way to make the path two separate colors but you could use two separate paths.

1 Answer

Ashish Mehra
Ashish Mehra
2,411 Points
Ashish Mehra
Ashish Mehra
2,411 Points

Hi Reggie Williams ,

Thanks for the response.

The range of intersection line is dynamic which is coming from backend. I got the solution with Linear Gradient filling by setting the stop and offsets.

Happy New Year and Thanks again.