Vector based graphics in HTML & CSS

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 @dimension 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 @dimension 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:

// Change @dimension value to update the size of the logo
@dimension: 1.2;

// Icon
@icon-font-size: 36px * @dimension;
@icon-shadow-left: 6px * @dimension;
@icon-shadow-top: 40px * @dimension;
@icon-shadow-width: 34px * @dimension;
@icon-shadow-height: 8px * @dimension;
@icon-shadow-radius: 0 0 (6px * @dimension) (6px * @dimension);
@brace-left: 30.5px * @dimension;
@icon-filler-left: 8px * @dimension;
@icon-filler-top: 12px * @dimension;
@icon-filler-width: 31px * @dimension;
@icon-filler-height: 33px * @dimension;
@icon-filler-radius: 10px * @dimension;

// Text (the bit that says "Effortless")
@icon-text-font-size: 12.5px * @dimension;
@icon-text-top: 3px * @dimension;
@icon-text-left: 74px * @dimension;

And are used like so:

#icon {
  position: absolute;
  .transform(rotate(-35deg));
  font-family: @braces-font-family;
  font-weight: @braces-font-weight;
  font-size: @icon-font-size;

  &:after {
    content: ' ';
    position: absolute;
    top: @icon-shadow-top;
    left: @icon-shadow-left;
    width: @icon-shadow-width;
    height: @icon-shadow-height;
    background: @icon-shadow-color;
    .border-radius(@icon-shadow-radius);
  }

  // Etcetera
}

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 pure CSS logos built by @bchANx.