<svg>
  <path id='shape'/>
</svg>

body {
	display: flex;
	margin: 0;
	height: 100vh
}

svg { flex: 1 }

const _SVG = document.querySelector('svg'), 
			_SHAPE = document.getElementById('shape'), 
			D = 1000 /* viewBox size */,
			O = {} /* data object */,
			/* number of cubic curves/ polygon vertices */
			P = 5;

function getStarPoints(f = .5) {
	const RCO = f*D /* outer (pentagram) circumradius*/, 
				BAS = 2*(2*Math.PI/P) /* base angle for star poly */, 
				BAC = 2*Math.PI/P /* base angle for convex poly */, 
				RI = RCO*Math.cos(.5*BAS) /*pentagram/ inner pentagon inradius */, 
				RCI = RI/Math.cos(.5*BAC) /* inner pentagon circumradius */, 
				ND = 2*P /* total number of distinct points we need to get */, 
				BAD = 2*Math.PI/ND /* base angle for point distribution */, 
				PTS = [] /* array we fill with point coordinates */;

	for(let i = 0; i < ND; i++) {
		let /* radius at end point (inner)/ control point (outer) */
				cr = i%2 ? RCI : RCO, 
				/* angle of radial segment from origin to current point */
				ca = i*BAD, 
				x = Math.round(cr*Math.cos(ca)), 
				y = Math.round(cr*Math.sin(ca));

		PTS.push([x, y]);
		if(!(i%2)) PTS.push([x, y]); /* double it, control points coincide here */
	}

	return PTS
};

(function init() {	
	_SVG.setAttribute('viewBox', [-.5*D, -.5*D, D, D].join(' '));
	
	O.d = {
		ini: getStarPoints(), 
		afn: function(pts) {
			return pts.reduce((a, c, i) => {
				return a + (i%3 ? ' ' : 'C') + c
			}, `M${pts[pts.length - 1]}`)
		}
	};
	
	for(let p in O) _SHAPE.setAttribute(p, O[p].afn(O[p].ini))
})();