<div class="dots"></div>

<!-- Meet the Daldots! https://twitter.com/ChallengesCss/status/1453730588746084360 -->

body {
  margin:0;
  height:100vh;
  display:grid;
  place-content:center;
  background:#1b818f;
}

.dots {
  width:500px;
  height:200px;
  --r:repeating-linear-gradient(#fdfe1a 0 12px, #000 0 24px);
  background:
    /**/
    radial-gradient(farthest-side,#ce7d390f 98%,#0000) 95.5% 82%/30px 15px,    
    linear-gradient(to bottom left ,#0000 42%,#000 43% 59%,#0000 60%) 92% 70%/11px 7px,    
    linear-gradient(to bottom right,#0000 42%,#000 43% 59%,#0000 60%) 95% 70%/11px 7px,    
    radial-gradient(farthest-side,#000 98%,#0000) 95.5% 74.5%/5px 5px,    
    radial-gradient(farthest-side,#000 98%,#0000) 91% 74.5%/5px 5px,    
    radial-gradient(farthest-side,#fff 98%,#0000) 96.5% 74%/12px 12px,        
    radial-gradient(farthest-side,#fff 98%,#0000) 91% 74%/12px 12px,    
    linear-gradient(to bottom right,#0000 34%,#000 36% 62%,#0000 64%) 94% 81%/13px 5px,
    /**/
    radial-gradient(farthest-side,#ce7d3900 98%,#0000) 75.5% 65.5%/30px 15px,
    linear-gradient(#000 0 0) 77% 55%/12px 2px,
    linear-gradient(to bottom right,#0000 42%,#000 43% 59%,#0000 60%) 71% 54.5%/11px 7px,
    radial-gradient(farthest-side,#000 98%,#0000) 76.5% 59%/5px 5px,
    radial-gradient(farthest-side,#000 98%,#0000) 72% 59%/5px 5px,
    radial-gradient(farthest-side,#fff 98%,#0000) 72% 59%/12px 12px,    
    radial-gradient(farthest-side,#fff 98%,#0000) 77% 59%/12px 12px,
    radial-gradient(farthest-side,#0000 60%,#000 62% 98%,#0000) 74.5% 66%/10px 7px,
    /**/
    linear-gradient(#000 0 0) 44.5% 42%/12px 2px,
    linear-gradient(#000 0 0) 50.5% 42%/12px 2px,
    radial-gradient(farthest-side,#ce7d3900 98%,#0000) 47.5% 50%/30px 15px,
    radial-gradient(farthest-side,#000 98%,#0000) 50.5% 45.5%/5px 5px,
    radial-gradient(farthest-side,#000 98%,#0000) 44.5% 45.5%/5px 5px,
    radial-gradient(farthest-side at top,#fff 98%,#0000) 50.5% 45%/12px 6px,    
    radial-gradient(farthest-side at top,#fff 98%,#0000) 44.5% 45%/12px 6px,
    linear-gradient(#000 0 0) 47.5% 53%/10px 2px,
    /**/
    radial-gradient(farthest-side,#ce7d3900 98%,#0000) 14% 37%/30px 15px,
    linear-gradient(to bottom left,#0000 38%,#000 39% 61%,#0000 62%) 19% 27%/11px 7px,
    linear-gradient(to bottom right,#0000 38%,#000 39% 61%,#0000 62%) 11% 27%/11px 7px,
    radial-gradient(farthest-side,#000 98%,#0000) 19% 33%/5px 5px,
    radial-gradient(farthest-side,#000 98%,#0000) 13.1% 33%/5px 5px,
    radial-gradient(farthest-side,#fff 98%,#0000) 12% 31%/12px 12px,    
    radial-gradient(farthest-side,#fff 98%,#0000) 18% 31%/12px 12px,
    radial-gradient(farthest-side at top,#0000 54%,#000 64% 92%,#0000) 15.2% 38%/12px 6px,
    /**/
    var(--r) 0 100%/160px calc(160px - 50px),    
    var(--r) 47% 100%/130px calc(130px - 50px),    
    var(--r) 80% 100%/100px calc(100px - 40px),    
    var(--r) 100% 100%/70px calc(70px - 40px),    
    #ecb676;
  background-repeat:no-repeat;
  --g:radial-gradient(farthest-side,#000 98%,#0000);
  -webkit-mask:
    var(--g) 0   100% /160px 160px,
    var(--g) 47% 100% /130px 130px,
    var(--g) 80% 100% /100px 100px,
    var(--g) 100% 100%/70px 70px;
   -webkit-mask-repeat:no-repeat;
}