Better Diagrams with SVG and Blend Modes

An interesting use of blend modes is to enhance the appearance of diagrams and graphs. Take, for example, the classic Venn diagram illustrating the “Fast, Cheap, Good” rule:

Better Venn Diagrams with Blends

The SVG markup for the basic diagram would look like this:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">

<title>Project Triangle</title>

<desc>Three overlapping circles, labelled "Good", "Fast" and "Cheap"</desc>

<style type="text/css">

svg { background: #1c1c38; }

circle { opacity: 0.76; }

text { font-family: Avenir Black, Avenir, sans-serif;

font-weight: 700; font-size: 36px;

}

</style>

<circle fill="#ED1F24" cx="163" cy="165" r="141" aria-labelledby="#fast" />

<circle fill="#55C6D9" cx="250" cy="306" r="141" aria-labelledby="#good" />

<circle fill="#FEE600" cx="337" cy="165" r="141" aria-labelledby="#cheap" />

<text x="100" y="165" id="fast">FAST</text>

<text x="310" y="165" id="good">GOOD</text>

<text x="190" y="340" id="cheap">CHEAP</text>

</svg>

That's a really good start, but we can improve the appearance of the diagram by adding mix-blend-mode to the circle elements:

circle {
    opacity: 0.76;
    mix-blend-mode: color-dodge;
}

Which provides the result you see at the top of this article.

Better Bar Graphs with Blends

Similar to my text-clip with blend modes effect, we can use blend modes to provide the vertical bars in a bar graph with a background. For this example I've left the accessibility (and most text labels!) out for the purposes of clarity. The central effect is contained in the fact that the SVG containing the bar graph is inside a <div> element with a background image:

div {

background-image: url(new-york-city-skyline.jpg);

background-size: cover; font-size: 0;

}

svg {

background: #fff; mix-blend-mode: lighten;

}

rect {

fill: #202020;

width: 42.4px;

}

We could clean up the effect slightly by resizing the background image; as it stands, the x and y axes also take on the “punch through” effect. Alternatively, you could surround the rectangles representing the bars with clip-path elements, which would work in much the same way as the blend-mode effect.

Photograph by Josh Liba, used under a Creative Commons Attribution-NonCommercial-NoDerivs 2.0 Generic license.