I've been playing around with masking as well and I found out that you don't have to upload any svg image when you use the webkit-mask-image property in CSS and convert the svg into a Data URI with a SVG to CSS convertor. You can place this converted SVG code directly into CSS and you don't have to upload any image, great for cutting down on the server requests. You can do really cool stuff with masking when you start animating them. 😉 You can even build custom shape dividers with masks. Really worth to explore.
Would you mind making a video about a header that changes its colour on scroll? I basically want it to be transparent and only give it a background colour when scrolling. I've seen that exact effect like a million times with an image that's underneath the header but I can't reproduce it 100% bug-free. When using the background colour and transparency scrolling effect it works but it that has the disadvantage of the background colour being loaded when visiting the first time. It literally flickers. That's the video from Elementor about it with the bug I described: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-PJp87rmeLcI.html
