Svg polygon rounding

I think some of the responses here have been a little confusing.

(is it) possible for a polygon svg element to have the same cubic-bezier to it as the polyline

The short answer is no. <polygon> (and <polyline>) elements are always rendered as a sequence of straight line segments between the coordinates you provide. There is no way to automatically make the joins have a radius - like an HTML border-radius. If that is what you are asking.

If the line has a bigger stroke width, you can choose to round the outside corner of the line joins.

.track {
  fill: none;
  stroke: black;
  stroke-width: 20;
}

.round {
  stroke-linejoin: round;
}

<svg width="300" height="300">
    <polygon class="track" points="20,20 290,20 290,130 20,130"></polygon>
    <polygon class="track round" points="20,170 290,170 290,280 20,280"></polygon>
</svg>

If you want to include bezier curve segments in your "line", you will have to use the <path> element instead. As was used in the example you linked to.

I suggest put one duplicated figure above another one with just smaller stroke-width. Profit! :)

<svg viewBox="0 0 200 300" xmlns="http://www.w3.org/2000/svg">
 <polygon points="50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180" stroke-linejoin="round" stroke-width="50" stroke="red"/>
 <polygon points="50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180" stroke-linejoin="round" stroke-width="30" stroke="#fff"/>
</svg>