Struggling to Develop a High-Performance Interface Feature
I'm currently facing a challenge in coding an interface that requires a subtle and broad glow effect, similar to the example provided below:
Exploration of Possible Solutions
After exploring options such as outer-glow, filter, and canvas techniques, I have yet to find a satisfactory and efficient solution:
- outer-glow: Offers desired effect but severely impacts performance, especially with larger glows.
filters: While blur filters can be used, they do not replicate the glowing effect effectively. Implementing a duplicate DOM, blurring it, overlaying it on the original DOM with low opacity, and maintaining synchronization through JavaScript may lead to performance issues.
- canvas: Drawing the DOM on a transparent canvas layer and applying blur is another option, but it involves complex processes like rendering all DOM elements as SVG and ensuring synchronization between the two versions.
Seeking Advice
At this point, I am at a loss for solutions. Is there a way to achieve the glow effect on my interface while maintaining optimal performance?
I am open to any creative suggestions or alternative methods that could help me implement the desired glow effect efficiently within a web application environment.