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

<circle class = "strapwork_1" cx="150" cy="177" r="150" 
/>

<line class = "pline"
x1="150" y1="177"
x2= "271.353" y2="88.8315"
/>

<line class = "pline"
x1="150" y1="177"
x2= "196.353" y2="34.341"
/>

<line class = "pline"
x1="150" y1="177"
x2= "103.647" y2="34.341"
/>

<line class = "pline"
x1="150" y1="177"
x2= "28.647" y2="88.8315"
/>

<line class = "pline"
x1="150" y1="177"
x2= "0" y2="177"/>

<line class = "pline"
x1="150" y1="177"
x2= "28.647" y2="265.1685"
/>

<line class = "pline"
x1="150" y1="177"
x2= "103.647" y2="319.659"
/>

<line class = "pline"
x1="150" y1="177"
x2= "196.353" y2="319.659"
/>

<line class = "pline"
x1="150" y1="177"
x2= "271.353" y2="265.1685"
/>

<line class = "pline"
x1="150" y1="177"
x2= "300" y2="177"
/>

<line class = "strapwork_1"
x1="0" y1="34.341"
x2= "300" y2="34.341"
/>

<line class = "strapwork_1"
x1="0" y1="319.659"
x2= "300" y2="319.659"
/>

<circle class="strapwork_1" cx="0" cy="177" r="177"/>
<circle class="strapwork_1" cx="300" cy="177" r="177"/>




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

}

.pline {

stroke: black; 
stroke-width: 1;

}

.strapwork_1 {

stroke: #9988bf;
stroke-width: 2;
stroke-dasharray: 4;
fill: transparent;

}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.