<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="vertex" id="pt1" x1="0" y1="150" x2="271.353" y2="61.8315" />

  <line class="vertex" id="pt2" x1="0" y1="150" x2="196.353" y2="7.341" />

  <line class="vertex" id="pt3" x1="0" y1="150" x2="103.647" y2="7.341" />

  <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; 

}

.vertex {

stroke: yellow; 
stroke-width: 1;

}

.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); 
	
}