diff --git a/article.js b/article.js
index 5c85062f..c97a751a 100644
--- a/article.js
+++ b/article.js
@@ -62,7 +62,7 @@
 	var React = __webpack_require__(8);
 	var ReactDOM = __webpack_require__(165);
 	var Article = __webpack_require__(166);
-	var style = __webpack_require__(185);
+	var style = __webpack_require__(183);
 
 	ReactDOM.render(React.createElement(Article, null), document.getElementById("article"));
 
@@ -19751,10 +19751,10 @@
 	  preface: __webpack_require__(168),
 	  introduction: __webpack_require__(169),
 	  whatis: __webpack_require__(176),
-	  explanation: __webpack_require__(180),
-	  control: __webpack_require__(182),
-	  matrix: __webpack_require__(183),
-	  decasteljau: __webpack_require__(184)
+	  explanation: __webpack_require__(178),
+	  control: __webpack_require__(180),
+	  matrix: __webpack_require__(181),
+	  decasteljau: __webpack_require__(182)
 	};
 
 	/*
@@ -24079,7 +24079,6 @@
 	var React = __webpack_require__(8);
 	var Graphic = __webpack_require__(170);
 	var SectionHeader = __webpack_require__(175);
-	var LaTeX = __webpack_require__(177);
 
 	var Whatis = React.createClass({
 	  displayName: "Whatis",
@@ -24088,7 +24087,7 @@
 	    title: "So what makes a Bézier Curve?"
 	  },
 
-	  interpolation: __webpack_require__(179),
+	  interpolation: __webpack_require__(177),
 
 	  componentWillMount: function componentWillMount() {
 	    this.setup = this.interpolation.setup.bind(this);
@@ -24132,7 +24131,7 @@
 	        "If we know the distance between those two points, and we want a new point that is, say, 20% the distance away from the first point (and thus 80% the distance away from the second point) then we can compute that really easily:"
 	      ),
 	      React.createElement(
-	        LaTeX,
+	        "p",
 	        null,
 	        React.createElement("img", { className: "LaTeX SVG", src: "images/latex/93b03244097aea8be8fcac493afd3706c79fa403.svg" })
 	      ),
@@ -24165,47 +24164,6 @@
 
 /***/ },
 /* 177 */
-/***/ function(module, exports, __webpack_require__) {
-
-	"use strict";
-
-	var React = __webpack_require__(8);
-	var ReactDOM = __webpack_require__(165);
-	var noop = __webpack_require__(178);
-
-	var MathJax = typeof window !== "undefined" ? window.MathJax : false;
-
-	// fallback will simply do nothing when typesetting.
-	if (!MathJax) {
-	  MathJax = { Hub: { Queue: noop } };
-	}
-
-	var LaTeX = React.createClass({
-	  displayName: "LaTeX",
-
-	  render: function render() {
-	    return React.createElement(
-	      "p",
-	      { ref: "latex" },
-	      this.props.children
-	    );
-	  }
-	});
-
-	module.exports = LaTeX;
-
-/***/ },
-/* 178 */
-/***/ function(module, exports) {
-
-	/**
-	 * because somethings you just need a no-op
-	 */
-	module.exports = function noop() {};
-
-
-/***/ },
-/* 179 */
 /***/ function(module, exports) {
 
 	"use strict";
@@ -24371,7 +24329,7 @@
 	};
 
 /***/ },
-/* 180 */
+/* 178 */
 /***/ function(module, exports, __webpack_require__) {
 
 	"use strict";
@@ -24379,7 +24337,6 @@
 	var React = __webpack_require__(8);
 	var Graphic = __webpack_require__(170);
 	var SectionHeader = __webpack_require__(175);
-	var LaTeX = __webpack_require__(177);
 
 	var Explanation = React.createClass({
 	  displayName: "Explanation",
@@ -24388,7 +24345,7 @@
 	    title: "The basics of Bézier curves"
 	  },
 
-	  circle: __webpack_require__(181),
+	  circle: __webpack_require__(179),
 
 	  componentWillMount: function componentWillMount() {
 	    this.setup = this.circle.setup.bind(this);
@@ -24422,7 +24379,7 @@
 	        ", to some other value, using some kind of number manipulation:"
 	      ),
 	      React.createElement(
-	        LaTeX,
+	        "p",
 	        null,
 	        React.createElement("img", { className: "LaTeX SVG", src: "images/latex/1702a1f7b6c180a18d2e94b25808262b1e4c6195.svg" })
 	      ),
@@ -24467,7 +24424,7 @@
 	        "So far so good. Now, let's look at parametric functions, and how they cheat. Let's take the following two functions:"
 	      ),
 	      React.createElement(
-	        LaTeX,
+	        "p",
 	        null,
 	        React.createElement("img", { className: "LaTeX SVG", src: "images/latex/90842920b7553c3091917cfc38fc0a67c2055d38.svg" })
 	      ),
@@ -24495,7 +24452,7 @@
 	        " isn't used in that function. Parametric functions cheat by changing that. In a parametric function all the different functions share a variable, like this:"
 	      ),
 	      React.createElement(
-	        LaTeX,
+	        "p",
 	        null,
 	        React.createElement("img", { className: "LaTeX SVG", src: "images/latex/e5fb9f01d6545e3e2f43410625edfdf483eb3668.svg" })
 	      ),
@@ -24559,7 +24516,7 @@
 	        " with what we usually mean with them for parametric curves, things might be a lot more obvious:"
 	      ),
 	      React.createElement(
-	        LaTeX,
+	        "p",
 	        null,
 	        React.createElement("img", { className: "LaTeX SVG", src: "images/latex/a1189e16ce64ad24e90aa3ea75a724f05d7ab599.svg" })
 	      ),
@@ -24687,7 +24644,7 @@
 	        "You may remember polynomials from high school, where they're those sums that look like:"
 	      ),
 	      React.createElement(
-	        LaTeX,
+	        "p",
 	        null,
 	        React.createElement("img", { className: "LaTeX SVG", src: "images/latex/4f7c9e4f8c7c560ba061ebd09e8a63364401ff22.svg" })
 	      ),
@@ -24756,7 +24713,7 @@
 	        " etc. taking the \"binomial\" form, which sounds fancy but is actually a pretty simple description for mixing values:"
 	      ),
 	      React.createElement(
-	        LaTeX,
+	        "p",
 	        null,
 	        React.createElement("img", { className: "LaTeX SVG", src: "images/latex/0d76eda1bc302fcbae9ad77311288ffb9935e9f0.svg" })
 	      ),
@@ -24772,7 +24729,7 @@
 	        " and add in \"times one\", things suddenly look pretty easy. Check out these binomial terms:"
 	      ),
 	      React.createElement(
-	        LaTeX,
+	        "p",
 	        null,
 	        React.createElement("img", { className: "LaTeX SVG", src: "images/latex/b7307b83a6aed8f3981842ce4365cddaaad5ba3b.svg" })
 	      ),
@@ -24817,7 +24774,7 @@
 	        ", and remove the weights for a moment, we get this:"
 	      ),
 	      React.createElement(
-	        LaTeX,
+	        "p",
 	        null,
 	        React.createElement("img", { className: "LaTeX SVG", src: "images/latex/85716f7b80fabb43411b982ea3c2919f01f546b6.svg" })
 	      ),
@@ -24851,7 +24808,7 @@
 	        "'s after every + sign. So that's actually pretty simple too. So now you know binomial polynomials, and just for completeness I'm going to show you the generic function for this:"
 	      ),
 	      React.createElement(
-	        LaTeX,
+	        "p",
 	        null,
 	        React.createElement("img", { className: "LaTeX SVG", src: "images/latex/524d2b97aebbfe44de7529989629e4e0dd11a754.svg" })
 	      ),
@@ -25009,7 +24966,7 @@
 	module.exports = Explanation;
 
 /***/ },
-/* 181 */
+/* 179 */
 /***/ function(module, exports) {
 
 	"use strict";
@@ -25051,7 +25008,7 @@
 	};
 
 /***/ },
-/* 182 */
+/* 180 */
 /***/ function(module, exports, __webpack_require__) {
 
 	"use strict";
@@ -25059,7 +25016,6 @@
 	var React = __webpack_require__(8);
 	var Graphic = __webpack_require__(170);
 	var SectionHeader = __webpack_require__(175);
-	var LaTeX = __webpack_require__(177);
 
 	var Control = React.createClass({
 	  displayName: "Control",
@@ -25291,7 +25247,7 @@
 	        "If we want to change the curve, we need to change the weights of each point, effectively changing the interpolations. The way to do this is about as straight forward as possible: just multiply each point with a value that changes its strength. These values are conventionally called \"Weights\", and we can add them to our original Bézier function:"
 	      ),
 	      React.createElement(
-	        LaTeX,
+	        "p",
 	        null,
 	        React.createElement("img", { className: "LaTeX SVG", src: "images/latex/e41083ef7693be5384f724a8b354b5a38c9b0ed4.svg" })
 	      ),
@@ -25324,7 +25280,7 @@
 	        " is our last coordinate, and everything in between is a controlling coordinate. Say we want a cubic curve that starts at (120,160), is controlled by (35,200) and (220,260) and ends at (220,40), we use this Bézier curve:"
 	      ),
 	      React.createElement(
-	        LaTeX,
+	        "p",
 	        null,
 	        React.createElement("img", { className: "LaTeX SVG", src: "images/latex/13a1df3fc05f3610035843aee9ee6be82a5820e7.svg" })
 	      ),
@@ -25440,14 +25396,13 @@
 	**/
 
 /***/ },
-/* 183 */
+/* 181 */
 /***/ function(module, exports, __webpack_require__) {
 
 	"use strict";
 
 	var React = __webpack_require__(8);
 	var SectionHeader = __webpack_require__(175);
-	var LaTeX = __webpack_require__(177);
 
 	var Matrix = React.createClass({
 	  displayName: "Matrix",
@@ -25471,7 +25426,7 @@
 	        "We can also represent Bézier as matrix operations, by expressing the Bézier formula as a polynomial basis function, the weight matrix, and the actual coordinates as matrix. Let's look at what this means for the cubic curve :"
 	      ),
 	      React.createElement(
-	        LaTeX,
+	        "p",
 	        null,
 	        React.createElement("img", { className: "LaTeX SVG", src: "images/latex/27810102a13621b9a1e3a533516ffec96f98694a.svg" })
 	      ),
@@ -25481,7 +25436,7 @@
 	        "Disregarding our actual coordinates for a moment, we have:"
 	      ),
 	      React.createElement(
-	        LaTeX,
+	        "p",
 	        null,
 	        React.createElement("img", { className: "LaTeX SVG", src: "images/latex/57e8df56566add302c750691d8f83ee0863ca888.svg" })
 	      ),
@@ -25491,7 +25446,7 @@
 	        "We can write this as a sum of four expressions:"
 	      ),
 	      React.createElement(
-	        LaTeX,
+	        "p",
 	        null,
 	        React.createElement("img", { className: "LaTeX SVG", src: "images/latex/db3823d8088bd7efa7af9fc9f0db34580a364e22.svg" })
 	      ),
@@ -25501,7 +25456,7 @@
 	        "And we can expand these expressions:"
 	      ),
 	      React.createElement(
-	        LaTeX,
+	        "p",
 	        null,
 	        React.createElement("img", { className: "LaTeX SVG", src: "images/latex/7917f77b496627b3f54b0678ee5e253c7773fd8b.svg" })
 	      ),
@@ -25511,7 +25466,7 @@
 	        "Furthermore, we can make all the 1 and 0 factors explicit:"
 	      ),
 	      React.createElement(
-	        LaTeX,
+	        "p",
 	        null,
 	        React.createElement("img", { className: "LaTeX SVG", src: "images/latex/73e32c4b471bc1751add68148d9acababcf43ff1.svg" })
 	      ),
@@ -25527,7 +25482,7 @@
 	        ", we can view as a series of four matrix operations:"
 	      ),
 	      React.createElement(
-	        LaTeX,
+	        "p",
 	        null,
 	        React.createElement("img", { className: "LaTeX SVG", src: "images/latex/98f76abba92e71685cc2d94f0a9f482b6cbe554e.svg" })
 	      ),
@@ -25537,7 +25492,7 @@
 	        "If we compact this into a single matrix operation, we get:"
 	      ),
 	      React.createElement(
-	        LaTeX,
+	        "p",
 	        null,
 	        React.createElement("img", { className: "LaTeX SVG", src: "images/latex/e4496d76627a594150c9034f6c011bcb1cfe853c.svg" })
 	      ),
@@ -25553,7 +25508,7 @@
 	        " matrix horizontally, and our big \"mixing\" matrix upside down:"
 	      ),
 	      React.createElement(
-	        LaTeX,
+	        "p",
 	        null,
 	        React.createElement("img", { className: "LaTeX SVG", src: "images/latex/bbfe6ae9683fb2be29df8db065e1004b94066780.svg" })
 	      ),
@@ -25563,7 +25518,7 @@
 	        "And then finally, we can add in our original coordinates as a single third matrix:"
 	      ),
 	      React.createElement(
-	        LaTeX,
+	        "p",
 	        null,
 	        React.createElement("img", { className: "LaTeX SVG", src: "images/latex/6f51af1c66ef77785066ea5601e7dc5064831401.svg" })
 	      ),
@@ -25573,7 +25528,7 @@
 	        "We can perform the same trick for the quadratic curve, in which case we end up with:"
 	      ),
 	      React.createElement(
-	        LaTeX,
+	        "p",
 	        null,
 	        React.createElement("img", { className: "LaTeX SVG", src: "images/latex/8fa7f5a1b32d06d66b0a4d0f000b2496e0bacccd.svg" })
 	      ),
@@ -25622,7 +25577,7 @@
 	module.exports = Matrix;
 
 /***/ },
-/* 184 */
+/* 182 */
 /***/ function(module, exports, __webpack_require__) {
 
 	"use strict";
@@ -25630,7 +25585,6 @@
 	var React = __webpack_require__(8);
 	var Graphic = __webpack_require__(170);
 	var SectionHeader = __webpack_require__(175);
-	var LaTeX = __webpack_require__(177);
 
 	var deCasteljau = React.createClass({
 	  displayName: "deCasteljau",
@@ -25937,16 +25891,16 @@
 	module.exports = deCasteljau;
 
 /***/ },
-/* 185 */
+/* 183 */
 /***/ function(module, exports, __webpack_require__) {
 
 	// style-loader: Adds some css to the DOM by adding a <style> tag
 
 	// load the styles
-	var content = __webpack_require__(186);
+	var content = __webpack_require__(184);
 	if(typeof content === 'string') content = [[module.id, content, '']];
 	// add the styles to the DOM
-	var update = __webpack_require__(189)(content, {});
+	var update = __webpack_require__(187)(content, {});
 	if(content.locals) module.exports = content.locals;
 	// Hot Module Replacement
 	if(false) {
@@ -25963,21 +25917,21 @@
 	}
 
 /***/ },
-/* 186 */
+/* 184 */
 /***/ function(module, exports, __webpack_require__) {
 
-	exports = module.exports = __webpack_require__(187)();
+	exports = module.exports = __webpack_require__(185)();
 	// imports
 
 
 	// module
-	exports.push([module.id, "html,\nbody {\n  font-family: Verdana;\n  margin: 0;\n  padding: 0;\n}\nbody {\n  background: url(" + __webpack_require__(188) + ");\n}\nheader,\nsection,\nfooter {\n  width: 960px;\n  margin: 0 auto;\n}\nheader {\n  font-family: Times;\n  text-align: center;\n  margin-bottom: 2rem;\n}\nheader h1 {\n  font-size: 360%;\n  margin: 0;\n  margin-bottom: 1rem;\n}\nheader h2 {\n  font-size: 125%;\n  margin: 0;\n}\narticle {\n  font-family: Verdana;\n  width: 960px;\n  margin: auto;\n  background: rgba(255, 255, 255, 0.74);\n  border: solid rgba(255, 0, 0, 0.35);\n  border-width: 0;\n  border-left-width: 1px;\n  padding: 1em;\n  box-shadow: 25px 0px 25px 25px rgba(255, 255, 255, 0.74);\n}\na,\na:visited {\n  color: #0000c8;\n  text-decoration: none;\n}\n#ribbonimg {\n  position: fixed;\n  top: 0;\n  right: 0;\n  z-index: 999;\n}\nfooter {\n  font-style: italic;\n  margin: 2em 0 1em 0;\n  background: inherit;\n}\nnavigation {\n  font-family: Georgia;\n  display: block;\n  width: 70%;\n  margin: 0 auto;\n  padding: 0;\n  border: 1px solid grey;\n}\nnavigation ul {\n  background: #F2F2F9;\n  list-style: none;\n  margin: 0;\n  padding: 0.5em 1em;\n}\nnavigation ul li:nth-child(n+2):before {\n  content: \"\\A7\" attr(data-number) \". \";\n}\nsection p {\n  text-align: justify;\n}\nsection h2[data-num]:before {\n  content: \"\\A7\" attr(data-num) \" \\2014   \";\n}\nsection h2 a,\nsection h2 a:active,\nsection h2 a:hover,\nsection h2 a:visited {\n  text-decoration: none;\n  color: inherit;\n}\ndiv.note {\n  font-size: 90%;\n  margin: 1em 2em;\n  padding: 1em;\n  border: 1px solid grey;\n  background: rgba(150, 150, 50, 0.05);\n}\ndiv.note * {\n  margin: 0;\n  padding: 0;\n}\ndiv.note p {\n  margin: 1em 0;\n}\ndiv.note div.MathJax_Display {\n  margin: 1em 0;\n}\n.howtocode {\n  border: 1px solid #8d94bd;\n  padding: 0 1em;\n  margin: 0 2em;\n  overflow-x: hidden;\n}\n.howtocode h3 {\n  margin: 0 -1em;\n  padding: 0;\n  background: #91bef7;\n  padding-left: 0.5em;\n  color: white;\n  text-shadow: 1px 1px 0 #000000;\n  cursor: pointer;\n}\n.howtocode pre {\n  border: 1px solid #8d94bd;\n  background: rgba(223, 226, 243, 0.32);\n  margin: 0.5em;\n  padding: 0.5em;\n}\nfigure {\n  display: inline-block;\n  border: 1px solid grey;\n  background: #F0F0F0;\n  padding: 0.5em 0.5em 0 0.5em;\n  text-align: center;\n}\nfigure.inline {\n  border: none;\n  margin: 0;\n}\nfigure canvas {\n  display: inline-block;\n  background: white;\n  border: 1px solid lightgrey;\n}\nfigure figcaption {\n  text-align: center;\n  padding: 0.5em 0;\n  font-style: italic;\n  font-size: 90%;\n}\ndiv.figure {\n  display: inline-block;\n  border: 1px solid grey;\n  text-align: center;\n}\ngithub-issues {\n  position: relative;\n  display: block;\n  width: 100%;\n  border: 1px solid #EEE;\n  border-left: 0.3em solid #e5ecf3;\n  background: white;\n  padding: 0 0.3em;\n  width: 95%;\n  margin: auto;\n  min-height: 33px;\n  font: 13px Helvetica, arial, freesans, clean, sans-serif;\n}\ngithub-issues github-issue + github-issue {\n  margin-top: 1em;\n}\ngithub-issues github-issue h3 {\n  font-size: 100%;\n  background: #e5ecf3;\n  margin: 0;\n  position: relative;\n  left: -0.5%;\n  width: 101%;\n  font-weight: bold;\n  border-bottom: 1px solid #999;\n}\ngithub-issues github-issue a {\n  position: absolute;\n  top: 2px;\n  right: 10px;\n  padding: 0 4px;\n  color: #4183C4!important;\n  background: white;\n  line-height: 10px;\n  font-size: 10px;\n}\nimg.LaTeX {\n  display: block;\n  margin-left: 2em;\n}\n", ""]);
+	exports.push([module.id, "html,\nbody {\n  font-family: Verdana;\n  margin: 0;\n  padding: 0;\n}\nbody {\n  background: url(" + __webpack_require__(186) + ");\n}\nheader,\nsection,\nfooter {\n  width: 960px;\n  margin: 0 auto;\n}\nheader {\n  font-family: Times;\n  text-align: center;\n  margin-bottom: 2rem;\n}\nheader h1 {\n  font-size: 360%;\n  margin: 0;\n  margin-bottom: 1rem;\n}\nheader h2 {\n  font-size: 125%;\n  margin: 0;\n}\narticle {\n  font-family: Verdana;\n  width: 960px;\n  margin: auto;\n  background: rgba(255, 255, 255, 0.74);\n  border: solid rgba(255, 0, 0, 0.35);\n  border-width: 0;\n  border-left-width: 1px;\n  padding: 1em;\n  box-shadow: 25px 0px 25px 25px rgba(255, 255, 255, 0.74);\n}\na,\na:visited {\n  color: #0000c8;\n  text-decoration: none;\n}\n#ribbonimg {\n  position: fixed;\n  top: 0;\n  right: 0;\n  z-index: 999;\n}\nfooter {\n  font-style: italic;\n  margin: 2em 0 1em 0;\n  background: inherit;\n}\nnavigation {\n  font-family: Georgia;\n  display: block;\n  width: 70%;\n  margin: 0 auto;\n  padding: 0;\n  border: 1px solid grey;\n}\nnavigation ul {\n  background: #F2F2F9;\n  list-style: none;\n  margin: 0;\n  padding: 0.5em 1em;\n}\nnavigation ul li:nth-child(n+2):before {\n  content: \"\\A7\" attr(data-number) \". \";\n}\nsection p {\n  text-align: justify;\n}\nsection h2[data-num]:before {\n  content: \"\\A7\" attr(data-num) \" \\2014   \";\n}\nsection h2 a,\nsection h2 a:active,\nsection h2 a:hover,\nsection h2 a:visited {\n  text-decoration: none;\n  color: inherit;\n}\ndiv.note {\n  font-size: 90%;\n  margin: 1em 2em;\n  padding: 1em;\n  border: 1px solid grey;\n  background: rgba(150, 150, 50, 0.05);\n}\ndiv.note * {\n  margin: 0;\n  padding: 0;\n}\ndiv.note p {\n  margin: 1em 0;\n}\ndiv.note div.MathJax_Display {\n  margin: 1em 0;\n}\n.howtocode {\n  border: 1px solid #8d94bd;\n  padding: 0 1em;\n  margin: 0 2em;\n  overflow-x: hidden;\n}\n.howtocode h3 {\n  margin: 0 -1em;\n  padding: 0;\n  background: #91bef7;\n  padding-left: 0.5em;\n  color: white;\n  text-shadow: 1px 1px 0 #000000;\n  cursor: pointer;\n}\n.howtocode pre {\n  border: 1px solid #8d94bd;\n  background: rgba(223, 226, 243, 0.32);\n  margin: 0.5em;\n  padding: 0.5em;\n}\nfigure {\n  display: inline-block;\n  border: 1px solid grey;\n  background: #F0F0F0;\n  padding: 0.5em 0.5em 0 0.5em;\n  text-align: center;\n}\nfigure.inline {\n  border: none;\n  margin: 0;\n}\nfigure canvas {\n  display: inline-block;\n  background: white;\n  border: 1px solid lightgrey;\n}\nfigure figcaption {\n  text-align: center;\n  padding: 0.5em 0;\n  font-style: italic;\n  font-size: 90%;\n}\ndiv.figure {\n  display: inline-block;\n  border: 1px solid grey;\n  text-align: center;\n}\ngithub-issues {\n  position: relative;\n  display: block;\n  width: 100%;\n  border: 1px solid #EEE;\n  border-left: 0.3em solid #e5ecf3;\n  background: white;\n  padding: 0 0.3em;\n  width: 95%;\n  margin: auto;\n  min-height: 33px;\n  font: 13px Helvetica, arial, freesans, clean, sans-serif;\n}\ngithub-issues github-issue + github-issue {\n  margin-top: 1em;\n}\ngithub-issues github-issue h3 {\n  font-size: 100%;\n  background: #e5ecf3;\n  margin: 0;\n  position: relative;\n  left: -0.5%;\n  width: 101%;\n  font-weight: bold;\n  border-bottom: 1px solid #999;\n}\ngithub-issues github-issue a {\n  position: absolute;\n  top: 2px;\n  right: 10px;\n  padding: 0 4px;\n  color: #4183C4!important;\n  background: white;\n  line-height: 10px;\n  font-size: 10px;\n}\nimg.LaTeX {\n  display: block;\n  margin-left: 2em;\n}\n", ""]);
 
 	// exports
 
 
 /***/ },
-/* 187 */
+/* 185 */
 /***/ function(module, exports) {
 
 	/*
@@ -26033,13 +25987,13 @@
 
 
 /***/ },
-/* 188 */
+/* 186 */
 /***/ function(module, exports, __webpack_require__) {
 
 	module.exports = __webpack_require__.p + "images/packed/7d3b28205544712db60d1bb7973f10f3.png";
 
 /***/ },
-/* 189 */
+/* 187 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/*
diff --git a/components/sections/control/index.js b/components/sections/control/index.js
index b1b5abc3..9e152ff8 100644
--- a/components/sections/control/index.js
+++ b/components/sections/control/index.js
@@ -1,7 +1,6 @@
 var React = require("react");
 var Graphic = require("../../Graphic.jsx");
 var SectionHeader = require("../../SectionHeader.jsx");
-var LaTeX = require("../../LaTeX.jsx");
 
 var Control = React.createClass({
   statics: {
@@ -211,14 +210,14 @@ var Control = React.createClass({
         point with a value that changes its strength. These values are conventionally called "Weights", and
         we can add them to our original Bézier function:</p>
 
-        <LaTeX>\[
+        <p>\[
           Bézier(n,t) = \sum_{i=0}^{n}
                         \underset{binomial\ term}{\underbrace{\binom{n}{i}}}
                         \cdot\
                         \underset{polynomial\ term}{\underbrace{(1-t)^{n-i} \cdot t^{i}}}
                         \cdot\
                         \underset{weight}{\underbrace{w_i}}
-        \]</LaTeX>
+        \]</p>
 
         <p>That looks complicated, but as it so happens, the "weights" are actually just the coordinate values
         we want our curve to have: for an <i>n<sup>th</sup></i> order curve, w<sub>0</sub> is our start coordinate,
@@ -226,11 +225,11 @@ var Control = React.createClass({
         a cubic curve that starts at (120,160), is controlled by (35,200) and (220,260) and ends at (220,40),
         we use this Bézier curve:</p>
 
-        <LaTeX>\[
+        <p>\[
         \left \{ \begin{matrix}
           x = BLUE[120] \cdot (1-t)^3 + BLUE[35] \cdot 3 \cdot (1-t)^2 \cdot t + BLUE[220] \cdot 3 \cdot (1-t) \cdot t^2 + BLUE[220] \cdot t^3 \\
           y = BLUE[160] \cdot (1-t)^3 + BLUE[200] \cdot 3 \cdot (1-t)^2 \cdot t + BLUE[260] \cdot 3 \cdot (1-t) \cdot t^2 + BLUE[40] \cdot t^3
-        \end{matrix} \right. \]</LaTeX>
+        \end{matrix} \right. \]</p>
 
         <p>Which gives us the curve we saw at the top of the article:</p>
 
diff --git a/components/sections/decasteljau/index.js b/components/sections/decasteljau/index.js
index d7c993e8..4236c0d3 100644
--- a/components/sections/decasteljau/index.js
+++ b/components/sections/decasteljau/index.js
@@ -1,7 +1,6 @@
 var React = require("react");
 var Graphic = require("../../Graphic.jsx");
 var SectionHeader = require("../../SectionHeader.jsx");
-var LaTeX = require("../../LaTeX.jsx");
 
 var deCasteljau = React.createClass({
   statics: {
diff --git a/components/sections/explanation/index.js b/components/sections/explanation/index.js
index 13d5a93a..e6da38a7 100644
--- a/components/sections/explanation/index.js
+++ b/components/sections/explanation/index.js
@@ -1,7 +1,6 @@
 var React = require("react");
 var Graphic = require("../../Graphic.jsx");
 var SectionHeader = require("../../SectionHeader.jsx");
-var LaTeX = require("../../LaTeX.jsx");
 
 var Explanation = React.createClass({
   statics: {
@@ -29,9 +28,9 @@ var Explanation = React.createClass({
         Let's say we have a function that maps some value, let's call it <i>x</i>, to
         some other value, using some kind of number manipulation:</p>
 
-        <LaTeX>\[
+        <p>\[
           f(x) = \cos(x)
-        \]</LaTeX>
+        \]</p>
 
         <p>The notation <i>f(x)</i> is the standard way to show that it's a function (by convention
         called <i>f</i> if we're only listing one) and its output changes based on one variable
@@ -40,10 +39,10 @@ var Explanation = React.createClass({
         <p>So far so good. Now, let's look at parametric functions, and how they cheat.
         Let's take the following two functions:</p>
 
-        <LaTeX>\[\begin{matrix}
+        <p>\[\begin{matrix}
           f(a) = \cos(a) \\
           f(b) = \sin(b)
-        \end{matrix}\]</LaTeX>
+        \end{matrix}\]</p>
 
         <p>There's nothing really remarkable about them, they're just a sine and cosine function,
         but you'll notice the inputs have different names. If we change the value for <i>a</i>,
@@ -51,11 +50,11 @@ var Explanation = React.createClass({
         in that function. Parametric functions cheat by changing that. In a parametric function
         all the different functions share a variable, like this:</p>
 
-        <LaTeX>\[
+        <p>\[
         \left \{ \begin{matrix}
           f_a(t) = \cos(t) \\
           f_b(t) = \sin(t)
-        \end{matrix} \right. \]</LaTeX>
+        \end{matrix} \right. \]</p>
 
         <p>Multiple functions, but only one variable. If we change the value for <i>t</i>,
         we change the outcome of both <i>f<sub>a</sub>(t)</i> and <i>f<sub>b</sub>(t)</i>.
@@ -63,11 +62,11 @@ var Explanation = React.createClass({
         we change the labels <i>f<sub>a</sub>(t)</i> and <i>f<sub>b</sub>(t)</i> with what
         we usually mean with them for parametric curves, things might be a lot more obvious:</p>
 
-        <LaTeX>\[
+        <p>\[
         \left \{ \begin{matrix}
           x = \cos(t) \\
           y = \sin(t)
-        \end{matrix} \right. \]</LaTeX>
+        \end{matrix} \right. \]</p>
 
         <p>There we go. <i>x</i>/<i>y</i> coordinates, linked through some mystery value <i>t</i>.</p>
 
@@ -89,9 +88,9 @@ var Explanation = React.createClass({
 
         <p>You may remember polynomials from high school, where they're those sums that look like:</p>
 
-        <LaTeX>\[
+        <p>\[
           f(x) = a \cdot x^3 + b \cdot x^2 + c \cdot x + d
-        \]</LaTeX>
+        \]</p>
 
         <p>If they have a highest order term <i>x³</i> they're called "cubic" polynomials, if it's
         <i>x²</i> it's a "square" polynomial, if it's just <i>x</i> it's a line (and if there aren't
@@ -101,21 +100,21 @@ var Explanation = React.createClass({
         fixed being between 0 and 1, with coefficients <i>a</i>, <i>b</i> etc. taking the "binomial"
         form, which sounds fancy but is actually a pretty simple description for mixing values:</p>
 
-        <LaTeX>\[ \begin{align*}
+        <p>\[ \begin{align*}
           linear &= (1-t) + t \\
           square &= (1-t)^2 + 2 \cdot (1-t) \cdot t + t^2 \\
           cubic &= (1-t)^3 + 3 \cdot (1-t)^2 \cdot t + 3 \cdot (1-t) \cdot t^2 + t^3
-        \end{align*} \]</LaTeX>
+        \end{align*} \]</p>
 
         <p>I know what you're thinking: that doesn't look too simple, but if we remove <i>t</i> and
         add in "times one", things suddenly look pretty easy. Check out these binomial terms:</p>
 
-        <LaTeX>\[ \begin{align*}
+        <p>\[ \begin{align*}
           linear &= \hskip{2.5em} 1 + 1 \\
           square &= \hskip{1.7em} 1 + 2 + 1\\
           cubic &= \hskip{0.85em} 1 + 3 + 3 + 1\\
           hypercubic &= 1 + 4 + 6 + 4 + 1
-        \end{align*} \]</LaTeX>
+        \end{align*} \]</p>
 
         <p>Notice that 2 is the same as 1+1, and 3 is 2+1 and 1+2, and 6 is 3+3... As you
         can see, each time we go up a dimension, we simply start and end with 1, and everything
@@ -126,23 +125,23 @@ var Explanation = React.createClass({
         if we rename <i>(1-t)</i> to <i>a</i> and <i>t</i> to <i>b</i>, and remove the weights
         for a moment, we get this:</p>
 
-        <LaTeX>\[ \begin{align*}
+        <p>\[ \begin{align*}
           linear &= BLUE[a] + RED[b] \\
           square &= BLUE[a] \cdot BLUE[a] + BLUE[a] \cdot RED[b] + RED[b] \cdot RED[b] \\
           cubic &= BLUE[a] \cdot BLUE[a] \cdot BLUE[a] + BLUE[a] \cdot BLUE[a] \cdot RED[b] + BLUE[a] \cdot RED[b] \cdot RED[b] + RED[b] \cdot RED[b] \cdot RED[b]\\
-        \end{align*} \]</LaTeX>
+        \end{align*} \]</p>
 
         <p>It's basically just a sum of "every combination of <i>a</i> and <i>b</i>", progressively
         replacing <i>a</i>'s with <i>b</i>'s after every + sign. So that's actually pretty simple
         too. So now you know binomial polynomials, and just for completeness I'm going to show
         you the generic function for this:</p>
 
-        <LaTeX>\[
+        <p>\[
           Bézier(n,t) = \sum_{i=0}^{n}
                         \underset{binomial\ term}{\underbrace{\binom{n}{i}}}
                         \cdot\
                         \underset{polynomial\ term}{\underbrace{(1-t)^{n-i} \cdot t^{i}}}
-        \]</LaTeX>
+        \]</p>
 
         <p>And that's the full description for Bézier curves. Σ in this function indicates that this is
         a series of additions (using the variable listed below the Σ, starting at ...=&lt;value&gt; and ending
diff --git a/components/sections/matrix/index.js b/components/sections/matrix/index.js
index a445418d..aa69de2e 100644
--- a/components/sections/matrix/index.js
+++ b/components/sections/matrix/index.js
@@ -1,6 +1,5 @@
 var React = require("react");
 var SectionHeader = require("../../SectionHeader.jsx");
-var LaTeX = require("../../LaTeX.jsx");
 
 var Matrix = React.createClass({
   statics: {
@@ -16,85 +15,85 @@ var Matrix = React.createClass({
         as a polynomial basis function, the weight matrix, and the actual coordinates as matrix.
         Let's look at what this means for the cubic curve :</p>
 
-        <LaTeX>\[
+        <p>\[
           B(t) = P_1 \cdot (1-t)^3 + P_2 \cdot 3 \cdot (1-t)^2 \cdot t + P_3 \cdot 3 \cdot (1-t) \cdot t^2 + P_4 \cdot t^3
-        \]</LaTeX>
+        \]</p>
 
         <p>Disregarding our actual coordinates for a moment, we have:</p>
 
-        <LaTeX>\[
+        <p>\[
           B(t) = (1-t)^3 + 3 \cdot (1-t)^2 \cdot t + 3 \cdot (1-t) \cdot t^2 + t^3
-        \]</LaTeX>
+        \]</p>
 
         <p>We can write this as a sum of four expressions:</p>
 
-        <LaTeX>\[
+        <p>\[
           \begin{matrix}
            ... & = & (1-t)^3 \\
              & + & 3 \cdot (1-t)^2 \cdot t \\
              & + & 3 \cdot (1-t) \cdot t^2 \\
              & + & t^3 \\
           \end{matrix}
-        \]</LaTeX>
+        \]</p>
 
         <p>And we can expand these expressions:</p>
 
-        <LaTeX>\[
+        <p>\[
           \begin{matrix}
            ... & = & (1-t) \cdot (1-t) \cdot (1-t) & = & -t^3 + 3 \cdot t^2 - 3 \cdot t + 1 \\
              & + & 3 \cdot (1-t) \cdot (1-t) \cdot t & = & 3 \cdot t^3 - 6 \cdot t^2 + 3 \cdot t \\
              & + & 3 \cdot (1-t) \cdot t \cdot t & = & -3 \cdot t^3 + 3 \cdot t^2 \\
              & + & t \cdot t \cdot t & = & t^3 \\
           \end{matrix}
-        \]</LaTeX>
+        \]</p>
 
         <p>Furthermore, we can make all the 1 and 0 factors explicit:</p>
 
-        <LaTeX>\[
+        <p>\[
           \begin{matrix}
            ... & = & -1 \cdot t^3 + 3 \cdot t^2 - 3 \cdot t + 1 \\
              & + & +3 \cdot t^3 - 6 \cdot t^2 + 3 \cdot t + 0 \\
              & + & -3 \cdot t^3 + 3 \cdot t^2 + 0 \cdot t + 0 \\
              & + & +1 \cdot t^3 + 0 \cdot t^2 + 0 \cdot t + 0 \\
           \end{matrix}
-        \]</LaTeX>
+        \]</p>
 
         <p>And <em>that</em>, we can view as a series of four matrix operations:</p>
 
-        <LaTeX>\[
+        <p>\[
           \begin{bmatrix}t^3 & t^2 & t & 1\end{bmatrix} \cdot \begin{bmatrix}-1 \\ 3 \\ -3 \\ 1\end{bmatrix}
           + \begin{bmatrix}t^3 & t^2 & t & 1\end{bmatrix} \cdot \begin{bmatrix}3 \\ -6 \\ 3 \\ 0\end{bmatrix}
           + \begin{bmatrix}t^3 & t^2 & t & 1\end{bmatrix} \cdot \begin{bmatrix}-3 \\ 3 \\ 0 \\ 0\end{bmatrix}
           + \begin{bmatrix}t^3 & t^2 & t & 1\end{bmatrix} \cdot \begin{bmatrix}1 \\ 0 \\ 0 \\ 0\end{bmatrix}
-        \]</LaTeX>
+        \]</p>
 
         <p>If we compact this into a single matrix operation, we get:</p>
 
-        <LaTeX>\[
+        <p>\[
           \begin{bmatrix}t^3 & t^2 & t & 1\end{bmatrix} \cdot \begin{bmatrix}
               -1 &  3 & -3 & 1 \\
                3 & -6 &  3 & 0 \\
               -3 &  3 &  0 & 0 \\
                1 &  0 &  0 & 0
             \end{bmatrix}
-        \]</LaTeX>
+        \]</p>
 
         <p>This kind of polynomial basis representation is generally written with the bases in
         increasing order, which means we need to flip our <em>t</em> matrix horizontally, and our
         big "mixing" matrix upside down:</p>
 
-        <LaTeX>\[
+        <p>\[
           \begin{bmatrix}1 & t & t^2 & t^3\end{bmatrix} \cdot \begin{bmatrix}
                1 &  0 &  0 & 0 \\
               -3 &  3 &  0 & 0 \\
                3 & -6 &  3 & 0 \\
               -1 &  3 & -3 & 1
             \end{bmatrix}
-        \]</LaTeX>
+        \]</p>
 
         <p>And then finally, we can add in our original coordinates as a single third matrix:</p>
 
-        <LaTeX>\[
+        <p>\[
           B(t) = \begin{bmatrix}
           1 & t & t^2 & t^3
           \end{bmatrix}
@@ -109,11 +108,11 @@ var Matrix = React.createClass({
           \begin{bmatrix}
           P_1 \\ P_2 \\ P_3 \\ P_4
           \end{bmatrix}
-        \]</LaTeX>
+        \]</p>
 
         <p>We can perform the same trick for the quadratic curve, in which case we end up with:</p>
 
-        <LaTeX>\[
+        <p>\[
           B(t) = \begin{bmatrix}
           1 & t & t^2
           \end{bmatrix}
@@ -127,7 +126,7 @@ var Matrix = React.createClass({
           \begin{bmatrix}
           P_1 \\ P_2 \\ P_3
           \end{bmatrix}
-        \]</LaTeX>
+        \]</p>
 
         <p>If we plug in a <em>t</em> value, and then multiply the matrices, we will
         get exactly the same values as when we evaluate the original polynomial function,
diff --git a/components/sections/whatis/index.js b/components/sections/whatis/index.js
index ecdb13bc..7c6cf581 100644
--- a/components/sections/whatis/index.js
+++ b/components/sections/whatis/index.js
@@ -1,7 +1,6 @@
 var React = require("react");
 var Graphic = require("../../Graphic.jsx");
 var SectionHeader = require("../../SectionHeader.jsx");
-var LaTeX = require("../../LaTeX.jsx");
 
 
 var Whatis = React.createClass({
@@ -35,7 +34,7 @@ var Whatis = React.createClass({
         distance away from the first point (and thus 80% the distance away from the second point) then we
         can compute that really easily:</p>
 
-        <LaTeX>\[
+        <p>\[
         Given \left (
           \begin{align}
             p_1 &= some\ point \\
@@ -45,7 +44,7 @@ var Whatis = React.createClass({
           \end{align}
         \right ),\ our\ new\ point = p_1 + distance \cdot ratio
 
-        \]</LaTeX>
+        \]</p>
 
         <p>So let's look at that in action: the following graphic is interactive in that you can use your
         '+' and '-' keys to increase or decrease the interpolation distance, to see what happens. We start