I attempted to create a square gradient with noise, but ultimately, I ended up using four linear gradients rotated 90 degrees each for the top, bottom, left, and right sides. Is there a more efficient approach?

I have a CodePen with my final result, but it’s not scalable, and it’s difficult to adjust for different square sizes. https://codepen.io/conor-v/pen/LYvMaEB

htlm

<section>
      <div class="center">
        <div class="noise noise_top"></div>
        <div class="noise noise_right"></div>
        <div class="noise noise_bottom"></div>
        <div class="noise noise_left"></div>

        <div class="circle"></div>
      </div>
    </section>

css

section {
  position: relative;
  top: 0;
  width: 600px;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.center {
  position: relative;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.noise {
  background: linear-gradient(rebeccapurple, transparent), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'><filter id='noiseFilter'><feTurbulence type='fractalNoise' baseFrequency='0.58' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23noiseFilter)'/></svg>");
  filter: contrast(145%) brightness(650%);
  position: absolute;
  height: 150px;
}

.noise_top {
  top: 51px;
  rotate: 180deg;
  height: 170px;
  width: 220px;
}

.noise_right {
  rotate: -90deg;
  left: 355px;
  width: 198px;
  z-index: 1;
}

.noise_bottom {
  rotate: 0deg;
  bottom: 51px;
  height: 170px;
  width: 220px;
}

.noise_left {
  rotate: 90deg;
  right: 355px;
  width: 198px;
  z-index: 1;
}

.circle {
  width: 200px;
  height: 200px;
  background-color: white;
  position: absolute;
  z-index: 2;
}