star.js

// import { filter, flatten, minBy, range, reject, zip } from 'lodash';

const filter = require('lodash').filter;
const flatten = require('lodash').flatten;
const minBy = require('lodash').minBy;
const range = require('lodash').range;
const reject = require('lodash').reject;
const zip = require('lodash').zip;

const complement = f => ((...args) => !(f(...args)));
const isEven = n => !(n % 2);
const pairs = arr => zip(
  filter(arr, (o, i) => isEven(i)),
  filter(arr, (o, i) => complement(isEven)(i))
);
const rads = d => d * (Math.PI / 180);

const circleVertices = (radius, nPoints, offset = 0, y0 = 0, x0 = 0) => (
  range(0, nPoints)
    .map(n => (n * (360 / nPoints)) + offset)
    .map(n => {
      var y = Math.sin(rads(n)) * radius;
      var x = Math.sqrt(Math.pow(radius, 2) - Math.pow(y - y0, 2)) + x0;
      return [
        Math.abs(x) * ((n > 90  && n < 270) ? -1 : 1),
        Math.abs(y) * ((n > 180 && n < 360) ? -1 : 1)
      ];
    })
);

const starVertices = (outerRadius, innerRadius, nPoints) => (flatten(zip(
  circleVertices(outerRadius, nPoints),
  circleVertices(innerRadius, nPoints, (360 / nPoints) / 2)
)));

const excludeBelow = (coords, y) => reject(coords, cs => cs[1] < y);

const translateToBottom = (coords, r) => {
  const minY = minBy(coords, cs => cs[1])[1];
  const extraSpace = Math.abs((-r) - minY);
  return (minY <= (-r))
    ? coords
    : coords.map(cs => [ cs[0], cs[1] - extraSpace ]);
};

const coordsToPercents = (coords, r, sigDigs = 2) => (
  coords
    .map(cs => cs.map(c => (c + r) / 2))
    .map(cs => cs.map(c => (c / r) * 100))
    .map(cs => cs.map(c => Number(c).toFixed(sigDigs)))
);

const formatForHTMLClipPathArgs = (coords, r) => (
  pairs(
    flatten(
      coordsToPercents(coords, r)
    ).map(n => n + '%')
  ).map(cs => cs.join(' '))
  .join(', ')
);

formatForHTMLClipPathArgs(
  translateToBottom(
    excludeBelow(
      starVertices(240, 210, 19),
      -145
    ),
    240
  ),
  240
);

// export circleVertices;
// export starVertices;
// export formatForHTMLClipPathArgs;