Masking with SVG (video, fire, water ...)

19.12.2023
CSS SVG CSS trick
preview.md Raw #

index.html Raw #

<!--
SURFER: https://output.jsbin.com/mekupikizi
-->

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .image_mask {
                -webkit-mask-image: url('logo2.svg');

                -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;

                -webkit-mask-position: center;
                mask-position: center;

                -webkit-mask-size: 100%;
                mask-size: 100%;

                width: 300px;
                height: 300px;
                overflow: hidden;
            }

            body {
                background-color: black;
            }

            .video_holder {
                width: 300px;
                height: 300px;
            }

            video {
                width: 300px;
                height: 300px;
                object-fit: cover;
            }

            .logo_mask {
                display: inline-block;

                -webkit-mask-image: url('logo3.svg');
                mask-image: url('logo3.svg');

                -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;

                -webkit-mask-position: center;
                mask-position: center;

                -webkit-mask-size: cover;
                mask-size: cover;
            }
        </style>
    </head>
    <body>
        <img src="logo2.svg" alt="" />

        <div class="image_mask">
            <img src="https://livefiredev.com/wp-content/uploads/2022/09/small_file_bg.jpg" />
        </div>

        <br /><br />
        <div class="logo_mask">
            <div class="video_holder">
                <video width="300" height="300" loop muted autoplay>
                    <source src="https://livefiredev.com/wp-content/uploads/2022/09/size_reduced_fire_bg_video.mp4" type="video/mp4" />
                </video>
            </div>
        </div>
    </body>
</html>