Playing with Scalable Vector Graphics and CSS3

Reading time ~1 minute

I haven’t been posted often enough this year! Let’s get out of that bad habit 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!

Another site for my content

Talking about another one of my websites Continue reading

Cloudflare Dynamic DNS

Published on August 04, 2016