.box {
  display: inline-block;
  width: 200px;
  aspect-ratio: 1;
  background: linear-gradient(135deg,#1f005c, #5b0060, #870160, #ac255e, #ca485c, #e16b5c, #f39060, #ffb56b);
  transition: .35s;
-webkit-mask: var(--mask);
        mask: var(--mask);
}
.one {
  --mask: radial-gradient(30px at 50% 30px,#0000 97%,#000) 50% -30px/ 55.50px 100%;
}
.one:hover {
  --mask: radial-gradient(30px at 50% 30px,#0000 97%,#000) 50% 0/ 55.50px 100%;
}
.two {
  --mask: radial-gradient(30px at 30px 50%,#0000 97%,#000) -30px/ 100% 55.50px;
}
.two:hover {
  --mask: radial-gradient(30px at 30px 50%,#0000 97%,#000) 0/ 100% 55.50px;
}

body {
  background: linear-gradient(90deg,#ddd,#fff);
}
p {
  margin:0;
}