In my latest project, I am developing a planning tool for a game that involves two 2D static gun emplacements with varying ranges and damage per second. To visually represent these ranges on the screen, I aim to use different colors based on damage levels, similar to the scale demonstrated here.
I managed to achieve this effect using CSS border radiuses. However, a challenge arises when the ranges overlap, as the combined damage area is not clearly displayed.
My search led me to heatmap.js at . Unfortunately, this library does not allow setting individual radii for each point, and disabling the gradient proved to be another obstacle. The issue lies in the fact that the guns' damage remains constant regardless of range, unlike traditional heatmap representations.
I contemplated a PHP-based solution involving greyscale images with varied opacities to indicate different damage levels, which could then be recolored according to the scale. Yet, this method would prove too slow for real-time updates required as users move the guns around.
I suspect there may be a simpler solution out there, potentially utilizing a CSS filter, but my search hasn't yielded any promising results thus far. Any suggestions or insights would be greatly appreciated. Thank you!