Using HTML, SVG and JavaScript to make a Drawing of a Pear

In this video we look at JavaScript code to create a drawing of a pear and place it in an SVG element on an HTML page. We follow the tutorial of Sandrine Maugy to draw a pair. We start with an axis which we make using a quadratic Bezier curve. Next we add two circles -- the "head" and "body" of the pear -- placed at the top and bottom of the axis. With these guides we are ready to piece together the "pear path." It starts with an arc along the head. We then make the left-side of the "neck" -- we use a cubic Bezier path to connect a point on the left-side of the head to a point on the left-side of the body (with some care to match the arc slopes on either end). Next comes an arc that hugs the body's bottom. Finally we make the right-side of the neck with another cubic Bezier. We color the pear in with a radial gradient. The drawing includes a number of random parameters so each time the page is refreshed, a completely different pear drawing is generated.

[@thomasblum9803]

www1.lasalle.edu/~blum/c343wks/SVG_Pear_3.html