<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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.