This is a demonstration of an Animation using p5.js.
You can play with the code by changing certain values for changes in the behaviour of the animation. You can even create a multicolored version of this animation.
A cardioid is a plane curve traced by a point on the perimeter of a circle that is rolling around a fixed circle of the same radius. It can also be defined as an epicycloid having a single cusp. It is also a type of sinusoidal spiral, and an inverse curve of the parabola with the focus as the center of inversion.
The name was coined by de Castillon in 1741 but had been the subject of study decades beforehand. Named for its heart-like form, it is shaped more like the outline of the cross section of a round apple without the stalk.