4th Aug 2015
Vector based graphics in HTML & CSSUsing CSS pre-processors to make scalable vector graphics with HTML elements
Update: the guys at Webucator have made a video to accompany this post - you can check it out here
A short while back I found a neat solution for making a logo in HTML & CSS and thought I'd share.
What you'll need
- A CSS preprocessor (LESS, SASS)
- Time and patience!
Whilst designing effortless I couldn't decide what size the logo should be. I wanted to be able to adjust its size at a later point with the least amount of effort (excuse the pun).
Firstly lets look at the anatomy of the logo:
Having built the logo with fixed measurements (i.e. #filler width 31px and #icon font-size 36px) I set about making each property value dynamic.
Multiplying each property value with a variable formed the basis of the vector part. A variable @dimention was assigned a number and used in every other variable used to make the icon. For example the variable @icon-filler-width was given the value 31px * @dimension and the variable @icon-font-size was assigned 36px * @dimension. Changing the value of @dimention thus updated the value of any variables that used it (and in turn the size of the logo).
In the wild the variables look like this
And are used like so
And voila the end result
As we're dealing with just HTML & CSS adding animations is a breeze, and graphics made this way are retina friendly straight out the box. Lastly if you haven't seen them already check out these amazing logos built by @bchANx.