Micropolar v0.2.2 mic patterns

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title></title>
    <script type='text/javascript' src="https://d3js.org/d3.v3.min.js"></script>
    <script type='text/javascript' src="https://micropolar.org/micropolar-v0.2.2.js"></script>
    <style>
      div{
        float: left;
        border: #eee 1px solid;
        margin: 5px;
      }
    </style>
</head>
<body>

<div id="container1"></div>

<script>
  
var config = {
    data: [{
      t: d3.range(0, 360 + 6, 6),
      r: d3.range(0, 360 + 6, 6).map(function(deg) {
          return Math.abs(Math.cos(deg * Math.PI / 180));
      }),
      color: "none",
      strokeColor: "peru",
      geometry: "LinePlot",
      name: "Figure8"
    }, {
      t: d3.range(0, 360 + 6, 6),
      r: d3.range(0, 360 + 6, 6).map(function(deg) {
          return Math.abs(0.5 + 0.5 * Math.cos(deg * Math.PI / 180));
      }),
      color: "none",
      strokeColor: "darkviolet",
      geometry: "LinePlot",
      name: "Cardioid"
    }, {
      t: d3.range(0, 360 + 6, 6),
      r: d3.range(0, 360 + 6, 6).map(function(deg) {
          return Math.abs(0.25 + 0.75 * Math.cos(deg * Math.PI / 180));
      }),
      color: "none",
      strokeColor: "deepskyblue",
      geometry: "LinePlot",
      name: "Hypercardioid"
    }, {
      t: d3.range(0, 360 + 6, 6),
      r: d3.range(0, 360 + 6, 6).map(function(deg) {
          return Math.abs(0.7 + 0.3 * Math.cos(deg * Math.PI / 180));
      }),
      color: "none",
      strokeColor: "orangered",
      geometry: "LinePlot",
      name: "Subcardioid"
    }, {
      t: d3.range(0, 360 + 6, 6),
      r: d3.range(0, 360 + 6, 6).map(function(deg) {
          return Math.abs(0.37 + 0.63 * Math.cos(deg * Math.PI / 180));
      }),
      color: "none",
      strokeColor: "green",
      geometry: "LinePlot",
      name: "Supercardioid"
    }],
    layout: {
      title: "Line Chart",
      orientation: -90,
      angularAxis: {
          ticksSuffix: "°"
      },
      radialAxis: {
          ticksSuffix: "dB"
      },
      needsEndSpacing: false,
      backgroundColor: "ghostwhite",
      width: 400,
      height: 400
    }
};
micropolar.Axis().config(config).render(d3.select('body').append('div'));

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