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

HTML

Posted by Clayton Tevebaugh
Clayton Tevebaugh
7,617 Points

Canvas? SVG? Not sure where to start on a pick your own colors for this image project.

My wife has gotten really into this whole Christmas thing and she is making ornaments for trees out of felt. One of these ornaments is this turtle dove. I think it would be fun to make her a web based color picker to help her design what her next one will look like. This would also be helpful if she wanted to make one for someone, but wanted them to get to choose the colors they wanted. I have a wireframe of the simple project here and this is how I was thinking I would build it.

The Wireframe is here.

Each of the Main Body, Wings, and Inner Wing boxes are divs filled with smaller divs (or maybe I should use buttons?) of hexadecimal colors. When clicked these buttons will change their part of the bird to that color. Pretty strait forward.

As far as how to do this I was thinking of building each part of the bird that I want to change color on as its own separate SVG then changing the fill color using JavaScript. Getting three SVGs (four five or six SVGs if I also make the thread color changeable) to line up perfectly on top of each other seems like a nightmare though. Is there a better way? Could the canvas help? Are there tutorials out there that do similar things as this?

1 Answer

Luke Pettway
Luke Pettway
16,593 Points

I've done similar things using an SVG. The only difficulty I see is when you start to color the threads, although as long as you aren't attempting to color each one differently you could simply give them all the same class. You could set it up so that when you click on one of the colorable (is that a word?) elements, javascript takes the class and sets it to a currentPath variable, and when you click a color, that class' fill is set to the color.

The body shape itself is going to be the hardest out of all the shapes to draw but you can probably just live trace that part of it.

Clayton Tevebaugh
Clayton Tevebaugh
7,617 Points

Thanks for the help. So having just one SVG will do the trick I just have to figure out where all my different parts to it are in the SVG document, group those by giving them classes, then modify those classes using javascript to change the fill color. Thanks Luke. Wish me luck.

Luke Pettway
Luke Pettway
16,593 Points

Clayton Tevebaugh before you go, one thing I found that helped me out was that you can actually inspect an SVG, even though you can't do it the typical way, if you expand all the nodes inside of the element inspector console you can find them. What helped me on the project I was working on is that I set each path I wanted to color to a primary color, followed by secondary colors. That way I can open the document in Sublime text and use the color highlighter plugin to show me which path was which, then I simply added a class to each one. Good luck!