How to create interactive geometric shapes?

Question

css

Hello!
The designer drew such a figure, while it has a combination of all kinds of embellishments, such as a shadow and a gradient. As a result, when you hover over it, it should still be interactive.
After wandering on the Internet, I found 3 ways to solve this issue, but all have their drawbacks and questions.
1. CSS
First, of course, I tried to draw with CSS. When using clip-path, in this case, the shadow that was made through is not visible box-shadow+ poor support.
Then I decided to just draw a square and rotate it to the desired angle and use it overflow: hidden, but here I am concerned about adaptation and animation.
2.Canvas
It seems that everything worked out, I drew everything, but for some reason, when downloading on the phone, the quality is disgusting. In this case, the height is calculated depending on the height and width of the screen. Because of what it can be? The height and width of the canvas is also set depending on the screen parameters.
3. SVG
I also managed to implement it using the snap.svg library. At the same time, fps sags during scoring and the gradient is kind of broken (a problem due to adding a shadow through filter), there are no smooth transitions.
Do you have any animation tips?
Perhaps someone has implemented something similar? I would be very grateful for any help!
Figure

Animation

Answer 1

Option 2,
1) canvas (most likely the quality is bad, because the phone has a high DPI, and the canvas needs to be increased by 2-3 times, read about it)
2) WebGl, you can use native, you will have to work a little, but you can draw a gradient triangle . Or take Pixi.js , this is a wrapper over webGl, it will be easier with it. Google about displacementFilter in pixi.js, just the "wave" effect will turn out)

Answer 2

If you can do it with pure css, it will be a strong victory, because css is still about creating styles and not drawing from scratch, but probably, on the web, everything that is done on it without serious flaws is the most productive. But to be honest, I don’t imagine the necessary tools in css at all;
Canvas is good for many, but he wants you to solve many problems, read his manuals and then you will be happy. Since instead of googling the resizing rules for it, you went to write on the forum - this is also hardly your way (no pretensions: this is normal);
Remaining svg. In order for it to work, you also need to study, but there is a maximum amount of all kinds of materials on it. To be honest, I didn’t understand the essence of your animation, but probably the problem is that the default animation goes in the acceleration-deceleration mode, and if you tell it to go along a linear time function, your main problem will disappear. And yes, svg is best for making it interactive. Most likely you should understand how svg works by itself and not use third-party frameworks, because. there is a high probability that the one you choose really eats tangible performance.