Фон “сетка из точек” с CSS3

https://ru.stackoverflow.com/questions/698718/%D0%9A%D0%B0%D0%BA-%D1%81%D0%B4%D0%B5%D0%BB%D0%B0%D1%82%D1%8C-%D1%84%D0%BE%D0%BD-%D0%B8%D0%B7-%D1%82%D0%BE%D1%87%D0%B5%D0%BA-%D0%BD%D0%B0-css/698751

by akogch

HTML

<!-- Взял здесь – https://ru.stackoverflow.com/questions/698718/%D0%9A%D0%B0%D0%BA-%D1%81%D0%B4%D0%B5%D0%BB%D0%B0%D1%82%D1%8C-%D1%84%D0%BE%D0%BD-%D1%81%D0%B5%D1%82%D0%BA%D1%83-%D0%B8%D0%B7-%D1%82%D0%BE%D1%87%D0%B5%D0%BA-%D1%81-%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E-css3/698751#698751
 -->
<div class="dotted"></div>
<!-- Градиент -->
<div class="bg"></div>
<div class="bg2"></div>

<!-- SVG pattern -->
<svg width="400" height="400" viewBox="0 0 400 400">
  <defs>
    <pattern
      id="patt"
      x="0"
      y="0"
      width="4"
      height="4"
      patternUnits="userSpaceOnUse"
    >
      <circle cx="2" cy="2" r="1" fill="grey" opacity="0.2" />
    </pattern>
  </defs>
  <rect width="100%" height="100%" style="stroke: #000000; fill: url(#patt);" />
</svg>

<!-- SVG pattern black-->
<svg width="400" height="400" viewBox="0 0 400 400">
  <defs>
    <pattern
      id="patt"
      x="0"
      y="0"
      width="3"
      height="3"
      patternUnits="userSpaceOnUse"
    >
      <g>
        <circle cx="3" cy="3" r="3" fill="black" />
        <circle cx="3" cy="3" r="1" fill="white" />
      </g>
    </pattern>
  </defs>
  <rect width="100%" height="100%" style="stroke: #000000; fill: url(#patt);" />
</svg>

CSS

html,
body * {
  height: 100%;
}

.dotted {
  padding: 2.25em 1.6875em;
  background-image: -webkit-repeating-radial-gradient(
    center center,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2) 1px,
    transparent 1px,
    transparent 100%
  );
  background-image: -moz-repeating-radial-gradient(
    center center,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2) 1px,
    transparent 1px,
    transparent 100%
  );
  background-image: -ms-repeating-radial-gradient(
    center center,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2) 1px,
    transparent 1px,
    transparent 100%
  );
  background-image: repeating-radial-gradient(
    center center,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2) 1px,
    transparent 1px,
    transparent 100%
  );
  -webkit-background-size: 3px 3px;
  -moz-background-size: 3px 3px;
  background-size: 3px 3px;
  width: 100%;
  height: 50px;
}

/* Class bg */

.bg {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="3" height="3"><circle r="1" fill="%23888" /></svg>')
    repeat;
  height: 50px;
  width: 100%;
}

.bg2 {
  width: 100%;
  height: 50px;
  background:
    radial-gradient(#000 5%, transparent 20%) 0 0,
    radial-gradient(rgba(0, 0, 0, 0.1) 1%, transparent 1%) 50px 50px;
  background-color: #fff;
  background-size: 5px 5px;
}