JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<svg height="320" width="320" viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg">
	<defs>
		<filter id="fractal-noise" color-interpolation-filters="sRGB">
			<feTurbulence
				type="fractalNoise"
				baseFrequency="0.81"
				numOctaves="3"
				stitchTiles="stitch"
				result="turb"
			/>
			<feDisplacementMap in="SourceGraphic" in2="turb" scale="1000" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
		</filter>
	</defs>
</svg>

<div class="panel"></div>

CSS

html {
  background: repeating-linear-gradient(
    45deg,
    #606dbc,
    #606dbc 10px,
    #465298 10px,
    #465298 20px
  );
}

svg {
  position: absolute;
  inset: 0 auto auto 0;
}

.panel {
  min-height: 300px;
  filter: url(#fractal-noise);
  _backdrop-filter: blur(5px);
  background: rgba(254, 113, 6, 0.5);
  padding: 100px;
  clip-path: inset(100px);
  margin: -100px;
}