How to hide just the excedent of the div?

Im my site, i have a div (the circle) that use position to be in that position in image, but the circle is ocupping an excedent space in the right who is forcing the view width to grow, how to hide just the excedent part of the circle?

I don't want to move the circle for another position, just hide the excedent.

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-css -->

.floating-circles .big-circle {
  position: absolute;
  z-index: 1;
  right: calc((-35vw / 2) + 9%);
  bottom: calc((-35vw / 2) + 14%);
  overflow: hidden;
  overflow-x: hidden;
  width: 35vw;
  height: 35vw;
  border-radius: 50%;
  background: rgb(146, 28, 205);
  background: linear-gradient(45deg, rgba(146, 28, 205, 1) 0%, rgba(153, 26, 177, 1) 40%, rgba(48, 35, 174, 1) 80%, rgba(48, 35, 174, 1) 100%);
}

<!-- language: lang-html -->

<div class="floating-circles">
  <div class="small-circle"></div>
  <div class="big-circle"></div>
  <!-- The big-circle is the circle causing the bug -->
</div>

<!-- end snippet -->

Full project code here in github

You can either prevents body from overflowing:

body {
  overflow-x: hidden;
}

...or use a clip-path that "cuts" everything outside of the main box:

.floating-circles {
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
  /* or clip-path: inset(0) */
  /* Thanks @TemaniAfif for the suggestion! */
}

Try it:

<!-- begin snippet: js hide: true -->

<!-- language: lang-css -->

.floating-circles {
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
}


/* Demo only */

.floating-circles {
  position: relative;
  top: 4em;
  height: 200px;
  width: 500px;
  background: #ddd;
}

.floating-circles .big-circle {
  position: absolute;
  right: -25px;
  bottom: -40px;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(146, 28, 205, 1) 0%, rgba(153, 26, 177, 1) 40%, rgba(48, 35, 174, 1) 80%, rgba(48, 35, 174, 1) 100%);
}

<!-- language: lang-html -->

<div class="floating-circles">
  <div class="big-circle"></div>
</div>

<!-- end snippet -->