A random sparkle animation that should tile nicely

sparkle2.svg

<svg  viewBox="0 0 500 500" width="500" height="500" xmlns="http://www.w3.org/2000/svg">

    <style>
        @keyframes leftX {
            0% {
                transform: translateX(120px);
            }

            14.2857142857% {
                transform: translateX(433px);
            }

            28.5714285714% {
                transform: translateX(230px);
            }

            42.8571428571% {
                transform: translateX(20px);
            }

            57.1428571429% {
                transform: translateX(373px);
            }

            71.4285714286% {
                transform: translateX(470px);
            }

            85.7142857143% {
                transform: translateX(80px);
            }
        }

        @keyframes topY {
            0% {
                transform: translateY(140px);
            }

            9.0909090909% {
                transform: translateY(70px);
            }

            18.1818181818% {
                transform: translateY(380px);
            }

            27.2727272727% {
                transform: translateY(465px);
            }

            36.3636363636% {
                transform: translateY(200px);
            }

            45.4545454545% {
                transform: translateY(20px);
            }

            54.5454545455% {
                transform: translateY(310px);
            }

            63.6363636364% {
                transform: translateY(130px);
            }

            72.7272727273% {
                transform: translateY(410px);
            }

            81.8181818182% {
                transform: translateY(176px);
            }

            90.9090909091% {
                transform: translateY(250px);
            }
        }

        .pop {
            animation: pop 0.5s infinite linear;
            transform-origin: 25px 25px;
        }

        @keyframes pop {
            0% {
                transform: scale(0.1) rotate(0deg);
            }

            33.33% {
                transform: scale(1) rotate(30deg);
            }

            100% {
                transform: scale(0.1) rotate(90deg);
            }
        }

        .playground {
            width: 500px;
            height: 500px;
            float: left;
        }

        .y-axis {
            height: 25px;
            width: 25px;
            animation: topY 5.5s steps(1) infinite;
        }

        .x-axis {
            height: 25px;
            width: 25px;
            animation: leftX 3.5s steps(1) infinite;
        }

        .inner-svg {
            overflow: visible;
        }

    </style>
    <defs>
        <radialGradient gradientUnits="userSpaceOnUse" cx="25" cy="25" r="25" id="gradient-0"
            gradientTransform="matrix(-1, 0, 0, -0.15, 50, 30)">
            <stop offset="0" stop-color="rgb(255, 255, 255)" />
            <stop offset="0.5" stop-color="rgb(255, 255, 255)" />
            <stop offset="1" stop-color="rgba(255, 255, 255, 0)" />
        </radialGradient>

        <radialGradient gradientUnits="userSpaceOnUse" cx="25" cy="25" r="12" id="gradient-2">
            <stop offset="0" stop-color="rgb(255, 255, 255)" />
            <stop offset="1" stop-color="rgba(255, 255, 255, 0)" />
        </radialGradient>

        <symbol id="star">
            <ellipse style="fill: url(#gradient-0);" cx="25" cy="25" rx="25" ry="4.63" />
            <ellipse style="fill: url(#gradient-0);transform-origin: 50% 50%;transform:rotate(90deg)" cx="25" cy="25"
                rx="25" ry="4.63" />
            <ellipse style="fill: url(#gradient-2);" cx="25" cy="25" rx="12" ry="12" />
        </symbol>


        <pattern id="sparkle" viewBox="0 0 500 500" width="100%" height="100%" patternContentUnits="objectBoundingBox"
            patternUnits="userSpaceOnUse">

            <g class="y-axis">
                <svg class="inner-svg" x="0" y="0" viewBox="0 0 500 500">
                    <g class="x-axis">
                        <use href="#star" class="pop" width="50px" height="50px" x="0" y="0" />
                    </g>
                </svg>
            </g>
        </pattern>

        <pattern x="200" y="300" id="sparkle2" viewBox="0 0 500 500" width="100%" height="100%" patternContentUnits="objectBoundingBox"
            patternUnits="userSpaceOnUse">
            <g class="y-axis" style="animation-delay:-2.75s">
                <svg class="inner-svg" x="0" y="0" viewBox="0 0 500 500">
                    <g class="x-axis" style="animation-delay:-1.75s">
                        <use href="#star" class="pop" style="animation-delay:0.75s" width="50px" height="50px" x="0" y="0" />
                    </g>
                </svg>
            </g>
        </pattern>

    </defs>

    <rect width="500" height="500" x="0" y="0"  fill="url(#sparkle)" />
    <rect width="500" height="500" x="0" y="0"  fill="url(#sparkle2)" />

</svg>

https://gistcdn.githack.com/alexmwalker/00ff64a20827a5e50371c8bca9502bda/raw/8a47c2c410b2468723e62f83312d3c62c118cd07/sparkle2.svg

.hero-container { width: 100%; background-image: url(https://gistcdn.githack.com/alexmwalker/00ff64a…/raw/8a47c2c…/sparkle2.svg), url(/scribe/themes/salvos/templates/wishes/images/2023/treeline-half.png),url(/scribe/themes/salvos/templates/wishes/images/2023/base-stars-50.png),url(/scribe/themes/salvos/templates/wishes/images/2023/bokeh-seamless-2.jpg); background-repeat: repeat,no-repeat,no-repeat,repeat; background-attachment: scroll; background-size: auto 80%,auto 90%,auto 100%,100% auto; background-position: 0% 0%, 90% 100%,10% 50%,0% 0%; padding: 0; float: none; }

You should be able to use this animated SVG as a tile-able layer to give things a magical sparkle effect. I see two main ways to deploy it.

1. Use a pseudo element to overlay the wrapper on an IMG (i.e. IMGs don't have their own pseudo elements). This might be something like a golden-ticket IMG?
2. Use it as a the top layer in a multi-layered background-image. (i.e. perhaps a sparkling night sky).

It's a small file that produces a very 'random-like' sparkle effect. I believe it's relatively 'performant' - but I'd love to hear from anyone viewing on low-powered systems.