Posts with tag svg

Sketchy SVGs with RoughJS

I love hand-drawn graphs and I have always fantasized about applying it to vector images. That’s why I was very happy to find out about RoughJS, a library that draws SVG primitives like lines, curves, arcs, polygons, circles, ellipses and paths on a Canvas in a hand-drawn style.

Continue reading about Sketchy SVGs with RoughJS...

Using SVG as placeholders — More Image Loading Techniques

I’m passionate about image performance optimisation and making images load fast on the web. One of the most interesting areas of exploration is placeholders: what to show when the image hasn’t loaded yet.

During the last days I have come across some loading techniques that use SVG, and I would like to describe them in this post.

Example of a SVG generated using 10 and 100 triangles based on a bitmap image

Generating SVGs from images can be used for placeholders. Keep reading!

Continue reading about Using SVG as placeholders — More Image Loading Techniques...

Duotone using CSS blend modes

In a past post I explained how to use SVG and a feColorMatrix filter to apply a duotone effect to an image. This time I’m going to show how to achieve a similar effect with only CSS.

Continue reading about Duotone using CSS blend modes...

More examples of Progressive Image Loading

In a past post I dissected a technique used by Medium to display images, transitioning from a blurry image to the final one. Since then I have found some more sites following a similar approach. Let’s see how Quora, Quartz and Clicktorelease do it.

Continue reading about More examples of Progressive Image Loading...

Spotify's new brand identity using feColorMatrix SVG filters

This is a short post where I show how to use SVG and a feColorMatrix filter to apply a duotone effect to an image.

Continue reading about Spotify's new brand identity using feColorMatrix SVG filters...

SVG Optimisation using SVGOMG and FontForge

Lots of websites have started replacing their icon fonts and small icons with SVGs. They support CSS manipulations, animations and are great for responsive sites. But it is important to keep an eye on their size.

Continue reading about SVG Optimisation using SVGOMG and FontForge...