<svg width="400" height="400" viewBox="0 0 120 120"
    xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="120" height="120" stroke="red" stroke-width="2" fill="transparent"/>
  <polygon points="60,20 100,40 100,80 60,100 20,80 20,40"/>

  <circle cx="60" cy="20" r="2" fill="blue"></circle>
  <circle cx="100" cy="40" r="2" fill="blue"></circle>
  <circle cx="100" cy="80" r="2" fill="blue"></circle>
  <circle cx="60" cy="100" r="2" fill="blue"></circle>
  <circle cx="20" cy="80" r="2" fill="blue"></circle>
  <circle cx="20" cy="40" r="2" fill="blue"></circle>
  
  <g font-family="monospace" font-size="4">
    <text y="15" x="50%" text-anchor="middle">x:60 y:20</text>
    <text y="32" x="90" text-anchor="right">x:100 y:40</text>
    <text y="90" x="90" text-anchor="right">x:100 y:80</text>
    <text y="110" x="50%" text-anchor="middle">x:60 y:100</text>
    <text y="32" x="10" text-anchor="left">x:20 y:40</text>
    <text y="90" x="10" text-anchor="left">x:20 y:80</text>
  </g>
</svg>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.