javascript - Dynamic thermal image using CSS?

Question

I have an illustration made by an illustrator. This is a static thermal image with 6 particular points that I would like to animate (according to the temperature obviously).

For example, I would update a JSON file and according to this file, the image would update itself :

{
  "sensors": [
    {
      "name": "top",
      "value": 0
    },
    {
      "name": "middle",
      "value": 3
    },
    {
      "name": "bottom",
      "value": 1
    }
  ]
}

It would also need to update the legend beside the image (not showed).

Something like this video, but with a much higher quality result.

I was thinking about doing it in CSS but I don't know how to deal with custom shape to have because the illustration is not square and radial-gradient (like this post) doesn't look beautiful when rendered on the image.

Any other technical solutions I might look into ?

Answer 1

IMO 你最好的选择是：

• 使用 SVG，它是二维图形的可缩放矢量图形格式，支持交互性和动画。使用 JavaScript 动态更改您的插画师；您还可以查看用于动画的GSAP或用于数据驱动可视化的D3.js。

• 使用 HTML5 Canvas，用于通过 JavaScript 动态绘制图形（位图格式）。

在这种特定情况下，CSS 不能胜任 IMO 的工作，因为设计复杂的多点形状并不是它的用例。