HTML-CSS: Polka dot background pattern

Tanveer Ahmad


HTML:

<div class="container">
  <h1>@CodeWithTanveer</h1>
   <div class="line" style="--j:1">
   <div class="dot" style="--i:0"></div>
   <div class="dot" style="--i:1"></div>
   <div class="dot" style="--i:2"></div>
   <div class="dot" style="--i:3"></div>
   <div class="dot" style="--i:4"></div>
   <div class="dot" style="--i:5"></div>
   <div class="dot" style="--i:6"></div>
   <div class="dot" style="--i:7"></div>
   <div class="dot" style="--i:8"></div>
   <div class="dot" style="--i:9"></div>
   <div class="dot" style="--i:10"></div>
   <div class="dot" style="--i:11"></div>
   <div class="dot" style="--i:12"></div>
   <div class="dot" style="--i:13"></div>
   <div class="dot" style="--i:14"></div>
   <div class="dot" style="--i:15"></div>
   <div class="dot" style="--i:16"></div>
  </div>
  <div class="line" style="--j:2">
   <div class="dot" style="--i:0"></div>
   <div class="dot" style="--i:1"></div>
   <div class="dot" style="--i:2"></div>
   <div class="dot" style="--i:3"></div>
   <div class="dot" style="--i:4"></div>
   <div class="dot" style="--i:5"></div>
   <div class="dot" style="--i:6"></div>
   <div class="dot" style="--i:7"></div>
   <div class="dot" style="--i:8"></div>
   <div class="dot" style="--i:9"></div>
   <div class="dot" style="--i:10"></div>
   <div class="dot" style="--i:11"></div>
   <div class="dot" style="--i:12"></div>
   <div class="dot" style="--i:13"></div>
   <div class="dot" style="--i:14"></div>
   <div class="dot" style="--i:15"></div>
   <div class="dot" style="--i:16"></div>
  </div>
  <div class="line" style="--j:3">
   <div class="dot" style="--i:0"></div>
   <div class="dot" style="--i:1"></div>
   <div class="dot" style="--i:2"></div>
   <div class="dot" style="--i:3"></div>
   <div class="dot" style="--i:4"></div>
   <div class="dot" style="--i:5"></div>
   <div class="dot" style="--i:6"></div>
   <div class="dot" style="--i:7"></div>
   <div class="dot" style="--i:8"></div>
   <div class="dot" style="--i:9"></div>
   <div class="dot" style="--i:10"></div>
   <div class="dot" style="--i:11"></div>
   <div class="dot" style="--i:12"></div>
   <div class="dot" style="--i:13"></div>
   <div class="dot" style="--i:14"></div>
   <div class="dot" style="--i:15"></div>
   <div class="dot" style="--i:16"></div>
  </div>
  <div class="line" style="--j:4">
   <div class="dot" style="--i:0"></div>
   <div class="dot" style="--i:1"></div>
   <div class="dot" style="--i:2"></div>
   <div class="dot" style="--i:3"></div>
   <div class="dot" style="--i:4"></div>
   <div class="dot" style="--i:5"></div>
   <div class="dot" style="--i:6"></div>
   <div class="dot" style="--i:7"></div>
   <div class="dot" style="--i:8"></div>
   <div class="dot" style="--i:9"></div>
   <div class="dot" style="--i:10"></div>
   <div class="dot" style="--i:11"></div>
   <div class="dot" style="--i:12"></div>
   <div class="dot" style="--i:13"></div>
   <div class="dot" style="--i:14"></div>
   <div class="dot" style="--i:15"></div>
   <div class="dot" style="--i:16"></div>
  </div>
  <div class="line" style="--j:5">
   <div class="dot" style="--i:0"></div>
   <div class="dot" style="--i:1"></div>
   <div class="dot" style="--i:2"></div>
   <div class="dot" style="--i:3"></div>
   <div class="dot" style="--i:4"></div>
   <div class="dot" style="--i:5"></div>
   <div class="dot" style="--i:6"></div>
   <div class="dot" style="--i:7"></div>
   <div class="dot" style="--i:8"></div>
   <div class="dot" style="--i:9"></div>
   <div class="dot" style="--i:10"></div>
   <div class="dot" style="--i:11"></div>
   <div class="dot" style="--i:12"></div>
   <div class="dot" style="--i:13"></div>
   <div class="dot" style="--i:14"></div>
   <div class="dot" style="--i:15"></div>
   <div class="dot" style="--i:16"></div>
  </div>
  <div class="line" style="--j:6">
   <div class="dot" style="--i:0"></div>
   <div class="dot" style="--i:1"></div>
   <div class="dot" style="--i:2"></div>
   <div class="dot" style="--i:3"></div>
   <div class="dot" style="--i:4"></div>
   <div class="dot" style="--i:5"></div>
   <div class="dot" style="--i:6"></div>
   <div class="dot" style="--i:7"></div>
   <div class="dot" style="--i:8"></div>
   <div class="dot" style="--i:9"></div>
   <div class="dot" style="--i:10"></div>
   <div class="dot" style="--i:11"></div>
   <div class="dot" style="--i:12"></div>
   <div class="dot" style="--i:13"></div>
   <div class="dot" style="--i:14"></div>
   <div class="dot" style="--i:15"></div>
   <div class="dot" style="--i:16"></div>
  </div>
  <div class="line" style="--j:7">
   <div class="dot" style="--i:0"></div>
   <div class="dot" style="--i:1"></div>
   <div class="dot" style="--i:2"></div>
   <div class="dot" style="--i:3"></div>
   <div class="dot" style="--i:4"></div>
   <div class="dot" style="--i:5"></div>
   <div class="dot" style="--i:6"></div>
   <div class="dot" style="--i:7"></div>
   <div class="dot" style="--i:8"></div>
   <div class="dot" style="--i:9"></div>
   <div class="dot" style="--i:10"></div>
   <div class="dot" style="--i:11"></div>
   <div class="dot" style="--i:12"></div>
   <div class="dot" style="--i:13"></div>
   <div class="dot" style="--i:14"></div>
   <div class="dot" style="--i:15"></div>
   <div class="dot" style="--i:16"></div>
  </div>
  <div class="line" style="--j:8">
   <div class="dot" style="--i:0"></div>
   <div class="dot" style="--i:1"></div>
   <div class="dot" style="--i:2"></div>
   <div class="dot" style="--i:3"></div>
   <div class="dot" style="--i:4"></div>
   <div class="dot" style="--i:5"></div>
   <div class="dot" style="--i:6"></div>
   <div class="dot" style="--i:7"></div>
   <div class="dot" style="--i:8"></div>
   <div class="dot" style="--i:9"></div>
   <div class="dot" style="--i:10"></div>
   <div class="dot" style="--i:11"></div>
   <div class="dot" style="--i:12"></div>
   <div class="dot" style="--i:13"></div>
   <div class="dot" style="--i:14"></div>
   <div class="dot" style="--i:15"></div>
   <div class="dot" style="--i:16"></div>
  </div>
  <div class="line" style="--j:9">
   <div class="dot" style="--i:0"></div>
   <div class="dot" style="--i:1"></div>
   <div class="dot" style="--i:2"></div>
   <div class="dot" style="--i:3"></div>
   <div class="dot" style="--i:4"></div>
   <div class="dot" style="--i:5"></div>
   <div class="dot" style="--i:6"></div>
   <div class="dot" style="--i:7"></div>
   <div class="dot" style="--i:8"></div>
   <div class="dot" style="--i:9"></div>
   <div class="dot" style="--i:10"></div>
   <div class="dot" style="--i:11"></div>
   <div class="dot" style="--i:12"></div>
   <div class="dot" style="--i:13"></div>
   <div class="dot" style="--i:14"></div>
   <div class="dot" style="--i:15"></div>
   <div class="dot" style="--i:16"></div>
  </div>
  <div class="line" style="--j:10">
   <div class="dot" style="--i:0"></div>
   <div class="dot" style="--i:1"></div>
   <div class="dot" style="--i:2"></div>
   <div class="dot" style="--i:3"></div>
   <div class="dot" style="--i:4"></div>
   <div class="dot" style="--i:5"></div>
   <div class="dot" style="--i:6"></div>
   <div class="dot" style="--i:7"></div>
   <div class="dot" style="--i:8"></div>
   <div class="dot" style="--i:9"></div>
   <div class="dot" style="--i:10"></div>
   <div class="dot" style="--i:11"></div>
   <div class="dot" style="--i:12"></div>
   <div class="dot" style="--i:13"></div>
   <div class="dot" style="--i:14"></div>
   <div class="dot" style="--i:15"></div>
   <div class="dot" style="--i:16"></div>
  </div>
  <div class="line" style="--j:11">
   <div class="dot" style="--i:0"></div>
   <div class="dot" style="--i:1"></div>
   <div class="dot" style="--i:2"></div>
   <div class="dot" style="--i:3"></div>
   <div class="dot" style="--i:4"></div>
   <div class="dot" style="--i:5"></div>
   <div class="dot" style="--i:6"></div>
   <div class="dot" style="--i:7"></div>
   <div class="dot" style="--i:8"></div>
   <div class="dot" style="--i:9"></div>
   <div class="dot" style="--i:10"></div>
   <div class="dot" style="--i:11"></div>
   <div class="dot" style="--i:12"></div>
   <div class="dot" style="--i:13"></div>
   <div class="dot" style="--i:14"></div>
   <div class="dot" style="--i:15"></div>
   <div class="dot" style="--i:16"></div>
  </div>
  <div class="line" style="--j:12">
   <div class="dot" style="--i:0"></div>
   <div class="dot" style="--i:1"></div>
   <div class="dot" style="--i:2"></div>
   <div class="dot" style="--i:3"></div>
   <div class="dot" style="--i:4"></div>
   <div class="dot" style="--i:5"></div>
   <div class="dot" style="--i:6"></div>
   <div class="dot" style="--i:7"></div>
   <div class="dot" style="--i:8"></div>
   <div class="dot" style="--i:9"></div>
   <div class="dot" style="--i:10"></div>
   <div class="dot" style="--i:11"></div>
   <div class="dot" style="--i:12"></div>
   <div class="dot" style="--i:13"></div>
   <div class="dot" style="--i:14"></div>
   <div class="dot" style="--i:15"></div>
   <div class="dot" style="--i:16"></div>
  </div>
  <div class="line" style="--j:13">
   <div class="dot" style="--i:0"></div>
   <div class="dot" style="--i:1"></div>
   <div class="dot" style="--i:2"></div>
   <div class="dot" style="--i:3"></div>
   <div class="dot" style="--i:4"></div>
   <div class="dot" style="--i:5"></div>
   <div class="dot" style="--i:6"></div>
   <div class="dot" style="--i:7"></div>
   <div class="dot" style="--i:8"></div>
   <div class="dot" style="--i:9"></div>
   <div class="dot" style="--i:10"></div>
   <div class="dot" style="--i:11"></div>
   <div class="dot" style="--i:12"></div>
   <div class="dot" style="--i:13"></div>
   <div class="dot" style="--i:14"></div>
   <div class="dot" style="--i:15"></div>
   <div class="dot" style="--i:16"></div>
  </div>
  <div class="line" style="--j:14">
   <div class="dot" style="--i:0"></div>
   <div class="dot" style="--i:1"></div>
   <div class="dot" style="--i:2"></div>
   <div class="dot" style="--i:3"></div>
   <div class="dot" style="--i:4"></div>
   <div class="dot" style="--i:5"></div>
   <div class="dot" style="--i:6"></div>
   <div class="dot" style="--i:7"></div>
   <div class="dot" style="--i:8"></div>
   <div class="dot" style="--i:9"></div>
   <div class="dot" style="--i:10"></div>
   <div class="dot" style="--i:11"></div>
   <div class="dot" style="--i:12"></div>
   <div class="dot" style="--i:13"></div>
   <div class="dot" style="--i:14"></div>
   <div class="dot" style="--i:15"></div>
   <div class="dot" style="--i:16"></div>
  </div>
  <div class="line" style="--j:15">
   <div class="dot" style="--i:0"></div>
   <div class="dot" style="--i:1"></div>
   <div class="dot" style="--i:2"></div>
   <div class="dot" style="--i:3"></div>
   <div class="dot" style="--i:4"></div>
   <div class="dot" style="--i:5"></div>
   <div class="dot" style="--i:6"></div>
   <div class="dot" style="--i:7"></div>
   <div class="dot" style="--i:8"></div>
   <div class="dot" style="--i:9"></div>
   <div class="dot" style="--i:10"></div>
   <div class="dot" style="--i:11"></div>
   <div class="dot" style="--i:12"></div>
   <div class="dot" style="--i:13"></div>
   <div class="dot" style="--i:14"></div>
   <div class="dot" style="--i:15"></div>
   <div class="dot" style="--i:16"></div>
  </div>
  <div class="line" style="--j:16">
   <div class="dot" style="--i:0"></div>
   <div class="dot" style="--i:1"></div>
   <div class="dot" style="--i:2"></div>
   <div class="dot" style="--i:3"></div>
   <div class="dot" style="--i:4"></div>
   <div class="dot" style="--i:5"></div>
   <div class="dot" style="--i:6"></div>
   <div class="dot" style="--i:7"></div>
   <div class="dot" style="--i:8"></div>
   <div class="dot" style="--i:9"></div>
   <div class="dot" style="--i:10"></div>
   <div class="dot" style="--i:11"></div>
   <div class="dot" style="--i:12"></div>
   <div class="dot" style="--i:13"></div>
   <div class="dot" style="--i:14"></div>
   <div class="dot" style="--i:15"></div>
   <div class="dot" style="--i:16"></div>
  </div>
  <div class="line" style="--j:17">
   <div class="dot" style="--i:0"></div>
   <div class="dot" style="--i:1"></div>
   <div class="dot" style="--i:2"></div>
   <div class="dot" style="--i:3"></div>
   <div class="dot" style="--i:4"></div>
   <div class="dot" style="--i:5"></div>
   <div class="dot" style="--i:6"></div>
   <div class="dot" style="--i:7"></div>
   <div class="dot" style="--i:8"></div>
   <div class="dot" style="--i:9"></div>
   <div class="dot" style="--i:10"></div>
   <div class="dot" style="--i:11"></div>
   <div class="dot" style="--i:12"></div>
   <div class="dot" style="--i:13"></div>
   <div class="dot" style="--i:14"></div>
   <div class="dot" style="--i:15"></div>
   <div class="dot" style="--i:16"></div>
  </div>
  <div class="line" style="--j:18">
   <div class="dot" style="--i:0"></div>
   <div class="dot" style="--i:1"></div>
   <div class="dot" style="--i:2"></div>
   <div class="dot" style="--i:3"></div>
   <div class="dot" style="--i:4"></div>
   <div class="dot" style="--i:5"></div>
   <div class="dot" style="--i:6"></div>
   <div class="dot" style="--i:7"></div>
   <div class="dot" style="--i:8"></div>
   <div class="dot" style="--i:9"></div>
   <div class="dot" style="--i:10"></div>
   <div class="dot" style="--i:11"></div>
   <div class="dot" style="--i:12"></div>
   <div class="dot" style="--i:13"></div>
   <div class="dot" style="--i:14"></div>
   <div class="dot" style="--i:15"></div>
   <div class="dot" style="--i:16"></div>
  </div>
  <div class="line" style="--j:19">
   <div class="dot" style="--i:0"></div>
   <div class="dot" style="--i:1"></div>
   <div class="dot" style="--i:2"></div>
   <div class="dot" style="--i:3"></div>
   <div class="dot" style="--i:4"></div>
   <div class="dot" style="--i:5"></div>
   <div class="dot" style="--i:6"></div>
   <div class="dot" style="--i:7"></div>
   <div class="dot" style="--i:8"></div>
   <div class="dot" style="--i:9"></div>
   <div class="dot" style="--i:10"></div>
   <div class="dot" style="--i:11"></div>
   <div class="dot" style="--i:12"></div>
   <div class="dot" style="--i:13"></div>
   <div class="dot" style="--i:14"></div>
   <div class="dot" style="--i:15"></div>
   <div class="dot" style="--i:16"></div>
  </div>
  <div class="line" style="--j:20">
   <div class="dot" style="--i:0"></div>
   <div class="dot" style="--i:1"></div>
   <div class="dot" style="--i:2"></div>
   <div class="dot" style="--i:3"></div>
   <div class="dot" style="--i:4"></div>
   <div class="dot" style="--i:5"></div>
   <div class="dot" style="--i:6"></div>
   <div class="dot" style="--i:7"></div>
   <div class="dot" style="--i:8"></div>
   <div class="dot" style="--i:9"></div>
   <div class="dot" style="--i:10"></div>
   <div class="dot" style="--i:11"></div>
   <div class="dot" style="--i:12"></div>
   <div class="dot" style="--i:13"></div>
   <div class="dot" style="--i:14"></div>
   <div class="dot" style="--i:15"></div>
   <div class="dot" style="--i:16"></div>
  </div>
  <div class="line" style="--j:21">
   <div class="dot" style="--i:0"></div>
   <div class="dot" style="--i:1"></div>
   <div class="dot" style="--i:2"></div>
   <div class="dot" style="--i:3"></div>
   <div class="dot" style="--i:4"></div>
   <div class="dot" style="--i:5"></div>
   <div class="dot" style="--i:6"></div>
   <div class="dot" style="--i:7"></div>
   <div class="dot" style="--i:8"></div>
   <div class="dot" style="--i:9"></div>
   <div class="dot" style="--i:10"></div>
   <div class="dot" style="--i:11"></div>
   <div class="dot" style="--i:12"></div>
   <div class="dot" style="--i:13"></div>
   <div class="dot" style="--i:14"></div>
   <div class="dot" style="--i:15"></div>
   <div class="dot" style="--i:16"></div>
  </div>
  <div class="line" style="--j:22">
   <div class="dot" style="--i:0"></div>
   <div class="dot" style="--i:1"></div>
   <div class="dot" style="--i:2"></div>
   <div class="dot" style="--i:3"></div>
   <div class="dot" style="--i:4"></div>
   <div class="dot" style="--i:5"></div>
   <div class="dot" style="--i:6"></div>
   <div class="dot" style="--i:7"></div>
   <div class="dot" style="--i:8"></div>
   <div class="dot" style="--i:9"></div>
   <div class="dot" style="--i:10"></div>
   <div class="dot" style="--i:11"></div>
   <div class="dot" style="--i:12"></div>
   <div class="dot" style="--i:13"></div>
   <div class="dot" style="--i:14"></div>
   <div class="dot" style="--i:15"></div>
   <div class="dot" style="--i:16"></div>
  </div>
  <div class="line" style="--j:23">
   <div class="dot" style="--i:0"></div>
   <div class="dot" style="--i:1"></div>
   <div class="dot" style="--i:2"></div>
   <div class="dot" style="--i:3"></div>
   <div class="dot" style="--i:4"></div>
   <div class="dot" style="--i:5"></div>
   <div class="dot" style="--i:6"></div>
   <div class="dot" style="--i:7"></div>
   <div class="dot" style="--i:8"></div>
   <div class="dot" style="--i:9"></div>
   <div class="dot" style="--i:10"></div>
   <div class="dot" style="--i:11"></div>
   <div class="dot" style="--i:12"></div>
   <div class="dot" style="--i:13"></div>
   <div class="dot" style="--i:14"></div>
   <div class="dot" style="--i:15"></div>
   <div class="dot" style="--i:16"></div>
  </div>
  <div class="line" style="--j:24">
   <div class="dot" style="--i:0"></div>
   <div class="dot" style="--i:1"></div>
   <div class="dot" style="--i:2"></div>
   <div class="dot" style="--i:3"></div>
   <div class="dot" style="--i:4"></div>
   <div class="dot" style="--i:5"></div>
   <div class="dot" style="--i:6"></div>
   <div class="dot" style="--i:7"></div>
   <div class="dot" style="--i:8"></div>
   <div class="dot" style="--i:9"></div>
   <div class="dot" style="--i:10"></div>
   <div class="dot" style="--i:11"></div>
   <div class="dot" style="--i:12"></div>
   <div class="dot" style="--i:13"></div>
   <div class="dot" style="--i:14"></div>
   <div class="dot" style="--i:15"></div>
   <div class="dot" style="--i:16"></div>
  </div>
  <div class="line" style="--j:25">
   <div class="dot" style="--i:0"></div>
   <div class="dot" style="--i:1"></div>
   <div class="dot" style="--i:2"></div>
   <div class="dot" style="--i:3"></div>
   <div class="dot" style="--i:4"></div>
   <div class="dot" style="--i:5"></div>
   <div class="dot" style="--i:6"></div>
   <div class="dot" style="--i:7"></div>
   <div class="dot" style="--i:8"></div>
   <div class="dot" style="--i:9"></div>
   <div class="dot" style="--i:10"></div>
   <div class="dot" style="--i:11"></div>
   <div class="dot" style="--i:12"></div>
   <div class="dot" style="--i:13"></div>
   <div class="dot" style="--i:14"></div>
   <div class="dot" style="--i:15"></div>
   <div class="dot" style="--i:16"></div>
  </div>
  <div class="line" style="--j:26">
   <div class="dot" style="--i:0"></div>
   <div class="dot" style="--i:1"></div>
   <div class="dot" style="--i:2"></div>
   <div class="dot" style="--i:3"></div>
   <div class="dot" style="--i:4"></div>
   <div class="dot" style="--i:5"></div>
   <div class="dot" style="--i:6"></div>
   <div class="dot" style="--i:7"></div>
   <div class="dot" style="--i:8"></div>
   <div class="dot" style="--i:9"></div>
   <div class="dot" style="--i:10"></div>
   <div class="dot" style="--i:11"></div>
   <div class="dot" style="--i:12"></div>
   <div class="dot" style="--i:13"></div>
   <div class="dot" style="--i:14"></div>
   <div class="dot" style="--i:15"></div>
   <div class="dot" style="--i:16"></div>
  </div>
  <div class="line" style="--j:27">
   <div class="dot" style="--i:0"></div>
   <div class="dot" style="--i:1"></div>
   <div class="dot" style="--i:2"></div>
   <div class="dot" style="--i:3"></div>
   <div class="dot" style="--i:4"></div>
   <div class="dot" style="--i:5"></div>
   <div class="dot" style="--i:6"></div>
   <div class="dot" style="--i:7"></div>
   <div class="dot" style="--i:8"></div>
   <div class="dot" style="--i:9"></div>
   <div class="dot" style="--i:10"></div>
   <div class="dot" style="--i:11"></div>
   <div class="dot" style="--i:12"></div>
   <div class="dot" style="--i:13"></div>
   <div class="dot" style="--i:14"></div>
   <div class="dot" style="--i:15"></div>
   <div class="dot" style="--i:16"></div>
  </div>
  <div class="line" style="--j:28">
   <div class="dot" style="--i:0"></div>
   <div class="dot" style="--i:1"></div>
   <div class="dot" style="--i:2"></div>
   <div class="dot" style="--i:3"></div>
   <div class="dot" style="--i:4"></div>
   <div class="dot" style="--i:5"></div>
   <div class="dot" style="--i:6"></div>
   <div class="dot" style="--i:7"></div>
   <div class="dot" style="--i:8"></div>
   <div class="dot" style="--i:9"></div>
   <div class="dot" style="--i:10"></div>
   <div class="dot" style="--i:11"></div>
   <div class="dot" style="--i:12"></div>
   <div class="dot" style="--i:13"></div>
   <div class="dot" style="--i:14"></div>
   <div class="dot" style="--i:15"></div>
   <div class="dot" style="--i:16"></div>
  </div>
  <div class="line" style="--j:29">
   <div class="dot" style="--i:0"></div>
   <div class="dot" style="--i:1"></div>
   <div class="dot" style="--i:2"></div>
   <div class="dot" style="--i:3"></div>
   <div class="dot" style="--i:4"></div>
   <div class="dot" style="--i:5"></div>
   <div class="dot" style="--i:6"></div>
   <div class="dot" style="--i:7"></div>
   <div class="dot" style="--i:8"></div>
   <div class="dot" style="--i:9"></div>
   <div class="dot" style="--i:10"></div>
   <div class="dot" style="--i:11"></div>
   <div class="dot" style="--i:12"></div>
   <div class="dot" style="--i:13"></div>
   <div class="dot" style="--i:14"></div>
   <div class="dot" style="--i:15"></div>
   <div class="dot" style="--i:16"></div>
  </div>
  <div class="line" style="--j:30">
   <div class="dot" style="--i:0"></div>
   <div class="dot" style="--i:1"></div>
   <div class="dot" style="--i:2"></div>
   <div class="dot" style="--i:3"></div>
   <div class="dot" style="--i:4"></div>
   <div class="dot" style="--i:5"></div>
   <div class="dot" style="--i:6"></div>
   <div class="dot" style="--i:7"></div>
   <div class="dot" style="--i:8"></div>
   <div class="dot" style="--i:9"></div>
   <div class="dot" style="--i:10"></div>
   <div class="dot" style="--i:11"></div>
   <div class="dot" style="--i:12"></div>
   <div class="dot" style="--i:13"></div>
   <div class="dot" style="--i:14"></div>
   <div class="dot" style="--i:15"></div>
   <div class="dot" style="--i:16"></div>
  </div>
  <div class="line" style="--j:31">
   <div class="dot" style="--i:0"></div>
   <div class="dot" style="--i:1"></div>
   <div class="dot" style="--i:2"></div>
   <div class="dot" style="--i:3"></div>
   <div class="dot" style="--i:4"></div>
   <div class="dot" style="--i:5"></div>
   <div class="dot" style="--i:6"></div>
   <div class="dot" style="--i:7"></div>
   <div class="dot" style="--i:8"></div>
   <div class="dot" style="--i:9"></div>
   <div class="dot" style="--i:10"></div>
   <div class="dot" style="--i:11"></div>
   <div class="dot" style="--i:12"></div>
   <div class="dot" style="--i:13"></div>
   <div class="dot" style="--i:14"></div>
   <div class="dot" style="--i:15"></div>
   <div class="dot" style="--i:16"></div>
  </div>
  <div class="line" style="--j:32">
   <div class="dot" style="--i:0"></div>
   <div class="dot" style="--i:1"></div>
   <div class="dot" style="--i:2"></div>
   <div class="dot" style="--i:3"></div>
   <div class="dot" style="--i:4"></div>
   <div class="dot" style="--i:5"></div>
   <div class="dot" style="--i:6"></div>
   <div class="dot" style="--i:7"></div>
   <div class="dot" style="--i:8"></div>
   <div class="dot" style="--i:9"></div>
   <div class="dot" style="--i:10"></div>
   <div class="dot" style="--i:11"></div>
   <div class="dot" style="--i:12"></div>
   <div class="dot" style="--i:13"></div>
   <div class="dot" style="--i:14"></div>
   <div class="dot" style="--i:15"></div>
   <div class="dot" style="--i:16"></div>
  </div>
  <div class="line" style="--j:33">
   <div class="dot" style="--i:0"></div>
   <div class="dot" style="--i:1"></div>
   <div class="dot" style="--i:2"></div>
   <div class="dot" style="--i:3"></div>
   <div class="dot" style="--i:4"></div>
   <div class="dot" style="--i:5"></div>
   <div class="dot" style="--i:6"></div>
   <div class="dot" style="--i:7"></div>
   <div class="dot" style="--i:8"></div>
   <div class="dot" style="--i:9"></div>
   <div class="dot" style="--i:10"></div>
   <div class="dot" style="--i:11"></div>
   <div class="dot" style="--i:12"></div>
   <div class="dot" style="--i:13"></div>
   <div class="dot" style="--i:14"></div>
   <div class="dot" style="--i:15"></div>
   <div class="dot" style="--i:16"></div>
  </div>
  <div class="line" style="--j:34">
   <div class="dot" style="--i:0"></div>
   <div class="dot" style="--i:1"></div>
   <div class="dot" style="--i:2"></div>
   <div class="dot" style="--i:3"></div>
   <div class="dot" style="--i:4"></div>
   <div class="dot" style="--i:5"></div>
   <div class="dot" style="--i:6"></div>
   <div class="dot" style="--i:7"></div>
   <div class="dot" style="--i:8"></div>
   <div class="dot" style="--i:9"></div>
   <div class="dot" style="--i:10"></div>
   <div class="dot" style="--i:11"></div>
   <div class="dot" style="--i:12"></div>
   <div class="dot" style="--i:13"></div>
   <div class="dot" style="--i:14"></div>
   <div class="dot" style="--i:15"></div>
   <div class="dot" style="--i:16"></div>
  </div>
  <div class="line" style="--j:35">
   <div class="dot" style="--i:0"></div>
   <div class="dot" style="--i:1"></div>
   <div class="dot" style="--i:2"></div>
   <div class="dot" style="--i:3"></div>
   <div class="dot" style="--i:4"></div>
   <div class="dot" style="--i:5"></div>
   <div class="dot" style="--i:6"></div>
   <div class="dot" style="--i:7"></div>
   <div class="dot" style="--i:8"></div>
   <div class="dot" style="--i:9"></div>
   <div class="dot" style="--i:10"></div>
   <div class="dot" style="--i:11"></div>
   <div class="dot" style="--i:12"></div>
   <div class="dot" style="--i:13"></div>
   <div class="dot" style="--i:14"></div>
   <div class="dot" style="--i:15"></div>
   <div class="dot" style="--i:16"></div>
  </div>
  <div class="line" style="--j:36">
   <div class="dot" style="--i:0"></div>
   <div class="dot" style="--i:1"></div>
   <div class="dot" style="--i:2"></div>
   <div class="dot" style="--i:3"></div>
   <div class="dot" style="--i:4"></div>
   <div class="dot" style="--i:5"></div>
   <div class="dot" style="--i:6"></div>
   <div class="dot" style="--i:7"></div>
   <div class="dot" style="--i:8"></div>
   <div class="dot" style="--i:9"></div>
   <div class="dot" style="--i:10"></div>
   <div class="dot" style="--i:11"></div>
   <div class="dot" style="--i:12"></div>
   <div class="dot" style="--i:13"></div>
   <div class="dot" style="--i:14"></div>
   <div class="dot" style="--i:15"></div>
   <div class="dot" style="--i:16"></div>
  </div>


CSS:

    :root{
   --size : 3px;
  }
  body{
   background-color : #111;
   overflow: hidden;
  }
  .container{
   position:absolute;
   top:50%;left:50%;
   transform: translate(-50%,-50%);
   width: 1100px;
   height:1100px;
  }
  h1{
   color:white;
   position: absolute;
   top:50%;left:50%;
   transform: translate(-50%,-50%);
   font-size:25px;
  }
  .line{
   position: absolute;
   top: 58%;
   left: 56.5%;
   transform-style: preserve-3d;
   perspective: 1000px;
   transform-origin: -80px -80px;
   transform: translate(-50%,-50%) rotateZ(calc(var(--j) * 10deg));
  }
  .dot{
   position: absolute;
   border-radius: 50%;
   background-color:rgb(227, 177, 11);
   width:calc(var(--i) * var(--size));
   height:calc(var(--i) * var(--size));
   animation: stre 6s linear calc(var(--j)*0.04s) infinite;
  }
  @keyframes stre {
   0%{
    top:calc(calc(var(--i) * var(--i)) * 2px);
   }
   20%{
    top:calc(calc(var(--i) * var(--i)) * 4px);
   }
   40%{
    top:calc(calc(var(--i) * var(--i)) * 6px);
   }
   60%{
    top:calc(calc(var(--i) * var(--i)) * 8px);
   }
   80%{
    top:calc(calc(var(--i) * var(--i)) * 10px);
   }
   100%{
    top:calc(calc(var(--i) * var(--i)) * 12px);
   }
  }





1 Comments

  1. Anonymous4 July 2023 at 15:39

    Very powerfull article
    Elegant blog

    ReplyDelete