JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<head>

<meta charset='UTF-8' />

<title>LOVE</title>

</head>

<body>

<canvas id="pad" width='800' height='300'>Your browser does not support the canvas element.</canvas>

<script type="text/javascript">

    var $id = function (n) {

        return document.getElementById(n) || n;

    }

    window.addEventListener("load", draw, false);

    var con = $id("pad").getContext('2d');

    con.fillStyle = '#f00'

    con.translate(300, 100);

    function draw() {

        var r = 0, a = 20, start = 0, end = 0;

        con.rotate(Math.PI);

        for (var q = 0; q < 100000; q++) {

            start += Math.PI * 2 / 1000;

            end = start + Math.PI * 2 / 1000;

            r = a * Math.sqrt(225 / (17 - 16 * Math.sin(start) * Math.sqrt(Math.cos(start) * Math.cos(start))))

            con.arc(0, 0, r, start, end, false);

        }

        con.fill();

    }

</script>

</body>

</html>