<!-- https://css-challenges.com/conic-gradient-patterns/ -->
<div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
.box {
  margin:5px;
  height:300px;
  background: 0 0/50px 50px;
  border:1px solid;
}
.box:nth-child(1) {
  background:repeating-conic-gradient(transparent 0 0.25turn,#c39f76 0.25turn 0.5turn) 0/100px 100px;
}
.box:nth-child(2) {
  background:repeating-conic-gradient(at 70% 50%,transparent 0 60deg,#c39f76 61deg 120deg,transparent 121deg 180deg) 30px 0/100px 100px;
}
.box:nth-child(3) {
  background:
    repeating-conic-gradient(transparent 0 60deg,#c39f76 61deg 120deg,transparent 121deg 180deg),
    repeating-conic-gradient(transparent 0 60deg,#c39f76 61deg 120deg,transparent 121deg 180deg) 0 50px;
  background-size:100px 100px;
}
.box:nth-child(4) {
  background:
    repeating-conic-gradient(transparent 0 60deg,#c39f76 61deg 120deg,transparent 121deg 180deg) ,
    repeating-conic-gradient(transparent 0 60deg,#c39f76 61deg 120deg,transparent 121deg 180deg) 50px 50px;
  background-size:100px 100px;
}
.box:nth-child(5) {
  background:conic-gradient(at left center,transparent 0 63.4deg,#c39f76 64deg 116.6deg,transparent 117deg) 0 /100px 100px;
}
.box:nth-child(6) {
  background:conic-gradient(at 0% 50% ,transparent 0 63.4deg,#c39f76 64deg 90deg,transparent 90deg),
             conic-gradient(from 180deg at 100% 50% ,transparent 0 63.4deg,#c39f76 64deg 90deg,transparent 90deg) ;
  background-size:100px 100px;
}
.box:nth-child(7) {
  background:repeating-conic-gradient(#c39f76 0 30deg,transparent 31deg 60deg,#c39f76 61deg 90deg) 50px 50px/100px 100px;
}
.box:nth-child(8) {
  background:
    conic-gradient(from 58deg  at 72% 60% ,#fff 1deg 108deg ,transparent 109deg),
    conic-gradient(from 126deg at 50% 77% ,#fff 1deg 108deg ,transparent 109deg),
    conic-gradient(from 162deg at 50% 0   ,#c39f76 1deg 36deg,transparent 37deg),
    conic-gradient(from 90deg  at 0% 40%  ,#c39f76 1deg 36deg,transparent 37deg);
  background-size:100px 100px;
}
.box:nth-child(9) {
  background:
    conic-gradient(from 90deg at 50% 40%,transparent 1deg 50deg,#fff 51deg 129deg,transparent 130deg),
    conic-gradient(from 90deg at 50% 0  ,transparent 1deg 50deg,#c39f76 51deg 129deg,transparent 130deg);
  background-size:100px 100px;
}
.box:nth-child(10) {
  background:
     conic-gradient(from -90deg at 33.33% 33.33%,#c39f76 0 90deg,transparent 0) 0   0,
     conic-gradient(from -90deg at 33.33% 33.33%,#c39f76 0 90deg,transparent 0) -20px 33.33px,
     conic-gradient(from -90deg at 33.33% 33.33%,#c39f76 0 90deg,transparent 0) -30px 66.66px;
  background-size:100px 100px;
}
.box:nth-child(11) {
  background:
     conic-gradient(from -90deg at 33.33% 33.33%,#c39f76 0 90deg,transparent 0) 0   0,
     conic-gradient(from -90deg at 33.33% 33.33%,#c39f76 0 90deg,transparent 0) 33.33px 33.33px,
     conic-gradient(from -90deg at 33.33% 33.33%,#c39f76 0 90deg,transparent 0) 66.66px 66.66px;
  background-size:100px 100px;
}
// https://css-challenges.com/conic-gradient-patterns/ 
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.