.heart {
   --_m: radial-gradient(#000 69%,#0000 70%) 84.5%/50%;
  -webkit-mask-box-image: var(--_m);
             mask-border: var(--_m);
  clip-path: polygon(-41% 0,50% 91%, 141% 0);
    mask:
     radial-gradient(at 70% 31%,#000 29%,#0000 30%),
     radial-gradient(at 30% 31%,#000 29%,#0000 30%),
     conic-gradient(#000 0 0) bottom/100% 50% no-repeat;
  }

/* HTML: <div class="star"></div> */
.star {
  padding: 3px;
  aspect-ratio: 1;
  clip-path: polygon(50% 0,
    calc(50%*(1 + sin(.4turn))) calc(50%*(1 - cos(.4turn))),
    calc(50%*(1 - sin(.2turn))) calc(50%*(1 - cos(.2turn))),
    calc(50%*(1 + sin(.2turn))) calc(50%*(1 - cos(.2turn))),
    calc(50%*(1 - sin(.4turn))) calc(50%*(1 - cos(.4turn))) 
   ); 
  /* or more simple
  clip-path: polygon(50% 0,79% 90%,2% 35%,98% 35%,21% 90%); 
   */
}

.flower {
  --g:/33.334% 33.334% radial-gradient(#000 calc(71% - 1px),#0000 71%) no-repeat; --g:/37.02% 37.02% radial-gradient(#000 calc(71% - 1px),#0000 71%) no-repeat;
  mask: 100% 50% var(--g),65.451% 97.553% var(--g),9.549% 79.389% var(--g),9.549% 20.611% var(--g),65.451% 2.447% var(--g),radial-gradient(100% 100%,#000 25.476%,#0000 calc(25.476% + 1px));
}

.diamond {
  clip-path: polygon(100% 50%,50% 100%,0% 50%,50% 0%);
}

.star {
  vertical-align: bottom;
  aspect-ratio: 1;
  clip-path: polygon(78.88% 90.82%,49.62% 80%,20.1% 90.08%,21.35% 58.91%,2.65% 33.95%,32.67% 25.51%,50.63% 0%,67.94% 25.95%,97.74% 35.15%,78.41% 59.63%);
}

.circle {
  padding: 3px;
  border-radius: 50%;
}
/* Transformations */
.rot1 {
  rotate: 10deg;
}

.rot2 {
  transform: rotate(340deg);
}

.rot3 {
  transform: rotate(350deg);
}

.rot4 {
  transform: rotate(20deg);
}
/* BORDERS ZONE
A
A
A
A
A
A
A
A

   */

.heartborder {
  margin:3px;
  padding: 3px;
   size: 160px;
  border: white, solid, 3px;
  background-color: white;
  align-content: safe center;
   --_m: radial-gradient(#000 69%,#0000 70%) 84.5%/50%;
  -webkit-mask-box-image: var(--_m);
             mask-border: var(--_m);
  clip-path: polygon(-41% 0,50% 91%, 141% 0);
    mask:
     radial-gradient(at 70% 31%,#000 29%,#0000 30%),
     radial-gradient(at 30% 31%,#000 29%,#0000 30%),
     conic-gradient(#000 0 0) bottom/100% 50% no-repeat;
  }

.flowerborder {
  margin:3px;
  padding: 3px;
  size: 160px;
  border: white, solid, 5px;
  background-color: white;
  align-content: center;
   --g:/37.02% 37.02% radial-gradient(#000 calc(71% - 1px),#0000 71%) no-repeat;
  mask: 100% 50% var(--g),65.451% 97.553% var(--g),9.549% 79.389% var(--g),9.549% 20.611% var(--g),65.451% 2.447% var(--g),radial-gradient(100% 100%,#000 25.476%,#0000 calc(25.476% + 1px));
}

.circleborder {
  margin:3px;
  padding: 6px;
  vertical-align: bottom;
  border: white, solid, 2px;
  background-color: white;
  border-radius: 50%;
}

.starborder {
  margin:3px;
  size: 160px;
  padding: 5px;
  border: white, solid, 5px;
  background-color: white;
  clip-path: polygon(78.88% 90.82%,49.62% 80%,20.1% 90.08%,21.35% 58.91%,2.65% 33.95%,32.67% 25.51%,50.63% 0%,67.94% 25.95%,97.74% 35.15%,78.41% 59.63%);
}

.diamondborder {
  align-content: center;
  margin:3px;
  padding: 6px;
  size: 160px;
  border: white, solid, 3px;
  background-color: white;
  clip-path: polygon(100% 50%,50% 100%,0% 50%,50% 0%);
}