<div class="shuriken-1"></div>
<div class="shuriken-2"></div>
<div class="shuriken-3"></div>
<div class="shuriken-4"></div>
<div class="shuriken-5"></div>
<div class="shuriken-6"></div>
<div class="shuriken-7"></div>
<div class="shuriken-8"></div>
<div class="shuriken-9"></div>
<div class="shuriken-10"></div>

.shuriken-1 {
  width: 80px;
  height: 80px;
  background: #8d7958;
  clip-path: polygon(100.00% 50.00%,64.14% 64.14%,50.00% 100.00%,35.86% 64.14%,0.00% 50.00%,35.86% 35.86%,50.00% 0.00%,64.14% 35.86%);
  -webkit-mask:radial-gradient(circle 5px,#0000 90%,#000);
  animation:sh1 1.5s infinite linear;
}

@keyframes sh1{ 
  100%{transform: rotate(1turn)}
}

.shuriken-2 {
  width: 80px;
  height: 80px;
  background:#8d7958;
  clip-path: polygon(100.00% 50.00%,68.48% 57.65%,85.36% 85.36%,57.65% 68.48%,50.00% 100.00%,42.35% 68.48%,14.64% 85.36%,31.52% 57.65%,0.00% 50.00%,31.52% 42.35%,14.64% 14.64%,42.35% 31.52%,50.00% 0.00%,57.65% 31.52%,85.36% 14.64%,68.48% 42.35%);
  -webkit-mask:radial-gradient(circle 5px,#0000 90%,#000);
  animation:sh2 1.5s infinite linear;
}

@keyframes sh2{ 
  100%{transform: rotate(1turn)}
}

.shuriken-3 {
  width: 80px;
  height: 80px;
  display: grid;
  color:#8d7958;
  -webkit-mask:radial-gradient(circle 5px,#0000 90%,#000);
  animation:sh3 1.5s infinite linear;
}
.shuriken-3:before,
.shuriken-3:after {
  content: "";
  grid-area: 1/1;
  background: 
    radial-gradient(farthest-side at bottom left, currentColor 94%,#0000) top left, 
    radial-gradient(farthest-side at top right  , currentColor 94%,#0000) bottom right;
  background-size: 63% 50%;
  background-repeat: no-repeat;
  -webkit-mask: 
    radial-gradient(65% 110% at bottom left, #0000 94%,#000) top left, 
    radial-gradient(65% 110% at top   right, #0000 94%,#000) bottom right;
  -webkit-mask-size: 62% 50%;
  -webkit-mask-repeat: no-repeat;
}
.shuriken-3:after {
  transform: rotate(90deg);
}

@keyframes sh3 { 
  100%{transform: rotate(1turn)}
}

.shuriken-4 {
  width: calc(80px*0.707);
  height: calc(80px*0.707);
  background:#8d7958;
  clip-path: polygon(0 0,50% 15%,100% 0,85% 50%,100% 100%,50% 85%,0 100%,15% 50%);
  -webkit-mask:
    radial-gradient(circle closest-side,#0000 92%,#000) top   /100% 33.4%,
    radial-gradient(circle closest-side,#0000 92%,#000) left  /33.4%  33.4%,
    radial-gradient(circle 5px         ,#0000 92%,#000) center/33.3%  33.3%,
    radial-gradient(circle closest-side,#0000 92%,#000) right /33.4%  33.4%,
    radial-gradient(circle closest-side,#0000 92%,#000) bottom/100% 33.4%;
  -webkit-mask-repeat:no-repeat;
  animation:sh4 1.5s infinite linear;
}

@keyframes sh4 { 
  100%{transform: rotate(1turn)}
}

.shuriken-5 {
  width: 80px;
  height: 80px;
  color:#8d7958;
  background:
    linear-gradient(currentColor 0 0) center/100% 15px,
    linear-gradient(currentColor 0 0) center/15px 100%,
    radial-gradient(circle 15px,currentColor 94%,#0000);
  background-repeat: no-repeat;
  -webkit-mask:radial-gradient(circle 5px,#0000 90%,#000);
  clip-path: polygon(0 30px,calc(100% - 30px) 0,100% calc(100% - 30px),30px 100%);
  animation:sh5 1.5s infinite linear;
}

@keyframes sh5 { 
  100%{transform: rotate(1turn)}
}

.shuriken-6 {
  width: 80px;
  height: 80px;
  display: grid;
  color:#8d7958;
  background:
    conic-gradient(from -153deg at right,#0000,currentColor 1deg 126deg,#0000 127deg) calc(50% + 5px) 0   /10px 50%,
    conic-gradient(from   27deg at left ,#0000,currentColor 1deg 126deg,#0000 127deg) calc(50% - 5px) 100%/10px 50%,

    linear-gradient(to top    right,currentColor 50%,#0000 0%) calc(50% + 10px) calc(50% - 10px) /20px 20px,
    linear-gradient(to bottom left ,currentColor 50%,#0000 0%) calc(50% - 10px) calc(50% + 10px) /20px 20px;
  background-repeat: no-repeat;
  -webkit-mask:radial-gradient(circle 5px,#0000 90%,#000);
  animation:sh6 1.5s infinite linear;
}
.shuriken-6:before,
.shuriken-6:after {
  content: "";
  grid-area: 1/1;
  background:inherit; 
  transform: rotate(60deg);
}
.shuriken-6:after {
  transform: rotate(120deg);
}

@keyframes sh6 { 
  100%{transform: rotate(1turn)}
}

.shuriken-7 {
  width: 80px;
  height: 80px;
  color:#8d7958;
  background:
    radial-gradient(150% 150% at left  -40% top    -40%,#0000 98%,currentColor) left  top,
    radial-gradient(150% 150% at right -40% top    -40%,#0000 98%,currentColor) right top,
    radial-gradient(150% 150% at left  -40% bottom -40%,#0000 98%,currentColor) left  bottom,
    radial-gradient(150% 150% at right -40% bottom -40%,#0000 98%,currentColor) right bottom;
  background-size: 50.3% 50.3%;
  background-repeat: no-repeat;
  -webkit-mask:radial-gradient(circle 5px,#0000 90%,#000);
  animation:sh7 1.5s infinite linear;
}


@keyframes sh7 { 
  100%{transform: rotate(1turn)}
}

.shuriken-8 {
  width: 80px;
  height: 80px;
  --c:#8d7958 91%,#0000;
  background:
    radial-gradient(30% 50% at -3px             55%, var(--c)) top    right,
    radial-gradient(30% 50% at -3px             45%, var(--c)) bottom right,
    radial-gradient(30% 50% at calc(100% + 3px) 55%, var(--c)) top    left,
    radial-gradient(30% 50% at calc(100% + 3px) 45%, var(--c)) bottom left,

    radial-gradient(50% 30% at 45% calc(100% + 3px), var(--c)) top    right,
    radial-gradient(50% 30% at 45% -3px            , var(--c)) bottom right,
    radial-gradient(50% 30% at 55% calc(100% + 3px), var(--c)) top    left,
    radial-gradient(50% 30% at 55% -3px            , var(--c)) bottom left;
  background-size: 50.1% 50.1%;
  background-repeat: no-repeat;
  -webkit-mask:radial-gradient(circle 5px,#0000 90%,#000);
  animation:sh8 1.5s infinite linear;
}

@keyframes sh8 { 
  100%{transform: rotate(1turn)}
}

.shuriken-9 {
  width: 80px;
  height: 80px;
  --c:#8d7958 98%,#0000;
  background:
    radial-gradient(50% 70% at 50% 120%, var(--c)) top,
    radial-gradient(70% 50% at -20% 50%, var(--c)) right,
    radial-gradient(50% 70% at 50% -20%, var(--c)) bottom,
    radial-gradient(70% 50% at 120% 50%, var(--c)) left;
  background-size: 100% 50.1%,50.1% 100%;
  background-repeat: no-repeat;
  -webkit-mask:radial-gradient(circle 5px,#0000 90%,#000);
  animation:sh9 1.5s infinite linear;
}

@keyframes sh9 { 
  100%{transform: rotate(1turn)}
}

.shuriken-10 {
  width: 80px;
  height: 80px;
  display: grid;
  color:#8d7958;
  background: radial-gradient(circle 16px,currentColor 94%,#0000);
  -webkit-mask:radial-gradient(circle 5px,#0000 90%,#000);
  animation:sh10 1.5s infinite linear;
}
.shuriken-10:before,
.shuriken-10:after {
  content: "";
  grid-area: 1/1;
  background: 
    radial-gradient(farthest-side at bottom right,currentColor 94%,#0000) top    right, 
    radial-gradient(farthest-side at top    left ,currentColor 94%,#0000) bottom left;
  background-size: 40% 45%;
  background-repeat: no-repeat;
  -webkit-mask: 
    radial-gradient(60% 100% at bottom right,#0000 94%,#000) top    right, 
    radial-gradient(60% 100% at top    left ,#0000 94%,#000) bottom left;
  -webkit-mask-size: 40% 45%;
  -webkit-mask-repeat: no-repeat;
}
.shuriken-10:after {
  transform: rotate(90deg);
}

@keyframes sh10 { 
  100%{transform: rotate(1turn)}
}

/**/
body {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-auto-rows: 130px;
  place-items:center;
}

* {
  box-sizing: border-box;
}