Feature Image for Accelerating Scitech’s Particle with painted brand marks
Nick Barrett

Nick Barrett

April 4, 2017

Our branding work for Scitech’s Particle science story accelerator came with multiple highlighter pen like brand marks which were to be used throughout their website. The idea was to have multiple brand marks drawn onto the screen when the page loads and as the user scrolls. This presented a unique challenge for our front end developers to figure out a way to make this draw effect happen, feel natural and look visually pleasing to the end user.

In the past you might have tried to use animated GIFs to achieve this effect, however the modern web has provided us with a much better alternative. SVGs (Scalable Vector Graphics) are a common image format in today’s web because they are purely vectors, which means they can be resized to any dimension, and they can be modified with JavaScript and CSS which is precisely what we need for this use case.

Greensock is a premium JavaScript animation framework that Juicebox uses to achieve many of it’s visually pleasing animations. Part of Greensock is the DrawSVG plugin, which is what we used in this case.
SVGs are usually made up of lots of paths, or lines to tell the browser how to render them. To draw the brand mark the plugin basically reveals the path of an SVG, making it appear “drawn”.

 

 

The issue with the brand marks we designed was that they did not follow strict paths or lines so they could not be drawn this way. We had to retain the highlighter pen feel otherwise we would completely lose the branding of the elements.

 

Blue asterisk brand mark

 

You can see in the above image that the SVG paths cover the outline of the shape, rather than being one single stroke. That makes sense as you wouldn’t be able to achieve the painted look with just one single path.

To get around this issue, we decided to make up SVG masks for each brand element, and then instead of drawing the brand marks directly, we would draw the masks which would reveal the brand mark underneath, essentially achieving the desired effect.

 

Asterisk brand mark with mask applied

 

In the above image you can see the mask overlaid on top of the brand mark. Notice how each stroke is basically a rectangle. It’s just an SVG path with a very thick stroke width.

Now when revealing the mask underneath, you can see how the effect is achieved:

 

Drawing asterisk showing the mask

 

In the above example the mask is shown as a normal path, but when using the SVG mask element, the code looks like this:

 

Using this JavaScript code with Greensock’s TweenMax and DrawSVG plugins to draw the paths:

 

The paths within the <mask> element get drawn, achieving the final result:

 

Final drawn SVG result

 

As you can see, SVGs are extremely powerful and when used with masks you can create some very interesting painted on effects.

Juicebox loves coming up with creative ideas to push your brand further on the web. If you’re interested to see what we can do for you, then please get in touch or start a brief.

Loading...
< Previous Article
Loading...