SVG circles

I realized that I haven’t done anything with SVG, probably because I never needed to. The syntax has always looked a bit wordy to me, especially when CSS can very often accomplish something similar. I have read many success stories of using SVG ranging from animating objects for games to making scalable content that doesn’t need media queries. People have also demonstrated how easy it is to manipulate SVG elements through developer tools by applying transformations to them, similarly to how we do it with regular HTML elements. The Clown car technique also uses SVG. Since the browser support for this technology has improved, we may no longer need to avoid it fully, unless we want everything to work in older browsers too.

I decided to create some colorful circles in SVG since the circle element seemed "clean" to me. I noticed that most attributes were already available in CSS and that I could also use the style attribute whenever I need it (although this doesn’t seem to be the right way to use SVG). In this simple demo, we can choose 5 circles from 35 to test our luck. There are much more meaningful uses of SVG, so we’ll keep experimenting.