Really need some help here. I need to create a fading radial gradient with a noisy touch that fill the viewport and can be animate.
The SVG filter seemed to be the best solution at first (light, smooth, etc.) but I hit major cross-browser issues.
Am I missing something?
Note: I am open to other stack (WebGL, shaders, etc.) but that's beyond my knowledge.
Cross-browser issues:
- Chrome: everything's perfect
- Firefox: offset
- Safari: don't work at all
Link to my pen: https://codepen.io/jesuismaxime/pen/bGgZKEL
:root {
--top: #C4E9FB;
--duration: 4s;
--state: running; // paused | running
}
* {
margin: 0;
padding: 0;
}
.-background {
position: fixed;
width: 100%;
height: 100%;
top:0;
left:0;
z-index: 0;
background-color: var(--top);
}
.-background svg {
position: absolute;
left:0;
top:0;
width: 100%;
height: 100%;
z-index: 2;
}
.-background svg .-shape {
animation: pulse infinite alternate ease-in-out var(--duration);
-webkit-animation: pulse infinite alternate ease-in-out var(--duration);
animation-play-state: var(--state);
-webkit-animation-play-state: var(--state);
}
@keyframes pulse {
0% {
r: 0;
}
50% {
r: 150vw;
}
100% {
r: 150vw;
}
}
@-webkit-keyframes pulse {
0% {
r: 0;
}
50% {
r: 150vw;
}
100% {
r: 150vw;
}
}<div class="-background">
<svg
xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'
>
<filter
id="noise"
x="0"
y="0"
width="100vw"
height="100vh"
filterUnits="userSpaceOnUse"
_primitiveUnits="userSpaceOnUse"
>
<feTurbulence
type='turbulence'
baseFrequency='2.5'
numOctaves="2"
result="NOISE"
seed="10"
/>
<feDisplacementMap
in2="NOISE"
in="SourceGraphic"
scale="400"
xChannelSelector="B"
yChannelSelector="R"
/>
</filter>
<circle
class="-shape"
fill="#FFF"
filter="url(#noise)"
cx="40vw"
cy="40vh"
r="10vw"
/>
</svg>
</div>