origami1024

background-position: 0 0;
background-size: 50vw 100%;
background-repeat: no-repeat;

.btn-filters {
  transition-delay: 0.6s;
}
.btn-filters-active {
  transition-delay: 0s;
}

.filters__categories_list {
  /*это чтобы налазящую границу и круглый уголок пофиксить*/
  border-top: 0;
  border-top-left-radius:0;
}

<div id="test" :style="{ color: activeColor }"></div>

box-shadow: 0 -80px 156px rgba(0, 0, 0, 0.7) inset;

.wrapper { /*родителю*/
  height: 40vw; /*фикс высота*/
  flex-direction: column; /*флекс колонками*/
  flex-wrap: wrap;
}
.block{ /*внутренние блоки*/
  flex-basis: 33.3%;
}
.block:first-child{ /*первый 100%*/
  flex-basis: 100%;
}

.plate1{
  width: 90vh;
  height: 90vh;
  border-radius: 100%;
  border: 3px solid black;
  background: radial-gradient(circle, white 10%, black 10%, black calc(10% + 3px), transparent 5%),
              repeating-radial-gradient(circle, black 5px, gray 7px, black 8px);
}

<svg viewBox="0 0 140 140" width=100vw height=100vh>
  <defs>
    <marker id="markerCircle" markerWidth="8" markerHeight="8" refX="5" refY="5">
        <circle cx=5 cy=5 r=3 />
    </marker>
  </defs>
  <path d="M20 20 L30 40 L70 20 L90 80" fill="none" stroke="red" marker-start=url(#markerCircle) marker-mid=url(#markerCircle) marker-end=url(#markerCircle)>
    <animate 
           attributeName="d"
           values="M20 20 L30 40 L70 20 L90 80;
               M20 40 L30 10 L70 60 L90 110;
               M10 10 L15 80 L120 70 L150 75;
               M20 20 L30 40 L70 20 L90 80"
           dur="20s"
           repeatCount="indefinite"
           />
  </path>
</svg>

let i = a.name.length
while (i--) b.push({'name': a.name[i] + ' ' + a.surname[i]})