<div class="base">
   <div class="asanoha"></div>
</div>

.base {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  height: 100vh;
  width: 100vw;
  margin: -8px;
  padding-top: 1vh;
}

.asanoha{
  height: 100%;
  width: 100%;
  background:
  linear-gradient(90deg, pink 20px, transparent 20px, transparent calc(100% - 20px), pink calc(100% - 20px)) 0 0 / 120px 70px,
  linear-gradient(0deg, darkred 2px, transparent 2px) 0 39px / 80px 69px,
  pink;
}
.asanoha:before,
.asanoha:after {
  content: '';
  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
}
.asanoha:before{
  background:
  linear-gradient(90deg, darkred 2px, transparent 2px) 0 0 / 60px 140px,
  linear-gradient(30deg, transparent 50%, darkred 50%, darkred calc(50% + 2px), transparent calc(50% + 2px)) 0 0 / 120px 70px,
  linear-gradient(-30deg, transparent 50%, darkred 50%, darkred calc(50% + 2px), transparent calc(50% + 2px)) 0 0 / 120px 70px,
  linear-gradient(90deg, transparent 40px, #fff 40px, #fff calc(100% - 40px), transparent calc(100% - 40px)) 0 0 / 120px 70px,
  linear-gradient(0deg, darkred 2px, transparent 1px) 0 0 / 40px 70px;
}
.asanoha:after {
  background:
  linear-gradient(90deg, #fff 20px, transparent 20px) 20px 0 / 60px 70px,
  linear-gradient(-60deg, transparent calc(50% - 2px), darkred calc(50% - 2px), darkred calc(50% + 1px), transparent calc(50% + 1px)) 0 0 / 40px 70px,
  linear-gradient(60deg, transparent calc(50% - 2px), darkred calc(50% - 2px), darkred calc(50% + 1px), transparent calc(50% + 1px)) 0 0 / 40px 70px;
}