<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Noisy Gradient</title>
<style>
#root {
width: 500px;
height: 500px;
background: none;
position: relative;
overflow: hidden;
isolation: isolate;
}
#root .ga-svg {
position: absolute;
pointer-events: none;
}
#root .ga-paint {
position: absolute;
inset: 0;
pointer-events: none;
}
#root .ga-layer-0 {
left: 0px;
width: max(0px, 262px);
top: 0px;
height: max(0px, 257px);
}
#root .ga-layer-1 {
background: linear-gradient(0deg, rgb(69 255 144 / 1) 0%, 50%, rgb(69 168 255 / 1) 100%) 0px 0px / 500px 500px no-repeat;
}
</style>
</head>
<body>
<div id="root">
<div class="ga-layer-1 ga-paint"></div>
<div class="ga-layer-0 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="noise">
<pattern id="ga-svg-0" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<filter id="ga-svg-0-content" x="0" y="0" width="100%" height="100%">
<feTurbulence type="turbulence" baseFrequency="1" numOctaves="8" seed="0" stitchTiles="stitch"/>
<feColorMatrix type="saturate" values="0"/>
<feComponentTransfer color-interpolation-filters="sRGB">
<feFuncR type="linear" slope="0.27058823529411763"/>
<feFuncG type="linear" slope="0.8392156862745098"/>
<feFuncB type="linear" slope="0.7725490196078432"/>
<feFuncA type="linear" slope="1"/>
</feComponentTransfer>
</filter>
<rect width="100%" height="100%" filter="url(#ga-svg-0-content)" opacity="0.67"/>
</svg>
</pattern>
<rect style="x: calc(-200px * 0 / max(0.000001, 262)); width: calc(200px * 500 / max(0.000001, 262)); y: calc(-200px * 0 / max(0.000001, 257)); height: calc(200px * 500 / max(0.000001, 257));" fill="url(#ga-svg-0)"/>
</svg>
</div>
</div>
</body>
</html>