<div class="dotcss"></div>
width: 1000px;
height: 450px;
background-color: #1D1A16;
&:before {
content:"";
height: 300px;
width: 300px;
border-radius: 50%;
background: #F9DF1C;
position: absolute;
left: 60px;
top: 40px;
}
&:before {
  box-shadow: -193px -173px 0px -142px red,
               700px -100px 0px -100px blue,
               300px   75px 0px -100px green;
}
$circles: ();
@for $y from 0 to 20 {
 @for $x from 0 to 45 {
   $left: (-193px + ($x * 22px));
   $top: (-173px + ($y * 22px));
   $circles: append($circles, ($left) ($top) 0px (-142px) #000000, comma);
 }
}
box-shadow: $circles;
box-shadow: 247px 135px 0px -142px #F9DF1C,
            269px 157px 0px -142px #F9DF1C,
            […],
            599px 157px 0px -142px #F9DF1C,
            555px 179px 0px -142px #F9DF1C,
            577px 179px 0px -142px #F9DF1C;
&:before {
  content:"dot";
  color: black;
  text-align: center;
  line-height: 300px;
}
&:after {
  content:"CSS";
  color: white;
  position: absolute;
  top: 40px;
  left: 375px;
}
&:before {
 content: "dot\A CSS";
 white-space: pre;
 color: transparent;
 text-shadow: 
   315px -300px 0px white;
}
&:first-line {
 color: black;
 text-shadow: none;
 font-family: Arial;
 font-size: 100px;
 line-height: 300px;
}
Thank you
github.com/pixelastic/dotcss-onediv
@pixelastic
Algolia