Playing with Scalable Vector Graphics and CSS3
I haven’t been posted often enough this year! Let’s get out of that bad habbit by starting with some of the things I have been working on. Currently I am thinking of making some further tweaks to my web site, as I am still not really happy with it yet ( I won’t go into full detail though ). Anyway, as an excuse to improve my knowledge around CSS3, I thought I would try my hand at converting my logo into pure CSS.
- Attempt 1 was the way I originally knew (which took the longest funnily enough), with multiple HTML elements and styling upon each of those.
- Attempt 2 was with a single HTML element, and a LOT of CSS stylings upon it, making use of multiple gradients, and other tweaks to trick the browser into giving me what I wanted.
- Attempt 3 was with SVG, which was the easiest to do and by far looks the best, on top of which has the benefit of being very easy to scale for bigger/smaller display sizes.
I also got my hands on an Espruino recently, so will be publishing up a lot of code for connecting this board to a number of useful modules I own and may use for much more exciting kits in the near future!
Author: Justin Nel