Future<void>

I would be curious to know why every single SVG on the page inflates like this if not constrained by CSS. Pretty sure they are not supposed to do this

I ran into a fun edge case where the design calls for a translucent ring with background blur filter.

Tried importing the piece of the design file as an SVG, but the blur doesn't work on the web page

Does someone know how I could draw this thingy with CSS or, perhaps, as an SVG?

It involves creating a translucent background element with backdrop-filter: blur and clipping it with an SVG. The exact process is a bit arcane and requires a pretty special mask image, but potentially allows to create glassmorphism elements of any shape.

You can learn more about using clip-path with vector graphics in this video. Meanwhile, I will be figuring out how to add the inner shadow to the ring

I ran into a fun edge case where the design calls for a translucent ring with background blur filter.

Tried importing the piece of the design file as an SVG, but the blur doesn't work on the web page

Does someone know how I could draw this thingy with CSS or, perhaps, as an SVG?