Fit a SVG curve to a polynomial

<?xml version="1.0" standalone="no"?>

SVG provides Bézier curves of orders 2 and 3, which should be good enough for quadratic and cubic polynomials.

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="20cm" height="20cm" viewBox="0 0 1000 1000"
    xmlns="http://www.w3.org/2000/svg" version="1.1">
  <style type="text/css"><![CDATA[
    .axis { fill: none; stroke: black; stroke-width: 3; }
    .tick { fill: none; stroke: black; stroke-width: 1; }
    .fun1 { fill: none; stroke: blue; stroke-width: 2; }
    .fun2 { fill: none; stroke: red; stroke-width: 2; }
  ]]></style>
  <polyline class="axis" points="0,500 1000,500" />
  <polyline class="tick" points="0,490 0,510" />
  <polyline class="tick" points="100,490 100,510" />
  <polyline class="tick" points="200,490 200,510" />
  <polyline class="tick" points="300,490 300,510" />
  <polyline class="tick" points="400,490 400,510" />
  <polyline class="tick" points="600,490 600,510" />
  <polyline class="tick" points="700,490 700,510" />
  <polyline class="tick" points="800,490 800,510" />
  <polyline class="tick" points="900,490 900,510" />
  <polyline class="tick" points="1000,490 1000,510" />
  <polyline class="axis" points="500,0 500,1000" />
  <polyline class="tick" points="490,0 510,0" />
  <polyline class="tick" points="490,100 510,100" />
  <polyline class="tick" points="490,200 510,200" />
  <polyline class="tick" points="490,300 510,300" />
  <polyline class="tick" points="490,400 510,400" />
  <polyline class="tick" points="490,600 510,600" />
  <polyline class="tick" points="490,700 510,700" />
  <polyline class="tick" points="490,800 510,800" />
  <polyline class="tick" points="490,900 510,900" />
  <polyline class="tick" points="490,1000 510,1000" />

Take y = x² - 4, with endpoints (-3, 5) and (3, 5); the tangents are y = -6x - 13 and y = 6x - 13. Place the one Q control point on both tangents, at (0, -13). This should work easily for any quadratic.

  <path class="fun1" d="M200,0 Q500,1800 800,0" />

Cubics are a bit tricker. With y = (x³ - 9x) / 16 from (-5, -5) to (5, 5), the tangents are y = (33x + 125) / 8 and y = (33x - 125) / 8. Seeing that the curve must pass through (0, 0) with slope -9/16, it's a simple calculation to find C control points (-5/3, 35/4) and (5/3, 35/4). It's probably not doable by hand most of the time but I think this approach should be numerically doable for any other cubic — two variables for how far along each tangent the control points lie, and two constraints forcing a particular point and direction.

  <path class="fun2" d="M0,1000 C333,-375 667,1375 1000,0" />

(Animated Bézier Curves was very helpful when I was working these out.)

</svg>