4th Aug 2015

Vector based graphics in HTML & CSS

Using 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.

Never Miss a Post!

If you have enjoyed this blog post I invite you to join my newsletter:

Emails are kept safe with MailChimp And I never ever send spammy emails (Or stay updated with RSS)