SVGMath - SVGMath: <img> tags

Process page by:

What's this page about? ➤

Brief Overview

SVGMath is an SVG-based approach to fast loading of beautiful math on the Web.

The math you see on the this demo page consists of pre-generated and cached SVGs, so there is no javascript processing required when the page loads, resulting in extremely fast page load.

You can also view how this page performs when processed using MathJax or KaTeX, by clicking the buttons above. View the console for performance and DOM element information.

Each version looks almost identical, but there are big differences in page load, number of DOM elements and bandwidth.

See: SVGMath Explanation and Stats for further details.

NOTE: By default, MathJax (v.3) and KaTeX do not handle wide equations well on a phone. MathJax just hides the overflow, and KaTeX ends up with overlapping elements. In SVGMath, I implemented a horizontal scrollbar method to handle this.

On with the demo.

[Demo starts]

Kepler's Laws Derived from Newton's Laws

Content author: George W Benthien

Mathematical Preliminaries

Consider a Cartesian coordinate system with the sun at the origin. Let denote the position of a planet. Clearly x, y, and z are functions of the time t. We define the position vector r, the velocity vector v, and the acceleration vector a by

Here the dots represent differentiation with respect to time and i, j, k are the unit vectors in the x, y, z directions respectively. Newton's law of motion can be written

$math expression: \begin{equation} \boldsymbol{F}=m\boldsymbol{a} \label{newtlaw} \end{equation} ...$ [1]

where m is the mass of the planet and F is the force on the planet. Let be a unit vector in the r direction. Then Newton's law of gravitation applied to the earth and sun is given by

$math expression: \begin{align} \boldsymbol{F}&=-\frac{GMm}{r^2}\,\hat{\boldsymbol{r}}\nonumber\\&=-\frac{GMm}{r^3}\,\ ...$ [2]

where G is a constant, M is the mass of the sun, and r is the magnitude of r. Combining equations (1) and (2), we get

$math expression: \begin{equation} \boldsymbol{a}=\ddot{\boldsymbol{r}}=-\frac{GM}{r^3}\,\boldsymbol{r}. \label{accel} ...$ [3]

Planet moves in a plane

By the product rule for differentiation

$math expression: \begin{equation*} \frac{d}{dt}\,(\boldsymbol{r}\times\boldsymbol{v})=\boldsymbol{v}\times\boldsymbol ...$

since a is in the same direction as r by equation (3). Here the symbol represents the vector cross-product. Thus, the vector

$math expression: \begin{equation*} \boldsymbol{h}=\boldsymbol{r}\times\boldsymbol{v} \end{equation*} ...$

is a constant. It follows that r and v lie in the plane orthogonal to h. We will choose our coordinate system so that k is in the direction h. Thus,

$math expression: \begin{equation} \boldsymbol{h}=\boldsymbol{r}\times\boldsymbol{v}=h\boldsymbol{k}\qquad h\gt 0. \la ...$ [4]

Kepler's Second Law

The area swept out by the position vector in a small increment of time . is the small change of angle.

The area OAB is approximately equal to the area of the right triangle OAC for small . Since the length of the line AC is approximately and the length of the line OC is approximately r, we have

$math expression: \begin{equation*} \Delta A\doteq \tfrac{1}{2}\,r^2\Delta\theta. \end{equation*} ...$

Dividing both sides by and letting approach zero, we see that

$math expression: \begin{equation} \dot{A}=\tfrac{1}{2}\,r^2\dot{\theta}. \label{Adot} \end{equation} ...$ [5]

Since the planet moves in the plane, we have

$math expression: \begin{align} \boldsymbol{r}&=x\boldsymbol{i}+y\boldsymbol{j}\nonumber\\&=(r\cos \theta)\boldsymbol{ ...$ [6]

where the polar coordinates r and are functions of t. The time derivative of r is given by

$math expression: \begin{equation} \boldsymbol{v}=(\dot{r}\cos\theta-r\sin\theta\;\dot{\theta})\boldsymbol{i}+(\dot{r} ...$ [7]

Substituting equations (6) and (7) into equation (4), we obtain

$math expression: \begin{align} h&=r\cos\theta(\dot{r}\sin\theta+r\cos\theta\,\dot{\theta})- r\sin\theta(\dot{r}\cos\t ...$ [8]

Here we have used the fact that and . It follows from equations (5) and (8) that

$math expression: \begin{equation} \dot{A}=\tfrac{1}{2}\,r^2\dot{\theta}=h/2 =\text{constant}.\label{Aconst} \end{equa ...$ [9]

This is Kepler's second law.

Definition and properties of an ellipse

Before we look at the derivation of Kepler's first law, we need to define what we mean by an ellipse, and look at some of its properties. One common way of drawing an ellipse is to pin the two ends of a string, place a pencil in the loop, and trace a curve while keeping the string taught. Clearly the resulting curve has the property that the sum of the distances from any point on the curve to the two fixed points is a constant (the length of the string). The resulting curve is called an ellipse and the two fixed points are called the foci of the ellipse. An ellipse in which the foci are at and , and corresponds to the length of the string.

The construction of the ellipse can be represented mathematically as follows

$math expression: \begin{equation} \sqrt{(x+c)^2+y^2}+\sqrt{(x-c)^2+y^2}=2a \label{ellipdef} \end{equation} ...$ [10]

where .

This equation can be rearranged as follows

$math expression: \begin{equation*} \sqrt{(x+c)^2+y^2}=2a-\sqrt{(x-c)^2+y^2}. \end{equation*} ...$

Squaring both sides, we get

$math expression: \begin{equation*} (x+c)^2+y^2=4a^2-4a\sqrt{(x-c)^2+y^2}+(x-c)^2+y^2. \end{equation*} ...$

Solving for the square root term, we obtain

$math expression: \begin{align*} \sqrt{(x-c)^2+y^2}&=\frac{1}{4a}\,[4a^2+(x-c)^2-(x+c)^2]\\ &=a-\frac{c}{a}\,x. \end{a ...$

Squaring again, we obtain

$math expression: \begin{equation*} x^2-2cx+c^2+y^2=a^2-2cx+\frac{c^2}{a^2}\,x^2 \end{equation*} ...$

or equivalently

$math expression: \begin{align*} \left(1-\frac{c^2}{a^2}\,\right)x^2+y^2&=(a^2-c^2)\frac{x^2}{a^2}+y^2\\ &=a^2-c^2. \e ...$

Dividing through by , we obtain

$math expression: \begin{equation} \frac{x^2}{a^2}+\frac{y^2}{a^2-c^2}=1. \label{ellipstd} \end{equation} ...$ [11]

We define the eccentricity e of the ellipse by . The eccentricity is a measure of the elongation of the ellipse. The eccentricity of the earth's orbit is small (.0167). Thus, its orbit is nearly circular. Venus has an even smaller eccentricity (.007) and Mars has a larger eccentricity (.0934). The planet with the largest eccentricity is Mercury (.2056). Let us define b by

$math expression: \begin{equation} b=a\sqrt{\vphantom{(}1-e^2}=\sqrt{\vphantom{(}a^2-c^2}. \label{bdef} \end{equation} ...$ [12]

Then, equation (11) can be written in the standard form

$math expression: \begin{equation} \frac{x^2}{a^2}+\frac{y^2}{b^2}=1. \label{std}\end{equation} ...$ [13]

This is the form that is usually specified for an ellipse. It is easy to see that a is one-half the length of the ellipse's major axis and b is one-half the length of the ellipse's minor axis.

An ellipse also has a simple form in polar coordinates if we take our origin to be one of the foci.

Using the definition of an ellipse in terms of the sum of the distances from the two foci being constant, we can write

$math expression: \begin{equation} r+\sqrt{(r\cos\theta+2c)^2+r^2\sin^2\theta}=2a. \label{r2a} \end{equation} ...$ [14]

Solving for the square root term and expanding the square terms, we get

$math expression: \begin{equation*} \sqrt{\vphantom{(}r^2+4rc\cos\theta+4c^2}=2a-r. \end{equation*} ...$

Squaring this equation gives

$math expression: \begin{equation*} r^2+4rc\cos\theta+4c^2=4a^2-4ar+r^2 \end{equation*} ...$

or equivalently

$math expression: \begin{equation*} (a+c\cos\theta)r=a^2-c^2. \end{equation*} ...$

Solving for r, we obtain

$math expression: \begin{align} r&=\frac{a^2-c^2}{a+c\cos\theta}\nonumber\\&=\frac{a^2(1-\frac{c^2}{a^2}\,)}{a(1+\frac ...$ [15]

where

$math expression: \begin{equation} k=a(1-e^2).\label{ka} \end{equation} ...$ [16]

Equation (15) is the desired representation of the ellipse in polar coordinates.

We can also derive our original definition of an ellipse from the polar form. Suppose r and satisfy

$math expression: \begin{equation} r=\frac{k}{1+e\cos\theta}\label{ellippolar1} \end{equation} ...$ [17]

where and .

We define a and c by

$math expression: \begin{equation} a=\frac{k}{1-e^2}=\frac{k}{(1-e)(1+e)}\label{adef} \end{equation} ...$ [18]

and

$math expression: \begin{equation*} c=ae. \label{cdef} \end{equation*} ...$ [19]

It follows from equation (17) that r has a maximum value of at . Thus, using equation (18) we see that

$math expression: \begin{equation*} r\leq \frac{k}{1-e}=a(1+e)\lt 2a. \end{equation*} ...$

Using equation (18), equation (17) can be rearranged as follows

$math expression: \begin{equation*} (1+e\cos\theta)r=k=a(1-e^2). \end{equation*} ...$

Since , this equation can be written

$math expression: \begin{align*} \Bigl(1+\frac{c}{a}\,\cos\theta\Bigr)r&=a\Bigl(1-\frac{c^2}{a^2}\,\Bigr)\\&=\frac{a^2 ...$

Multiplying both sides by a, we obtain

$math expression: \begin{equation*} (a+c\cos\theta)r=a^2-c^2. \end{equation*} ...$

Multiplying this equation by four and adding to both sides, we obtain

$math expression: \begin{equation*} (\cos^2\theta+\sin^2\theta)r^2+4ar+4cr\cos\theta=4a^2-4c^2+r^2. \end{equation*} ...$

This equation can be rearranged as

$math expression: \begin{equation*} r^2\cos^2\theta+4cr\cos\theta+4c^2+r^2\sin^2\theta=r^2-4ar+4a^2 \end{equation*} ...$

or equivalently

$math expression: \begin{equation*} (r\cos\theta+2c)^2+r^2\sin^2\theta=(2a-r)^2. \end{equation*} ...$

Taking the square root of both sides, we obtain

$math expression: \begin{equation*} r+\sqrt{(r\cos\theta+2c)^2+r^2\sin^2\theta}=2a \end{equation*} ...$

which is the defining equation for the ellipse [see equation (14)]. Thus, equation (17) defines an ellipse with the origin at one focus. Let . Then it follows from equation (18) that

$math expression: \begin{equation} b=\frac{k}{\sqrt{\vphantom{/}1-e^2}}. \label{bk} \end{equation} ...$ [20]

Hamilton's Theorem

In this section we will show that the velocity vector v moves on a circle. Since , it follows from equation (6) that equation (3) can be written

$math expression: \begin{align} \dot{\boldsymbol{v}}&=\boldsymbol{a}\nonumber\\&=-\frac{GM}{r^2}\,(\cos\theta\,\boldsy ...$ [21]

Combining equations (8) and (21), we obtain

$math expression: \begin{equation} \dot{\boldsymbol{v}}=-\frac{GM}{h}\,\dot{\theta}\,(\cos\theta\,\boldsymbol{i}+\sin\ ...$ [22]

By the chain rule for differentiation

$math expression: \begin{equation} \dot{\boldsymbol{v}}=\frac{d\boldsymbol{v}}{d\theta}\,\dot{\theta}.\label{vdottheta ...$ [23]

It follows from equations (22) and (23) that

$math expression: \begin{equation*} \frac{d\boldsymbol{v}}{d\theta}=-\frac{GM}{h}\,(\cos\theta\,\boldsymbol{i}+\sin\th ...$

Integrating this equation, we obtain

$math expression: \begin{equation} \boldsymbol{v}=\frac{GM}{h}\,(-\sin\theta\,\boldsymbol{i}+\cos\theta\,\boldsymbol{j ...$ [24]

where is a constant. It follows that , i.e., v moves on the circle centered at with radius .

Kepler's first law

We choose our coordinate system so that j is in the direction , i.e.,

$math expression: \begin{equation} \boldsymbol{v}_0=v_0\boldsymbol{j}\qquad\text{where} \qquad v_0\gt 0.\label{vzeroj} ...$ [25]

Thus, equation (24) becomes

$math expression: \begin{equation} \boldsymbol{v}=\frac{GM}{h}\,[-\sin\theta\,\boldsymbol{i}+(\cos\theta+e)\,\boldsymb ...$ [26]

where . Substituting equation (26) into equation (4) and using equation (6), we get

$math expression: \begin{align*} h\boldsymbol{k}&=\boldsymbol{r}\times\boldsymbol{v}\\ &=\frac{GMr}{h}\,[\sin^2\theta+ ...$

and hence

$math expression: \begin{align} r&=\frac{h^2}{GM}\,\frac{1}{1+e\cos\theta}\nonumber\\&=\frac{k}{1+e\cos\theta} \label{ ...$ [27]

where

$math expression: \begin{equation} k=h^2/GM.\label{khgm} \end{equation} ...$ [28]

In order for r to remain finite for all , we must have . Equation (27) is the equation of an ellipse in polar coordinates with the origin at one focus. This completes the proof of Kepler's first law.

Kepler's third law

Since the rate that area is swept out by the position vector is the constant [see equation (9)], it follows that

$math expression: \begin{equation} A=hT/2 \label{AT} \end{equation} ...$ [29]

where T is the period of the motion and A is the area of the ellipse. Since translation doesn't change the area, we can consider the area of the ellipse

$math expression: \begin{equation} \frac{x^2}{a^2}+\frac{y^2}{b^2}=1.\label{ellipab} \end{equation} ...$ [30]

We will calculate the area of the first quadrant ( , ) and multiply by four. Solving for y as a function of x from equation (30), we obtain

$math expression: \begin{equation*} y=b\sqrt{1-x^2/a^2},\qquad 0\leq x \leq a. \end{equation*} ...$

Thus, the area A is given by

$math expression: \begin{equation} A=4b\int_0^a \sqrt{1-x^2/a^2}\,dx.\label{Aint} \end{equation} ...$ [31]

If we make the change of variables ( ) in the integral, we obtain

$math expression: \begin{align} A&=4ab\int_0^{\pi/2} \cos^2\phi\,d\phi\nonumber\\ &=4ab\int_0^{\pi/2}\frac{1+\cos 2\ph ...$ [32]

Substituting this value for A into equation (29), we obtain

$math expression: \begin{equation*} T=\frac{2\pi ab}{h} \end{equation*} ...$

and hence

$math expression: \begin{equation} T^2=\frac{4\pi^2a^2b^2}{h^2}.\label{Tsq} \end{equation} ...$ [33]

Using equations (18), (20), and (28), we can write the expression for in equation (33) as follows

$math expression: \begin{align} T^2&=\frac{4\pi^2k^4}{(1-e^2)^3h^2}\nonumber\\ &=\frac{4\pi^2ka^3}{h^2}=\frac{4\pi^2a^ ...$ [34]

Equation (34) will establish Kepler's third law if we can show that a is the average distance between a point on the ellipse and the focus where the sun is located. The distance D of a point on the ellipse to the focus is given by

$math expression: \begin{equation} D=\sqrt{(x-c)^2+y^2}. \label{distD}\end{equation} ...$ [35]

It follows from equation (13) that

$math expression: \begin{equation*}y^2=b^2\left(1-\frac{x^2}{a^2}\right).\end{equation*} ...$

Combining this equation with equation (35), we get

$math expression: \begin{align} D&=\sqrt{(x-c)^2+b^2\left(1-\frac{x^2}{a^2}\right)}\nonumber\\&=\sqrt{x^2\left(1-\frac ...$ [36]

It follows from equation (12) that

$math expression: \begin{equation*} 1-\frac{b^2}{a^2}=\frac{c^2}{a^2}\qquad\text{and}\qquad c^2+b^2=a^2. \end{equation ...$

Using these relations, equation (36) becomes

$math expression: \begin{align} D&=\sqrt{\frac{c^2}{a^2}x^2-2cx+a^2}\nonumber\\ &=\sqrt{\frac{(cx-a^2)^2}{a^2}}. \labe ...$ [37]

Since and , it follows that . Thus

$math expression: \begin{equation} D=\frac{a^2-cx}{a}. \label{Dfinal} \end{equation} ...$ [38]

For the upper half of the ellipse the average distance is given by

$math expression: \begin{align} D_\text{av}&= \frac{1}{2a}\int_{-a}^a \frac{a^2-cx}{a}\,dx\nonumber\\ &=\frac{1}{2}\in ...$ [39]

since

$math expression: \begin{equation*}\int_{-a}^ax\,dx=0.\end{equation*} ...$

The average distance over the lower half of the ellipse is the same; therefore, equation (39) represents the average distance over the ellipse. Equations (34) and (39) combine to give Keplers third law.

Content source

Random equation

This one has (repeated) absolute values signs which required different handling:

Other bracket types, like ( ) or { } have different left and right forms, but | | have the same, so the regexp had to be changed for such a case.