Cyber-Lane | Playing with Scalable Vector Graphics and CSS3

Portrait of Justin Nel

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.

See the Pen Cyber-Lane Logo by Justin Nel (@Cyberlane) on CodePen.


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

I sell on Tindie
Google