svgを含めて画像をいっさい使わずCSSだけで作るパターンのまとめです。各サンプルの上側がCSSのソース、下側が実際に要素のbackgroundに表示したパターンです。

サンプル1

  background: radial-gradient(#cbf 20%, transparent 0), radial-gradient(#cbf 20%, transparent 0);
  background-position: 0 0, 4px 4px;
  background-size: 8px 8px;

サンプル2

  background: radial-gradient(#bcf 20%, transparent 0), radial-gradient(#bcf 20%, transparent 0);
  background-position: 0 0, 6px 6px;
  background-size: 12px 12px;

サンプル3

  background: radial-gradient(#9ef 20%, transparent 0), radial-gradient(#9ef 20%, transparent 0);
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;

サンプル4

  background: radial-gradient(#9e9 2px, transparent 0), radial-gradient(#9e9 2px, transparent 0);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;

サンプル5

  background: radial-gradient(#be9 3px, transparent 0), radial-gradient(#be9 3px, transparent 0);
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;

サンプル6

  background: radial-gradient(#fda 4px, transparent 0), radial-gradient(#fda 4px, transparent 0);
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;

サンプル7

  background: radial-gradient(#fdd 5px, transparent 0), radial-gradient(#fdd 5px, transparent 0);
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;

サンプル8

  background: radial-gradient(#fce 6px, transparent 0), radial-gradient(#fce 6px, transparent 0);
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;

サンプル9

  background: radial-gradient(#ecf 7px, transparent 0), radial-gradient(#ecf 7px, transparent 0);
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;

サンプル10

  background: linear-gradient(-45deg,#fff 25%,#bbf 25%,#bbf 50%,#fff 50%,#fff 75%,#bbf 75%,#bbf);
  background-size: 4px 4px;

サンプル11

  background: linear-gradient(-45deg,#fff 25%,#adf 25%,#adf 50%,#fff 50%,#fff 75%,#adf 75%,#adf);
  background-size: 5px 5px;

サンプル12

  background: linear-gradient(-45deg,#fff 25%,#9ff 25%,#9ff 50%,#fff 50%,#fff 75%,#9ff 75%,#9ff);
  background-size: 6px 6px;

サンプル13

  background: linear-gradient(-45deg,#fff 25%,#8fb 25%,#8fb 50%,#fff 50%,#fff 75%,#8fb 75%,#8fb);
  background-size: 7px 7px;

サンプル14

  background: linear-gradient(-45deg,#fff 25%,#9f9 25%,#9f9 50%,#fff 50%,#fff 75%,#9f9 75%,#9f9);
  background-size: 8px 8px;

サンプル15

  background: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0),#fd8;
  background-position: 0 0, 4px 4px;
  background-size: 8px 8px;

サンプル16

  background: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0),#fbb;
  background-position: 0 0, 4px 4px;
  background-size: 8px 8px;

サンプル17

  background: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0),#fbf;
  background-position: 0 0, 6px 6px;
  background-size: 12px 12px;

サンプル18

  background: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0),#dcf;
  background-position: 0 0, 6px 6px;
  background-size: 12px 12px;

サンプル19

  background: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0),#ccf;
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;

サンプル20

  background: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0),#bdf;
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;

サンプル21

  background: radial-gradient(#fff 2px, transparent 0), radial-gradient(#fff 2px, transparent 0),#7ff;
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;

サンプル22

  background: radial-gradient(#fff 2px, transparent 0), radial-gradient(#fff 2px, transparent 0),#8fc;
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;

サンプル23

  background: radial-gradient(#fff 3px, transparent 0), radial-gradient(#fff 3px, transparent 0),#9f9;
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;

サンプル24

  background: radial-gradient(#fff 3px, transparent 0), radial-gradient(#fff 3px, transparent 0),#bf8;
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;

サンプル25

  background: radial-gradient(#fff 4px, transparent 0), radial-gradient(#fff 4px, transparent 0),#ff7;
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;

サンプル26

  background: radial-gradient(#fff 4px, transparent 0), radial-gradient(#fff 4px, transparent 0),#fcc;
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;

サンプル27

  background: radial-gradient(#fff 5px, transparent 0), radial-gradient(#fff 5px, transparent 0),#fcf;
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;

サンプル28

  background: radial-gradient(#fff 5px, transparent 0), radial-gradient(#fff 5px, transparent 0),#dcf;
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;

サンプル29

  background: radial-gradient(#fff 6px, transparent 0), radial-gradient(#fff 6px, transparent 0),#ccf;
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;

サンプル30

  background: radial-gradient(#fff 6px, transparent 0), radial-gradient(#fff 6px, transparent 0),#bdf;
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;

サンプル31

  background: radial-gradient(#fff 7px, transparent 0), radial-gradient(#fff 7px, transparent 0),#9ff;
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;

サンプル32

  background: radial-gradient(#fff 7px, transparent 0), radial-gradient(#fff 7px, transparent 0),#9fb;
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;

サンプル33

  background: linear-gradient(-45deg,#aaf 25%,#8fb 25%,#8fb 50%,#aaf 50%,#aaf 75%,#8fb 75%,#8fb);
  background-size: 5px 5px;

サンプル34

  background: linear-gradient(-45deg,#9fc 25%,#8bb 25%,#8bb 50%,#9fc 50%,#9fc 75%,#8bb 75%,#8bb);
  background-size: 6px 6px;

サンプル35

  background: linear-gradient(-45deg,#8cf 25%,#afa 25%,#afa 50%,#7fb 50%,#7fb 75%,#fff 75%,#fff);
  background-size: 7px 7px;