Icons Carousel Slide Show

SVG and JavaScript


ubuntu icon atom chrome icon

Objective: Draw a series of icons in SVG and create a slide show from them.

Problem: How can we simplify the drawing of icons that have 120-degree symmetry? How can we efficiently animate the icons?

Solution: We can draw only 1/3 of each icon, then use duplication and rotate transforms to create the other features. We can put all the icons into one file with a viewbox that displays only enough to see one icon at a time, while using translate transforms to move the whole scene through the viewbox.