/* HTML: <div class="octagon"></div> */
.octagon1 {
  width: 200px;
  aspect-ratio: 1;
  --o:calc(50%*tan(-22.5deg));
  clip-path: polygon(
    var(--o) 50%,
    50% var(--o),
    calc(100% - var(--o)) 50%,
    50% calc(100% - var(--o))
  );
  background: #3B8686;
}

/* HTML: <div class="octagon2"></div> */
.octagon2 {
  --b:10px; /* the border thickness */

  width: 200px;
  aspect-ratio: 1;
  --o:calc(50%*tan(-22.5deg));
  --x:calc(var(--b)*cos(22.5deg));
  --y:calc(var(--b)*sin(22.5deg));
  clip-path: polygon(    
    var(--o) 50%,50% var(--o),
    calc(100% - var(--o)) 50%,    
    50% calc(100% - var(--o)),var(--o) 50%,
    calc(50% + var(--o) + var(--y)) var(--x),
    var(--x) calc(50% + var(--o) + var(--y)),
    var(--x) calc(50% - var(--o) - var(--y)),
    calc(50% + var(--o) + var(--y)) calc(100% - var(--x)),
    calc(50% - var(--o) - var(--y)) calc(100% - var(--x)),
    calc(100% - var(--x)) calc(50% - var(--o) - var(--y)),
    calc(100% - var(--x)) calc(50% + var(--o) + var(--y)),
    calc(50% - var(--o) - var(--y)) var(--x),
    calc(50% + var(--o) + var(--y)) var(--x)
  );
  background: #3B8686; 
}
/* HTML: <img class="octagon" src="" alt=""> */
.octagon3 {
  width: 200px;
  aspect-ratio: 1;
  --o:calc(50%*tan(-22.5deg));
  clip-path: polygon(
    var(--o) 50%,
    50% var(--o),
    calc(100% - var(--o)) 50%,
    50% calc(100% - var(--o))
  );
  background: #3B8686;
}

/* HTML: <div class="dashed-circle"></div> */
.dashed-circle {
  --n: 18;   /* number of dashes */
  --d: 8deg; /* control the space between dashes */
  
  height: 240px;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 10px; /* border thickness */
  /* the coloration (more examples: https://css-tip.com/dashed-rounded-border/ */
  background: 
    repeating-conic-gradient(
      #CDB380 0 calc(  360deg/var(--n)), 
      #033649 0 calc(2*360deg/var(--n))
    );
  mask: 
    linear-gradient(#0000 0 0) content-box intersect, 
    repeating-conic-gradient(from calc(var(--d)/2),
     #000  0 calc(360deg/var(--n) - var(--d)),
     #0000 0 calc(360deg/var(--n))
   );
}

.hexagon {
  aspect-ratio: 1/cos(30deg);
  clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);
}
.hexagon1 {
  height: 200px;
  aspect-ratio: 1/cos(30deg);
  clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);
  background: #3B8686;
}
.star {
  width: 300px;  
  aspect-ratio: 1;
  background: #F8CA00;
  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))) 
   ); 
}
.starburst {
  width: 200px;
  aspect-ratio: 1;
  clip-path: polygon(100% 50%,78.98% 57.76%,93.3% 75%,71.21% 71.21%,75% 93.3%,57.76% 78.98%,50% 100%,42.24% 78.98%,25% 93.3%,28.79% 71.21%,6.7% 75%,21.02% 57.76%,0% 50%,21.02% 42.24%,6.7% 25%,28.79% 28.79%,25% 6.7%,42.24% 21.02%,50% 0%,57.76% 21.02%,75% 6.7%,71.21% 28.79%,93.3% 25%,78.98% 42.24%);
}
.film-strip {
  --s: 12px; 
  --c: #222;
 
  width: calc(20*var(--s));
  aspect-ratio: 1.25;
  background: 
    conic-gradient(at 50% var(--s),var(--c) 75%,#0000 0) 
    0 0/calc(2*var(--s)) calc(100% - var(--s)) padding-box;
  border: var(--s) solid var(--c);
  padding: calc(var(--s)*2.5) calc(var(--s)*1.5);
  box-sizing: content-box;
}
.rounded-edge {
  height: 200px;
  aspect-ratio: 3/2;
  clip-path: ellipse(85% 100% at 50% 0%);
  background: #CC2A41;
}
.heart {
  height: 250px; /* adjust to control the size */
  aspect-ratio: 1;
  --_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);
  background: #cc333f;
}

@supports not (-webkit-mask-box-image: var(--_m)) { 
  .heart {
    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;
  }
}
.polygon {
  width: 200px; /* adjust to control the size */
  aspect-ratio: 1;
  clip-path: polygon(100% 50%,90.45% 79.39%,65.45% 97.55%,34.55% 97.55%,9.55% 79.39%,0% 50%,9.55% 20.61%,34.55% 2.45%,65.45% 2.45%,90.45% 20.61%);
}
.boxbot {
  --mask: conic-gradient(from -37.5deg at bottom,#0000,#000 1deg 74deg,#0000 75deg) 50%/46.04px 100%;
  -webkit-mask: var(--mask);
          mask: var(--mask);
}
.folded-rectangle {
  --r: 40px; /* radius */

  width: 300px;
  aspect-ratio: 1.5;
  background: #519548;
  border-radius: var(--r) 0/calc(2*var(--r)) 0;
  padding-block: var(--r);
  --_m:#0000 100%,#000 calc(100% + 1px);
  mask:
    conic-gradient(#000 0 0) content-box,
    radial-gradient(var(--r) at 100% 100%,var(--_m)) 0 100% no-repeat,
    radial-gradient(var(--r) at 0    0   ,var(--_m)) 100% 0 no-repeat;
  mask-size: var(--r) var(--r);
}
.flower1 {
  width: 200px; /* adjust to control the size */
  aspect-ratio: 1;
  --g:/20.56% 20.56% radial-gradient(#000 calc(71% - 1px),#0000 71%) no-repeat;
  mask: 100% 50% var(--g),93.301% 75% var(--g),75% 93.301% var(--g),50% 100% var(--g),25% 93.301% var(--g),6.699% 75% var(--g),0% 50% var(--g),6.699% 25% var(--g),25% 6.699% var(--g),50% 0% var(--g),75% 6.699% var(--g),93.301% 25% var(--g),radial-gradient(100% 100%,#000 38.366%,#0000 calc(38.366% + 1px));
}
.flower2 {
  width: 200px; /* adjust to control the size */
  aspect-ratio: 1;
  --g:/calc(20.56% + 3.837px) calc(20.56% + 3.837px) radial-gradient(#0000 calc(70% - 5px),#000 calc(71% - 5px) 70%,#0000 71%) no-repeat;
  mask: radial-gradient(100% 100%,#0000 calc((20.56% + 3.837px)/0.536 - 9.33px),#000 calc((20.56% + 3.837px)/0.536 - 9.33px + 1px)) intersect,100% 50% var(--g),93.301% 75% var(--g),75% 93.301% var(--g),50% 100% var(--g),25% 93.301% var(--g),6.699% 75% var(--g),0% 50% var(--g),6.699% 25% var(--g),25% 6.699% var(--g),50% 0% var(--g),75% 6.699% var(--g),93.301% 25% var(--g);
}
.flower3 {
  width: 200px; /* adjust to control the size */
  aspect-ratio: 1;
  --g:/20.56% 20.56% radial-gradient(#000 calc(71% - 1px),#0000 71%) no-repeat;
  mask: radial-gradient(100% 100%,#000 calc(38.366% - 1px),#0000 38.366%) subtract,100% 50% var(--g),93.301% 75% var(--g),75% 93.301% var(--g),50% 100% var(--g),25% 93.301% var(--g),6.699% 75% var(--g),0% 50% var(--g),6.699% 25% var(--g),25% 6.699% var(--g),50% 0% var(--g),75% 6.699% var(--g),93.301% 25% var(--g);
}
.flower4 {
  width: 200px; /* adjust to control the size */
  aspect-ratio: 1;
  --g:/calc(20.56% + 3.837px) calc(20.56% + 3.837px) radial-gradient(#0000 calc(70% - 5px),#000 calc(71% - 5px) 70%,#0000 71%) no-repeat;
  mask: radial-gradient(100% 100%,#000 calc((20.56% + 3.837px)/0.536 - 9.33px),#0000 calc((20.56% + 3.837px)/0.536 - 9.33px + 1px)) intersect,100% 50% var(--g),93.301% 75% var(--g),75% 93.301% var(--g),50% 100% var(--g),25% 93.301% var(--g),6.699% 75% var(--g),0% 50% var(--g),6.699% 25% var(--g),25% 6.699% var(--g),50% 0% var(--g),75% 6.699% var(--g),93.301% 25% var(--g);
}