Badge for d3 unconf using a superformula

<html>
<head>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      background: black
    }
      path {
        stroke-width: 5px;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-opacity: 1;
        fill-opacity: 0.8
      }
      .path1 {
        stroke: lime;
        fill: red;
      }
      .path3 {
        stroke: lime;
        fill: lime;
        fill-opacity: 0;
        stroke-opacity: 1;
        stroke-width: 2px;
      }
      .path2 {
        stroke: brown;
        fill: orange;
      }
      .path4 {
        stroke: lime;
        fill: lime;
        stroke-width: 10px;
      }
    .chart {
      margin-top: 300px; 
    }
  </style>
</head>
<body>
<div class="chart"></div>
<script>

d3.superformula = function() {
    var _line = d3.line()

function generatePath(params, size, segments) {
        // var params = superformulaTypes[type]
        var diameter = size
        var n = segments

var i = -1,
            dt = 2 * Math.PI / n,
            t,
            r = 0,
            x,
            y,
            points = []

while (++i < n) {
          t = params.m * (i * dt - Math.PI) / 4
          t = Math.pow(Math.abs(Math.pow(Math.abs(Math.cos(t) / params.a), params.n2)
            + Math.pow(Math.abs(Math.sin(t) / params.b), params.n3)), -1 / params.n1)
          if (t > r) r = t
          points.push(t)
        }

r = diameter * Math.SQRT1_2 / r
        i = -1
        while (++i < n) {
          x = (t = points[i] * r) * Math.cos(i * dt)
          y = t * Math.sin(i * dt)
          points[i] = [Math.abs(x) < 1e-6 ? 0 : x, Math.abs(y) < 1e-6 ? 0 : y]
        }

return _line(points) + "Z"
    }

var superformulaTypes = {
        asterisk: {m: 12, n1: .3, n2: 0, n3: 10, a: 1, b: 1},
        bean: {m: 2, n1: 1, n2: 4, n3: 8, a: 1, b: 1},
        butterfly: {m: 3, n1: 1, n2: 6, n3: 2, a: .6, b: 1},
        circle: {m: 4, n1: 2, n2: 2, n3: 2, a: 1, b: 1},
        clover: {m: 6, n1: .3, n2: 0, n3: 10, a: 1, b: 1},
        cloverFour: {m: 8, n1: 10, n2: -1, n3: -8, a: 1, b: 1},
        cross: {m: 8, n1: 1.3, n2: .01, n3: 8, a: 1, b: 1},
        diamond: {m: 4, n1: 1, n2: 1, n3: 1, a: 1, b: 1},
        drop: {m: 1, n1: .5, n2: .5, n3: .5, a: 1, b: 1},
        ellipse: {m: 4, n1: 2, n2: 2, n3: 2, a: 9, b: 6},
        gear: {m: 19, n1: 100, n2: 50, n3: 50, a: 1, b: 1},
        heart: {m: 1, n1: .8, n2: 1, n3: -8, a: 1, b: .18},
        heptagon: {m: 7, n1: 1000, n2: 400, n3: 400, a: 1, b: 1},
        hexagon: {m: 6, n1: 1000, n2: 400, n3: 400, a: 1, b: 1},
        malteseCross: {m: 8, n1: .9, n2: .1, n3: 100, a: 1, b: 1},
        pentagon: {m: 5, n1: 1000, n2: 600, n3: 600, a: 1, b: 1},
        rectangle: {m: 4, n1: 100, n2: 100, n3: 100, a: 2, b: 1},
        roundedStar: {m: 5, n1: 2, n2: 7, n3: 7, a: 1, b: 1},
        square: {m: 4, n1: 100, n2: 100, n3: 100, a: 1, b: 1},
        star: {m: 5, n1: 30, n2: 100, n3: 100, a: 1, b: 1},
        triangle: {m: 3, n1: 100, n2: 200, n3: 200, a: 1, b: 1}
    }

return {
        generatePath: generatePath
    }
}

var w = 1000
var h = 1000
var superformulaPath

var svg = d3.select(".chart").append("svg")
    .attr("width", w)
    .attr("height", h)

var path1 = svg.append("path")
    .classed("path1", true)
    .attr("transform", "translate(" + [w / 2, h / 2] + ")")

var path2 = svg.append("path")
    .classed("path2", true)
    .attr("transform", "translate(" + [w / 2, h / 2] + ")")

var path3 = svg.append("path")
    .classed("path3", true)
    .attr("transform", "translate(" + [w / 2, h / 2] + ")")

var path4 = svg.append("path")
    .classed("path4", true)
    .attr("transform", "translate(" + [w / 2, h / 2] + ")")

function generate(params1, params2, params3, params4) {
    superformulaPath = d3.superformula().generatePath(params1, w * 0.7, 2048)
    path1.attr("d", superformulaPath)
    superformulaPath = d3.superformula().generatePath(params2, w * 0.6, 2048)
    path2.attr("d", superformulaPath)
    superformulaPath = d3.superformula().generatePath(params3, w * 0.7, 2048)
    path3.attr("d", superformulaPath)
    superformulaPath = d3.superformula().generatePath(params4, w * 0.2, 2048)
    path4.attr("d", superformulaPath)
}

var m = 1,
n1 = 1,
n2 = 1,
n3 = 1,
a = 0,
b = 0,
n4 = 50,
n5 = 0,
n6 = 50

var end = 5 + 3 * 10
var count = 0
setInterval(() => {
  if(count < end) {
    generate(
        {m: 10, n1: n1 += 0.1, n2: n2 += 5, n3: 10, a: 1, b: 0.5},
        {m: 20, n1: n1 += 0.8, n2: n2 += 1, n3: 20, a: 0.8, b: 0.01},
        {m: 10, n1: n1 += 0.3, n2: n2 += 1, n3: 1, a: 1, b: 1},
        {m: 6, n1: n4 -= 0.1, n2: n5 -= 1, n3: 3, a: 0.8, b: 1}
    ) 
	}
  else {
    generate(
        {m: 10, n1: n1 -= 0.1, n2: n2 -= 5, n3: 10, a: 1, b: 0.5},
        {m: 20, n1: n1 -= 0.8, n2: n2 -= 1, n3: 20, a: 0.8, b: 0.01},
        {m: 10, n1: n1 -= 0.3, n2: n2 -= 1, n3: 1, a: 1, b: 1},
        {m: 6, n1: n4 += 0.1, n2: n5 += 1, n3: 3, a: 0.8, b: 1}
    )
  }
  count++
}, 200)

</script>
</body>
</html>

https://d3js.org/d3.v4.min.js