Beyond Bars: Shaping Charts With Symbols and Emoji
Typical data visualization relies on rectangles and circles, but there’s no rule saying you can’t visualize a percentage with a pentagon or a piece of fruit. Using CSS blend modes with conic gradients offers a lightweight way to turn arbitrary shapes into functional charts — no charting library required.
The core trick is predictable: stack a CSS shape (a glyph, a border-drawn triangle, an emoji) on top of a conic gradient that marks the "filled" portion of the chart. A blend mode makes the overlap legible. Let’s break down the three approaches.
Glyphs as the Chart Canvas
The easiest shape source is a symbol character placed directly in the markup. Two stacked divs occupy the same grid cell — one holds the glyph, the other holds the gradient mask. The symbol div (e.g., a pentagon via the HTML entity ⬠ or from the system emoji keyboard) is sized and colored with standard font properties.
The gradient layer uses a conic-gradient whose stops mark the visual value. Here’s where blend modes do the heavy lifting: applying mix-blend-mode: screen; to that layer only reveals the gradient where it overlaps the colored glyph. With a white page background, non-overlapping gradient color vanishes, leaving the filled pseudo-bar to read cleanly.
The whole effect can be moved into CSS by embedding the glyph as an SVG data URL in a second background layer. Both background-blend-mode and mix-blend-mode yield identical results, so the choice comes down to legibility and maintenance — a data URI in CSS is often harder to scan than a symbol sitting in the HTML.
CSS Shapes Instead of Characters
If you need a form that isn't a Unicode glyph, CSS border tricks can produce common geometric shapes like triangles. These are created the usual way — transparent borders around a zero-size element with a visible edge — then rendered as an SVG data URL background layer, adding it just like a symbol.
For an outlined look, a smaller, white interior shape creates the visual border while the conic gradient shows through only the visible area. The approach generalizes across any SVG or CSS-drawn shape as long as you bake it into the background image.
Emoji In, With a Color Workaround
Emoji are self-contained graphics, but their built-in colors can clash with your palette. The fix is to make the emoji’s text color transparent and set an alternate shade with a text-shadow, effectively recoloring the glyph. Fed into the same SVG-data-URL pattern as the plain symbols, an emoji becomes a perfectly viable chart shape.
Because SVG data URLs can contain any path or text, you can apply the same layering rules to a multi-shape design — like a red apple with a white inset for the border — by adding nested elements before encoding to the URL.
One caveat: when several chart layers share styles, defining the common properties on a parent element (like <body>) keeps the markup tidy and inherited styles in one place.
Animation and the @property Route
Static percentages are only the start. By registering a custom property via the CSS @property at-rule, you can animate the conic gradient’s stop value. The syntax lets the browser interpolate the custom property when it changes — such as on a hover — producing a smooth sweep. When a @property-registered value animates, the gradient smoothly shifts between its starting and ending amounts.
In browsers without @property support, a JavaScript animation that increments the gradient percentage can approximate the effect by repeatedly assigning the updated style value.
Blend Mode Considerations
All of these examples rely on blending a semi-transparent gradient with a shape. screen may be the most straightforward for a lighter result, but other blend modes will produce varied outcomes based on the backdrop behind the chart. When you rely on a specific backdrop color, isolation: isolate; on the chart container prevents unexpected mix results from surrounding elements.
Whichever shape you choose — symbol, CSS triangle, or emoji — design for clarity: charts with eccentric forms still must communicate their value at a glance, so plenty of contrast and sufficient size matter more than the novelty of the glyph.
