
In the previous blog post I've discussed [how to create heat
map color grading using pure CSS](https://expensive.toys/blog/pure-CSS-heatmap).
That approach while simple has two major limitations:

- if you want to create multi color scale (more than two colors)
  you're limited by the order of the colors on the hue color wheel
- it will not work on videos or images or complex elements
  with gradients that represent a data set

The new **SVG filter technique** that I am about to show you is much more flexible
allowing you to not only create **any** color scale you want but also apply it to
any element on a page - image, video, canvas, you name it!

## How it works

First of all, SVG filters are shaders for DOM elements.
A shader is a programme that changes the color or a position of each
pixel of an element the shader is applied to.

There's **feComponentTransfer** filter effect that allows us to change the color
of each pixel by remapping each color channel in a pixel (**R**, **G**, **B** and **A**)
to a new value. In particular it remaps the color channel to a place on
a gradient that we can define.

So how can we leverage that?

The starting point is - get any data set and represent each data point with a color
so that the min value is black, max value is white and everything in
between is a shade of gray. You can represent the data with HTML elements
or an image, whatever you like. For this simple demo, let's use
a div with black to white gradient background.

<SVGFilterHeatMaps.GradientDemo variant="before" />
<br />

Then using **feComponentTransfer** write a programme that will remap color of each
pixel to a value on a gradient defined by us. Let's start with a blue to red gradient.

Important thing here is that color component functions see color channels as fractons
(values 0 to 1) as opposed to CSS rgb() that takes values ranging from 0 to 255.

To convert any RGB color to fractions, just divide its R, G and B channel by 255:

```
Blue:              Red:

R:   0/255 = 0     R: 255/255 = 1
G:   0/255 = 0     G:   0/255 = 0
B: 255/255 = 1     B:   0/255 = 0
```

Then put these colors inside the **tableValues** attributes:

```
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
    <filter id="blue-red" color-interpolation-filters="sRGB">
    <feComponentTransfer>
        <feFuncR type="table" tableValues="0 1" />
        <feFuncG type="table" tableValues="0 0" />
        <feFuncB type="table" tableValues="1 0" />
    </feComponentTransfer>
    </filter>
</svg>
```

When you apply above filter to the black to white gradient this is what you get -
the min value (black pixels) become blue, max value (white pixels) become
red and everything in between (shades of grey) become something inbetween (purple'ish).

<SVGFilterHeatMaps.GradientDemo variant="after" />

## Thermal vision

Now let's do something cool. Let's define another filter for a **thermal vision** effect.
The colors we're going to use are:

```
Black:         Navy:                Pink:                Orange:              White:

R: 0/255 = 0   R:  32/255 = 0.125   R: 204/255 = 0.8     R: 255/255 = 1       R: 255/255 = 1
G: 0/255 = 0   G:   0/255 = 0       G:   0/255 = 0       G: 215/255 = 0.843   G: 255/255 = 1
B: 0/255 = 0   B: 140/255 = 0.549   B: 119/255 = 0.466   B:   0/255 = 0       B: 255/255 = 1
```

The filter looks like this:

```
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <filter id="thermal-vision" color-interpolation-filters="sRGB">
    <feComponentTransfer>
      <feFuncR type="table" tableValues="0  0.125  0.8    1      1" />
      <feFuncG type="table" tableValues="0  0      0      0.843  1" />
      <feFuncB type="table" tableValues="0  0.549  0.466  0      1" />
    </feComponentTransfer>
  </filter>
</svg>
```

Now let's apply it to the grid from the [previous blog post](https://expensive.toys/blog/pure-CSS-heatmap):

<SVGFilterHeatMaps.ThermalVisionFilter />
<SVGFilterHeatMaps.GridDemo />
<br />
Awesome, isn't it?

Now let's try it out on a black **div** with blurred white
circles and white text stacked on top of each other

<SVGFilterHeatMaps.ThermalVisionDemo />
<br />

It works even on images!

<SVGFilterHeatMaps.ImagesDemo />
<br />

But what if your image or element represents data in reverse,
where min value is white and max value is black?

You could just reverse the order of colors in **feComponentTransfer**
but there's way simpler way than that! Fortunately you can chain
CSS filters, so before you apply the **#thermal-vision** filter
apply the **invert(1)** filter:

```
img {
  filter: invert(1) url(#thermal-vision);
}
```

<SVGFilterHeatMaps.InvertedImagesDemo />


Leveraging the power of SVG filters to create advanced heat maps and thermal vision effect with CSS

CSS heat map and thermal vision effect (SVG filters) | Artur Bień

CSS heat map and thermal vision effect (SVG filters)


A heat map is a type of data visualization that uses color to represent
different values or ranges of data. The color scale of a heat map is used
to represent the intensity or magnitude of a particular data point, with
warmer colors like red or yellow indicating higher values and cooler colors
like blue or green indicating lower values.

Heat maps are often used in a variety of applications, including:

- Geographic data, to show the distribution of data points or variables
  across a map,
- Medical imaging, to highlight areas of disease or injury in an image,
- Website analytics, to show which areas of a website are most popular
  or frequently clicked on by users,
- Fitness and health apps: Some fitness and health apps use heat maps
  to track and visualize data on user's activities, such as running and sleep patterns.
- Github uses heat maps in the "contribution graph" section of a user's profile to
  visualize the frequency of code changes made by the user over time. The heat map is
  a graphical representation of the number of commits made to the repositories at different
  times, and it shows when the most activity is taking place.

In this blog post I'll show you three examples of heat maps that you can create with just CSS
without having to install external packages or writing JavaScript:
a rainbow color scale, a single color sequential scale, and a two-color
sequential scale. Each example is accompanied by the corresponding CSS code,
which you can use and modify to create your own heat maps.

All you have to do is:

- copy and paste the styles of the type of heat map you like,
- set the class name on an element
- set the **--intensity** CSS property (a number between 0 and 1) representing
  a magnitude of phenomenon for a given data point.

Resulting heatmap should be a grid of elements looking something like this:

```
...
<div class="blue-to-red" style="--intensity: 0.2"></div>
<div class="blue-to-red" style="--intensity: 0.52"></div>
<div class="blue-to-red" style="--intensity: 0.68"></div>
...
```

## 1. Rainbow color scale

When creating the rainbow color scale the background color is set using
the HSL color model, where the hue is determined by the **--intensity** value.
We're starting with blue (240deg) when **--intensity** is 0 and going
to red (0deg) when **--intensity** is 1.

```css
.rainbow {
  --hue: calc((1 - var(--intensity)) * 240);
  background: hsl(var(--hue), 100%, 50%);
}
```

<CssHeatMaps.SimpleDemo variant="rainbow" />

## 2. Single color sequential scale

This type of a heatmap while not as fancy as the previous one,
is in many ways more readable and better suited for color-blind people.
In this example we're creating a color scale that goes from white to dark green
using linear interpolation:

```css
.green {
  --r: 3;
  --g: 72;
  --b: 29;

  background: rgb(
    calc(255 - ((255 - var(--r)) * var(--intensity))),
    calc(255 - ((255 - var(--g)) * var(--intensity))),
    calc(255 - ((255 - var(--b)) * var(--intensity)))
  );
}
```

<CssHeatMaps.SimpleDemo variant="green" />

## 3. Two color sequential scale

By modyfying a bit code above you can get a color scale that interpolates between
two specified colors. Here, let's interpolate between blue and red:

```css
.blue-to-red {
  --r-1: 0;
  --g-1: 0;
  --b-1: 255;

  --r-2: 255;
  --g-2: 0;
  --b-2: 0;

  background: rgb(
    calc(var(--r-1) - ((var(--r-1) - var(--r-2)) * var(--intensity))),
    calc(var(--g-1) - ((var(--g-1) - var(--g-2)) * var(--intensity))),
    calc(var(--b-1) - ((var(--b-1) - var(--b-2)) * var(--intensity)))
  );
}
```

<CssHeatMaps.SimpleDemo variant="blue-to-red" />
<br />

Sometimes you just may want to only highlight the extremes. To do that we're
going to use the RGBA color model, which is similar to RGB but with an additional
"alpha" value that represents the transparency of the color.
We'll make it so that the color will be fully opaque when at the extremes
(blue or red or 1 intensity respectively) and fully transparent when at the
middle value (0.5 intensity).

```css
.blue-transparent-red {
  --r-1: 0;
  --g-1: 0;
  --b-1: 255;

  --r-2: 255;
  --g-2: 0;
  --b-2: 0;

  /* remaps the "--intensity" value to range from -1 to 1 */

  --alternate: calc((0.5 - var(--intensity)) * 2);

  /* takes an absolute value of "--alternate" this way 
    when "--intensity" is equal 0 or 1 the alpha = 1
    but when its 0.5 (middle value) the alpha = 0 */

  --alpha: max(var(--alternate), -1 * var(--alternate));

  background: rgba(
    calc(var(--r-1) - ((var(--r-1) - var(--r-2)) * var(--intensity))),
    calc(var(--g-1) - ((var(--g-1) - var(--g-2)) * var(--intensity))),
    calc(var(--b-1) - ((var(--b-1) - var(--b-2)) * var(--intensity))),
    var(--alpha)
  );
}
```

<CssHeatMaps.SimpleDemo variant="blue-transparent-red" />
<br />

That's good, but we can make it even better by applying easing
to the alpha channel:

```css
.blue-transparent-red-eased {
  --r-1: 0;
  --g-1: 0;
  --b-1: 255;

  --r-2: 255;
  --g-2: 0;
  --b-2: 0;

  /* remaps the "--intensity" value to range from -1 to 1 */

  --alternate: calc((0.5 - var(--intensity)) * 2);

  /* takes an absolute value of "--alternate" this way 
    when "--intensity" is equal 0 or 1 the alpha = 1
    but when its 0.5 (middle value) the alpha = 0 */

  --alpha: max(var(--alternate), -1 * var(--alternate));

  /* Apply cubic easing to the alpha channel */

  --alpha-ease-cubic: calc(var(--alpha) * var(--alpha) * var(--alpha));

  background: rgba(
    calc(var(--r-1) - ((var(--r-1) - var(--r-2)) * var(--intensity))),
    calc(var(--g-1) - ((var(--g-1) - var(--g-2)) * var(--intensity))),
    calc(var(--b-1) - ((var(--b-1) - var(--b-2)) * var(--intensity))),
    var(--alpha-ease-cubic)
  );
}
```

<CssHeatMaps.SimpleDemo variant="blue-transparent-red-eased" />
<br />
<br />
Aaaand...that's a wrap! As you can see you can create beautiful heatmaps with just
few lines of CSS without having to rely on JavaScript or external packages. Have
fun experimenting!


A clever way to create heat map color grading with simple CSS

Blog

CSS heat map and thermal vision effect (SVG filters)

Create beautiful heat maps with only CSS