<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 750 750">
	<defs>
		<g id="hex" transform="rotate(30 375 375)">
			<polygon points="229.3,627.5 83.6,375.5 229.3,123.5 520.7,123.5 666.4,375.5 520.7,627.5" />
			<line x1="229.3" y1="123.5" x2="520.7" y2="627.5"/>
			<line x1="666" y1="375.5" x2="84" y2="375.5"/>
			<line x1="520.7" y1="123.5" x2="229.3" y2="627.5"/>
		</g>
	</defs>	
	<use xlink:href="#hex" />
	<use xlink:href="#hex" transform="translate(470.75, 172) scale(.25)" />
	<use xlink:href="#hex" transform="translate(470.75, 390.5) scale(.25)" />
	<use xlink:href="#hex" transform="translate(91.75, 172) scale(.25)" /> 
	<use xlink:href="#hex" transform="translate(91.75, 390.5) scale(.25)" /> 	
	<use xlink:href="#hex" transform="translate(155, 281.25) scale(.25)" />
	<use xlink:href="#hex" transform="translate(407.5, 281.25) scale(.25)" />
	<use xlink:href="#hex" transform="translate(281.25, 63.5) scale(.25)" />
	<use xlink:href="#hex" transform="translate(281.25, 500) scale(.25)" />
	<use xlink:href="#hex" transform="translate(344.5, 172) scale(.25)" />
	<use xlink:href="#hex" transform="translate(218, 172) scale(.25)" />
	<use xlink:href="#hex" transform="translate(344.5, 390.5) scale(.25)" />
	<use xlink:href="#hex" transform="translate(218, 390.5) scale(.25)" />
</svg>
svg {
  display: block;
  width: 40%;
  margin: 0 auto;
}
polygon, line { 
  fill: none; stroke: #32679D; 
  stroke-width: 5px; 
	vector-effect: non-scaling-stroke;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.