Another way to 'generate' cycloid curves is to draw tangents to the curve from 2 axes.
Here we have 2 cycloids generated from 2 corner axes. Note that the axes are 90° apart, but more importantly, they are vertical and horizontal. We will examine other cases where this angle is less or more.
An astute reader might recognize that these 2 figures are actually part of an Astroid Curve.
The SVG code is created using a JavaScript loop, using about 20 lines of code. With 35 tangents in each figure, that would be over 70 lines of SVG code.