<section>
  <pre>&lt;polygon points='<span data-p='0'>250,0</span> <span data-p='1'>64,64</span> <span data-p='2'>0,250</span> <span data-p='3'>-64,64</span> <span data-p='4'>-250,0</span> <span data-p='5'>-64,-64</span> <span data-p='6'>0,-250</span> <span data-p='7'>64,-64</span>'/&gt;</pre>
</section>

<svg viewbox='-263 -263 526 526'>
  <g class='cs'>
    <line x1='-263' x2='263' y1='0' y2='0'/>
    <line y1='-263' y2='263' x1='0' x2='0'/>
    <circle r='8' />
  </g>
  
  <polygon id='star' points='250,0 64,64 0,250 -64,64 -250,0 -64,-64 0,-250 64,-64'/>
  
  <circle id='p0' cx='250' cy='0' r='10' />
  <circle id='p1' cx='64' cy='64' r='10' />
  <circle id='p2' cx='0' cy='250' r='10' />
  <circle id='p3' cx='-64' cy='64' r='10' />
  <circle id='p4' cx='-250' cy='0' r='10' />
  <circle id='p5' cx='-64' cy='-64' r='10' />
  <circle id='p6' cx='0' cy='-250' r='10' />
  <circle id='p7' cx='64' cy='-64' r='10' />
</svg>
@import "compass/css3";

svg {
  margin: 0 auto;
  width: 256px; height: 256px;
  background: #f5f5f5;
}

line {
  stroke: #333;
}

polygon {
  fill: transparent;
  stroke: #000;
  stroke-dasharray: 6;
  stroke-width: 3;
}

circle {
  stroke: transparent;
  stroke-width: 5;
  opacity: .87;
}

pre {
  padding: .25em .5em;
  background: #333;
  color: #ddd;
  
  span {
    display: inline-block;
    padding: .25em;
    border-radius: .1875em;
  }
}

pre [data-p], svg [id*='p'] {
  cursor: pointer;
}

@for $i from 0 to 8 {
  $c: hsl($i*45, 100%, 80%);
  
  [data-p='#{$i}'] { color: $c; }
  .hl[data-p='#{$i}'] {
    color: #000;
    background: $c;
  }
  [id='p#{$i}'] { fill: $c; }
  .hl[id='p#{$i}'] {
    stroke: #000;
    fill: darken($c, 40%);
    opacity: .99;
  }
}
var pls = document.querySelectorAll('[data-p]'), 
    pts = document.querySelectorAll('[id*=p]');

var hm = function(e) {
  var t = e.target, ts, idx;
  
  if(t.id && t.id[0] == 'p') {
    idx = ~~t.id.replace('p', '');
    ts = pls[idx];
  }
  if(t.dataset && t.dataset.p) {
    idx = ~~t.dataset.p;
    ts = pts[idx];
  }
  if(t && ts) {
    t.classList.toggle('hl');
    ts.classList.toggle('hl');
  }
};

addEventListener('mouseover', hm, false);
addEventListener('mouseout', hm, false);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.