How to replace mix-blend-mode on SVG element in Safari?

I have HTML with SVG element:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Page</title>
</head>
    <body>
        <svg style="width:0;height:0;">
            <filter id='f'>
                <feTurbulence type='fractalNoise' baseFrequency='8.5'/>
            </filter>
        </svg>
    </body>
</html>

and CSS:

body::before, body::after {
    position: fixed;
    inset: 0;
    z-index: -1;
    --grad: radial-gradient(at 25%, red, rgba(255, 0, 0, .2) 50%, transparent 70%);
    --mask: var(--grad), var(--grad);
    -webkit-mask: var(--mask);
    -webkit-mask-composite: source-in;
    -webkit-mask: var(--mask);
            mask: var(--mask);
    -webkit-mask-composite: source-in, xor;
            mask-composite: intersect;
    mix-blend-mode: color;
    content: '';
}
body::before {
    background: #000;
    -webkit-filter: url(#f);
            filter: url(#f);
}
body::after {
    background: -webkit-gradient(linear, left top, right top, from(purple), color-stop(20%, navy), to(aqua));
    background: -o-linear-gradient(left, purple, navy 20%, aqua);
    background: linear-gradient(90deg, purple, navy 20%, aqua);
}

For the best support with browsers, I added prefixes, but I came across a problem: the mix-blend-mode property on SVG elements is not supported by Safari. Can I replace it with something else to get an identical result?