<svg id="patternContainer" width="300" height="300" viewbox="0 0 300 300" preserveAspectRatio="xMidYMid meet">

  <defs>
    <pattern id="tinyGrid" width="1" height="1" patternUnits="userSpaceOnUse">
      <path d="M 10 0 L 0 0 0 10" fill="none" stroke="#d3d3d3 " stroke-width="1" />
    </pattern>

    <pattern id="smallGrid" width="5" height="5" patternUnits="userSpaceOnUse">
      <path d="M 10 0 L 0 0 0 10" fill="url(#tinyGrid)" stroke="gray" stroke-width="1" />
    </pattern>
    <pattern id="medSmallGrid" width="10" height="10" patternUnits="userSpaceOnUse">
      <rect width="100" height="100" fill="url(#smallGrid)" />
      <path d="M 10 0 L 0 0 0 10" fill="none" stroke="gray" stroke-width="1" />
    </pattern>
    <pattern id="medLargeGrid" width="50" height="50" patternUnits="userSpaceOnUse">
      <rect width="100" height="100" fill="url(#medSmallGrid)" />
      <path d="M 10 0 L 0 0 0 10" fill="none" stroke="gray" stroke-width="2" />
    </pattern>
    <pattern id="largeGrid" width="100" height="100" patternUnits="userSpaceOnUse">
      <rect width="100" height="100" fill="url(#medLargeGrid)" />
      <path d="M 100 0 L 0 0 0 100" fill="none" stroke="red" stroke-width="1" />
    </pattern>
  </defs>

  <rect width="100%" height="100%" fill="url(#largeGrid)" />

  <circle cx="150" cy="150" r="150" stroke="#9988bf" stroke-width="2" stroke-dasharray="4" fill="transparent" />

  <line class="line" id="line2" x1="150" y1="150" x2="300" y2="150" />

  <line class="line" id="line3" x1="150" y1="150" x2="300" y2="150" />

  <line class="line" id="line4" x1="150" y1="150" x2="300" y2="150" />

  <line class="line" id="line5" x1="150" y1="150" x2="300" y2="150" />

</svg>
#patternContainer {
  background-color: #99ff99;
}

.line {
  stroke: #4077bc;
  stroke-width: 1;
}

#line2 {
  transform-origin: 50% 50%;
  transform: rotate(72deg);
}

#line3 {
  transform-origin: 50% 50%;
  transform: rotate(-72deg);
}

#line4 {
  transform-origin: 50% 50%;
  transform: rotate(-108deg);
}

#line5 {
  transform-origin: 50% 50%;
  transform: rotate(108deg);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.