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
Chris Kwong
10,266 PointsHow does treehouse create a dynamic picture based on student's stats?
While doing the front end web dev course, I noticed that the treehouse website has a circular icon that displays a different colors for different skills with a proportionate length associated to the amount of points earned for each category.
I wondered how the image can be created dynamically for each student based on their stats, so I used the google dev tools to investigate.
I am still confused how to create something like that. Can anyone explain how this can be done?
2 Answers
Jonathan Grieve
Treehouse Moderator 91,253 PointsI always wondered this myself. But I'd say what you're looking at isn't actually an image but a representation of CSS powered background colours generated by data stored in a database that fills up according to how many points a student has for a subject.
I don't know precisely how it works but I'd imagine a server programming technology is doing the magic behind the scenes.
Stephen O'Connor
22,291 PointsIt's a canvas element so there will be javascript involved, probably AJAX to get the values from the server then javascript to draw the canvas element. That's my take on it anyway ... whether it is right or not I am not 100% sure.
Chris Kwong
10,266 PointsChris Kwong
10,266 PointsHow do you create a circular border with different colors in css? Are there any courses on treehouse that teaches how to create dynamic svg's?
Jonathan Grieve
Treehouse Moderator 91,253 PointsJonathan Grieve
Treehouse Moderator 91,253 PointsI'm not sure, there's nothing really in the library about SVG but I seem to recall reading somewhere about an upcoming course on it. Watch out for the upcoming courses page in the library. :)