<section class='wrap' data-descr='initial element + how path is drawn'>
  <div class='no-clip'></div>
  <svg viewbox='0 0 300 300'>
    <defs>
      <clipPath id='cp' clipPathUnits='objectBoundingBox'>
        <polygon points='1,.5 .25,.933 .25,.067 
                         1,.5 
                         .833,.5 .333,.789 .333,.211 
                         .833,.5 
                         .667,.5 .417,.644 .417,.356 .667,.5 '/>
      </clipPath>
    </defs>
    
    <polygon points='120,90 30,150 120,210 
                     120,90 
                     180,90 270,150 180,210 
                     180,90' 
             class='drawing'/>
  </svg>
</section>

<section class='wrap' data-descr='clip: use polygon() function (WebKit/ Blink browsers/ Firefox 49+, Firefox 47-48 behind flag*)'>
  <div class='clip-me'></div>
</section>

<section class='wrap' data-descr='clip: use reference to a <clipPath> element to clip an HTML element (Firefox + WebKit/ Blink browsers)'>
  <div class='clip-me'></div>
</section>

<section class='wrap' data-descr='clip: use reference to a <clipPath> element to clip an SVG <rect> element (works in IE/ pre-Chromium Edge as well)'>
  <svg>
    <rect width='300' height='300' class='clip-me'/>
  </svg>
</section>

<p>* <a href='https://twitter.com/anatudor/status/698177005431357440' target='_blank'>info</a></p>

@import 'compass/css3';

$n: 5;
$l: 10;
$r-outer: 50%;
$offset-x: 50%;
$offset-y: 50%;

$base-angle: 360deg/$n;
$r-diff: $r-outer/$l;
$pts: ();

@for $j from 0 to $l {
  $r: $r-outer - $j*$r-diff;
  
  @for $i from 0 through $n {
    $angle: $i*$base-angle;
    $x: $offset-x + $r*cos($angle);
    $y: $offset-y + pow(-1, $j)*$r*sin($angle);
    
    $pts: append(
      $pts, $x $y, 
      comma
    ) !global;
  }
}

html {
  background: linear-gradient(
       hsl(0, 100%, 80%), hsl(30, 100%, 80%), 
       hsl(60, 100%, 80%), hsl(90, 100%, 80%));
  background-size: 4em 4em;
}

.wrap {
  display: inline-block;
  position: relative;
  margin: 0 4px 3em;
  width: 300px; height: 300px;
  box-shadow: 0 0 2px 2px;
  
  & > * {
    position: absolute;
    top: 0; left: 0;
    width: inherit; height: inherit;
  }
  
  &:nth-child(2) .clip-me {
    clip-path: polygon(
      $pts
    );
  }
  
  &:nth-child(n + 3) .clip-me {
    clip-path: url(#cp);
  }
  
  &:after {
    position: absolute;
    top: 100%;
    padding: .5em 0;
    font: 1em trebuchet ms, verdana, sans-serif;
    content: attr(data-descr);
  }
}

div {
  &.no-clip, &.clip-me {
    background: #222
  }
}

rect { fill: #222 }

.drawing {
  fill: rgba(#be4c39, .01);
  stroke: #da8817;
  stroke-width: 2;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: ani $l*1s linear infinite;
}

@keyframes ani {
  79% { fill: rgba(#be4c39, .01); }
  80%, 100% {
    fill: rgba(#be4c39, .5);
    stroke-dashoffset: 0;
  }
}

var n = 5, 
    l = 10, 
    d = document.querySelector('.drawing'), 
    cp = document.querySelector('#cp polygon'), 
    attr_val, len;

var getPointsList = function(n, l, r_outer, offset_x, offset_y, k) {
  var base_angle = 2*Math.PI/n, 
      r_diff = r_outer/l, 
      points = [], 
      angle, x, y, r, e;
  
  k = k || 0;
  len = 0;
  
  for(var i = 0; i <= n; i++) {
    angle = i*base_angle;
    x = Math.cos(angle);
    y = Math.sin(angle);
    e = 2*Math.sin(base_angle/2);

    for(var j = 0; j < l; j++) {
      if(i === 0) {
        points.push('');
      }
      
      r = r_outer - j*r_diff;
      len += e*r;

      points[j] += 
        (offset_x + r*x).toFixed(k) + ',' + 
        (offset_y + Math.pow(-1, j)*r*y).toFixed(k) + ' '
    }
  }
  
  len += (l - 1)*r_diff;
    
  return points.join('');
}

attr_val = getPointsList(n, 10, .5, .5, .5, 3);
cp.setAttribute('points', attr_val);

attr_val = getPointsList(n, 10, 150, 150, 150);
d.setAttribute('points', attr_val);
d.style.strokeDasharray = len;
d.style.strokeDashoffset = len;