diff --git a/src/routes/articles/Image.svelte b/src/routes/articles/Image.svelte
index 44e522b..1686f04 100644
--- a/src/routes/articles/Image.svelte
+++ b/src/routes/articles/Image.svelte
@@ -12,13 +12,8 @@
 <style>
 	.container {
         width: fit-content;
-        margin-left: auto;
         margin-right: auto;
-		background-color: #1d2021;
 		padding: 1em;
-		border: 1px solid #928374;
-		border-radius: 2px;
-		display: flex; /* Arrange images horizontally */
 		/* Removed flex properties from here */
         gap: 1em;
 	}
diff --git a/src/routes/articles/Layout.svelte b/src/routes/articles/Layout.svelte
index 2dd35d2..2548be4 100644
--- a/src/routes/articles/Layout.svelte
+++ b/src/routes/articles/Layout.svelte
@@ -33,10 +33,11 @@
 		min-width: 80ch;
 		max-width: 80ch;
 		text-wrap-mode: wrap;
+		text-wrap-style: pretty;
 		text-align: justify;
 
-		border-left: 1px solid #928374;
-		border-right: 1px solid #928374;
+		border-left: 1px solid #92837420;
+		border-right: 1px solid #92837420;
 	}
 
 	.padding {
diff --git a/src/routes/articles/Note.svelte b/src/routes/articles/Note.svelte
index b53654d..07b6353 100644
--- a/src/routes/articles/Note.svelte
+++ b/src/routes/articles/Note.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Info, BookCopy, Eye, Network, Sigma } from '@lucide/svelte';
-	let { title, type = 'info' } = $props();
+	import { Info, BookCopy, Eye, Network, Sigma, Image } from '@lucide/svelte';
+	let { title = '', type = 'info' } = $props();
 </script>
 
 <div class="note">
@@ -8,6 +8,8 @@
 		<div class="icon">
 			{#if type == 'info'}
 				<Info />
+			{:else if type == 'image'}
+				<Image />
 			{:else if type == 'diagram'}
 				<Network />
 			{:else if type == 'math'}
@@ -23,6 +25,8 @@
 			<div class="horiz_line" style:background-color="#8ec07c"></div>
 		{:else if type == 'diagram'}
 			<div class="horiz_line" style:background-color="#d3869b"></div>
+		{:else if type == 'image'}
+			<div class="horiz_line" style:background-color="#d3869b"></div>
 		{:else if type == 'math'}
 			<div class="horiz_line" style:background-color="#fe8019"></div>
 		{:else if type == 'review'}
@@ -37,6 +41,8 @@
 			<div class="line" style:background-color="#8ec07c"></div>
 		{:else if type == 'diagram'}
 			<div class="line" style:background-color="#d3869b"></div>
+		{:else if type == 'image'}
+			<div class="line" style:background-color="#d3869b"></div>
 		{:else if type == 'math'}
 			<div class="line" style:background-color="#fe8019"></div>
 		{:else if type == 'review'}
@@ -46,7 +52,9 @@
 		{/if}
 
 		<div class="slot">
-			<p>{title}</p>
+			{#if title != ''}
+				<p class="title">{title}</p>
+			{/if}
 			<slot />
 		</div>
 	</div>
@@ -55,6 +63,9 @@
 <style>
 	@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
 
+    .title {
+    }
+
 	.note {
 		display: block;
 		margin: 1em 0 1em 0;
diff --git a/src/routes/articles/Tip.svelte b/src/routes/articles/Tip.svelte
index 33c68f3..3e44855 100644
--- a/src/routes/articles/Tip.svelte
+++ b/src/routes/articles/Tip.svelte
@@ -15,7 +15,7 @@
         font-weight: 600;
         font-style: italic;
         color: #fabd2f;
-        border-bottom: 1px solid #fe8019;
+        border-bottom: 1px dotted  #fe8019;
 	}
 
 	/* Tooltip text */
@@ -32,7 +32,7 @@
 		text-align: justify;
         padding: 1em;
 		border-radius: 6px;
-        border: 1px dotted #fe8019;
+        border: 1px solid #fe8019;
 
 		top: 100%;
 		left: 50%;
diff --git a/src/routes/articles/article.css b/src/routes/articles/article.css
index c543926..b4a531d 100644
--- a/src/routes/articles/article.css
+++ b/src/routes/articles/article.css
@@ -50,3 +50,8 @@ a:hover {
 	width: max-content;
 	margin-left: 0;
 }
+
+.katex-display {
+    margin-top: 0;
+
+}
diff --git a/src/routes/articles/the-graphics-pipeline/+page.svx b/src/routes/articles/the-graphics-pipeline/+page.svx
index 5902bb3..996b61b 100644
--- a/src/routes/articles/the-graphics-pipeline/+page.svx
+++ b/src/routes/articles/the-graphics-pipeline/+page.svx
@@ -64,14 +64,18 @@ stage and have a recap afterwards!
 
 Ever been jump-scared by this sight in an <Tip text="FPS">First Person (Shooter) perspective</Tip>? Why are (the inside of) things rendered like that?
 
+<Note title="Boo!", type="image">
+
 <Image 
     paths={["/images/boo.png"]} 
 /> 
 
+</Note>
+
 
 In order to display a (murder) scene, 
 we need to have a way of **representing** the **surface** of its composing objects (like corpses) in computer memory.
-We only care about the **surface** since we won't be seeing the insides anyway---Not with that attitude.
+We only care about the **surface** since we won't be seeing the insides anyway---Not that we want to.
 At this stage, we only care about the **shape** or the **geometry** of the **surface**.
 Texturing, lighting, and all the sweet gory details come at a much later stage once all the **geometry** has been processed.
 
@@ -94,19 +98,27 @@ hundreds of thousands of objects (like a lot of corpses) in under a small fracti
 We can achieve this approximation using a collection of **triangles**, **lines**, and **dots** (primitives),
 which themselves are composed of a series of **vertices** (points in space).
 
+<Note title="A sphere made out of triangles", type="image">
+
 <Image 
     paths={["/images/polygon_sphere.webp"]} 
 /> 
 
+</Note>
+
 A **vertex** is simply a point in space.
 Once we get enough of these **points**, we can connect them to form **primitives** such as **triangles**, **lines**, and **dots**.
 And once we connect enough of these **primitives** together, they form a **model** or a **mesh** (that we need for our corpse).
 With some interesting models put together, we can compose a **scene** (like a murder scene :D).
 
+<Note title="Stanford bunny model in increasing level of detail (LoD)", type="image">
+
 <Image 
     paths={["/images/bunny.jpg"]} 
 /> 
 
+</Note>
+
 But let's not get ahead of ourselves. The primary type of **primitive** that we care about during **polygonal modeling**
 is a **triangle**. But why not squares or polygons with a variable number of edges?
 
@@ -116,10 +128,14 @@ In <Tip text="Euclidean geometry"> Developed by **Euclid** around 300 BCE, is ba
 any polygon composed of more than 3 points may break this rule, but why does polygons residing in one plane so important 
 to us?
 
+<Note title="Planar vs Non-Planar polygons" type="image">
+
 <Image 
     paths={["/images/planar.jpg", "/images/non_planar_1.jpg", "/images/non_planar_2.png"]} 
 /> 
 
+</Note>
+
 When a polygon exists only in one plane, we can safely imply that **only one face** of it can be visible
 at any one time; this enables us to utilize a huge optimization technique called **back-face culling**.
 Which means we avoid wasting a ton of **precious processing time** on the polygons that 
@@ -136,7 +152,7 @@ Also, it is a common practice in computer science to break down hard problems in
 This will be a lot more convincing when we cover the **rasterization** stage :)
 
 
-<Note title="Bonus point: evolution", type="info">
+<Note title="Bonus point, evolution", type="info">
 
 present-day **hardware** and **algorithms** have become **extremely efficient** at processing 
 triangles by doing operations such as sorting, rasterizing, etc, after eons of evolving around them.
@@ -152,98 +168,133 @@ of the primitives to be generated from our set of vertices by
 configuring the **primitive topology** of the **input assembler**.
 We'll get into the **input assembler** bit in a second, but let's clarify the topology with some examples.
 
-**Point list**:
+When the topology is **point list**, each **consecutive vertex** (v) defines a **single point** primitive (p)
+and the number of primitives (n_p) is equals to the number of vertices (n_v).
 
-When the topology is point list, each **consecutive vertex** defines a **single point** primitive, according to the equation:
-<Note title="equation", type="math">
+<Note title="", type="image">
+
+<Image 
+    paths={["/images/primitive_topology_point_list.svg"]} 
+/> 
+
+</Note>
+
+<Note type="math">
 
 ```math
-p_i = \{ v_{i} \}
+\begin{aligned}
+&p_i = \{ v_{i} \} \\ &n_p = n_v
+\end{aligned}
 ```
 
 </Note>
 
-**Line list**:
+When the topology is **line list**, each **consecutive pair of vertices** defines a **single line**
 
-When the primitive topology is line list, each **consecutive pair of vertices** defines a **single line**, according to the equation:
+<Note title="", type="image">
 
-<Note title="equation", type="math">
-
-```math
-p_i = \{ v_{2i},\ v_{2i+1} \}
-```
+<Image 
+    paths={["/images/primitive_topology_line_list.svg"]} 
+/> 
 
 </Note>
 
-The number of primitives generated is equal to ⌊vertex_count / 2⌋.
+<Note  type="math">
 
-**Line Strip**:
+```math
+\begin{aligned}
+&p_i = \{ v_{2i},\ v_{2i+1} \} \\ &n_p = ⌊ n_v / 2 ⌋
+\end{aligned}
+```
+
+</Note>
 
 When the primitive topology is line strip, **one line** is defined by each **vertex and the following vertex**, according to the equation:
 
-<Note title="equation", type="math">
+<Note title="", type="image">
 
-```math
-    p_i = \{ v_i, v_{i+1} \}
-```
+<Image 
+    paths={["/images/primitive_topology_line_strip.svg"]} 
+/> 
 
 </Note>
 
-The number of primitives generated is equal to max(0, vertex_count - 1).
 
-**Triangle list**:
+<Note  type="math">
+
+```math
+\begin{aligned}
+    &p_i = \{ v_i, v_{i+1} \} \\ &n_p = \text{max}(0, n_v - 1)
+\end{aligned}
+```
+
+</Note>
 
 When the primitive topology is triangle list, each **consecutive set of three vertices** defines a **single triangle**, according to the equation:
-<Note title="equation", type="math">
 
-```math
-    p_i = \{ v_{3i}, v_{3i+1}, v_{3i+2} \}
-```
+<Note title="", type="image">
+
+<Image 
+    paths={["/images/primitive_topology_triangle_list.svg"]} 
+/> 
 
 </Note>
 
+<Note  type="math">
 
-The number of primitives generated is equal to ⌊vertex_count / 3⌋.
+```math
+\begin{aligned}
+    &p_i = \{ v_{3i}, v_{3i+1}, v_{3i+2} \} \\ &n_p = ⌊n_v / 3⌋
+\end{aligned}
+```
 
-**Triangle strip**:
+</Note>
 
 When the primitive topology is triangle strip, **one triangle** is defined by each **vertex and the two vertices that follow it**, according to the equation:
 
-<Note title="equation", type="math">
+<Note title="", type="image">
+
+<Image 
+    paths={["/images/primitive_topology_triangle_strip.svg"]} 
+/> 
+
+</Note>
+
+<Note  type="math">
 
 ```math
-    p_i = \{ v_i,\ v_{i + (1 + i \bmod 2)},\ v_{i + (2 - i \bmod 2)} \}
+\begin{aligned}
+    &p_i = \{ v_i,\ v_{i + (1 + i \bmod 2)},\ v_{i + (2 - i \bmod 2)} \} \\ &n_p = \text{max}(0,  n_v- 2)
+\end{aligned}
 ```
 
 </Note>
 
 
-The number of primitives generated is equal to max(0, vertex_count - 2).
-
-**Triangle fan**:
-
 When the primitive topology is trinagle fan, triangleas are defined **around a shared common vertex**, according to the equation:
 
-<Note title="equation", type="math">
+<Note title="", type="image">
+
+<Image 
+    paths={["/images/primitive_topology_triangle_fan.svg"]} 
+/> 
+
+</Note>
+
+<Note type="math">
 
 ```math
-    p_i = \{ v_{i+1}, v_{i+2}, v_0 \}
+\begin{aligned}
+    &p_i = \{ v_{i+1}, v_{i+2}, v_0 \} \\ &n_p = \text{max}(0, n_v - 2)
+\end{aligned}
 ```
 
 </Note>
 
-
-The number of primitives generated is equal to max(0, vertex_count - 2).
-
-There's also some topologies suffixed with the word **adjacency**, and a special type of primitive called **patch** primitive.
-But for the sake of simplicity we won't get into them.
-
-So what's next?
-
 ## Indices
-Great, we got our vertices, we figured out how to connect them, but there's one last thing we need
-to understand before we can **assemble** our input using the **input assembler**. The **indices**.
-
+Indices are an array of integers that reference vertices in a vertex buffer.
+They define the order in which vertices are used to form primitives (triangles, strips, etc.),
+allowing vertex reuse and reducing memory usage. Instead of duplicating vertex data, indices let you build complex geometry efficiently.
 
 ## **Input Assembler**
 Every section before this explained terminologies needed to grasp this,
diff --git a/static/images/primitive_topology_line_list.svg b/static/images/primitive_topology_line_list.svg
new file mode 100644
index 0000000..d9d6bd9
--- /dev/null
+++ b/static/images/primitive_topology_line_list.svg
@@ -0,0 +1,126 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="89.898438"
+   height="107.35807"
+   viewBox="0 0 89.898439 107.35807"
+   version="1.1"
+   id="svg8653"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs8647">
+    <marker
+       style="overflow:visible"
+       id="DartArrow"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="1"
+       markerHeight="1"
+       viewBox="0 0 1 1"
+       preserveAspectRatio="xMidYMid">
+      <path
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         d="M 0,0 5,-5 -12.5,0 5,5 Z"
+         transform="scale(-0.5)"
+         id="path6" />
+    </marker>
+  </defs>
+  <metadata
+     id="metadata8650">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427"
+     x="5.0234375"
+     y="12.867185"
+     id="text5070-2-2-9-9"><tspan
+       id="tspan5068-0-3-36-9"
+       x="5.0234375"
+       y="12.867185"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427">0</tspan></text>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427"
+     x="5.0234375"
+     y="92.86718"
+     id="text5070-2-2-9-9-7"><tspan
+       id="tspan5068-0-3-36-9-6"
+       x="5.0234375"
+       y="92.86718"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427">2</tspan></text>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427"
+     x="85.023438"
+     y="12.867185"
+     id="text5070-2-2-9-9-6"><tspan
+       id="tspan5068-0-3-36-9-4"
+       x="85.023438"
+       y="12.867185"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427">1</tspan></text>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427"
+     x="85.023438"
+     y="92.86718"
+     id="text5070-2-2-9-9-77"><tspan
+       id="tspan5068-0-3-36-9-5"
+       x="85.023438"
+       y="92.86718"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427">3</tspan></text>
+  <circle
+     style="fill:#f9f9f9;fill-opacity:1;stroke:#f9f9f9;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="path4517-0-8-5-2"
+     cx="85.023438"
+     cy="22.86717"
+     r="3.4908931" />
+  <circle
+     style="fill:#f9f9f9;fill-opacity:1;stroke:#f9f9f9;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="path4517-0-8-5-2-4"
+     cx="85.023438"
+     cy="102.86718"
+     r="3.4908931" />
+  <path
+     style="fill:#f9f9f9;stroke:#f9f9f9;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 5.023437,22.86718 H 85.023434"
+     id="path2033" />
+  <path
+     style="fill:#f9f9f9;stroke:#f9f9f9;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 5.023437,102.86718 H 85.023434"
+     id="path2033-5" />
+  <circle
+     style="fill:#f9f9f9;fill-opacity:1;stroke:#f9f9f9;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="path4517-0-8-5-91-0-3"
+     cx="5.0234375"
+     cy="102.86718"
+     r="3.4908931" />
+  <circle
+     style="fill:#f9f9f9;fill-opacity:1;stroke:#f9f9f9;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="path4517-0-8-5-91-0-3-8"
+     cx="5.0234375"
+     cy="22.867186"
+     r="3.4908931" />
+  <path
+     style="fill:#f9f9f9;stroke:#f9f9f9;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#DartArrow)"
+     d="m 20.023434,17.86718 c 16.66767,0 33.33433,0 50,0"
+     id="path5581" />
+  <path
+     id="path5885"
+     d="m 20.023434,97.86718 c 16.66767,0 33.33433,0 50,0"
+     style="fill:#f9f9f9;stroke:#f9f9f9;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#DartArrow)" />
+</svg>
diff --git a/static/images/primitive_topology_line_strip.svg b/static/images/primitive_topology_line_strip.svg
new file mode 100644
index 0000000..e486015
--- /dev/null
+++ b/static/images/primitive_topology_line_strip.svg
@@ -0,0 +1,126 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="249.89841"
+   height="27.365885"
+   viewBox="0 0 249.89841 27.365885"
+   version="1.1"
+   id="svg8653"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs8647">
+    <marker
+       style="overflow:visible"
+       id="DartArrow"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="1"
+       markerHeight="1"
+       viewBox="0 0 1 1"
+       preserveAspectRatio="xMidYMid">
+      <path
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         d="M 0,0 5,-5 -12.5,0 5,5 Z"
+         transform="scale(-0.5)"
+         id="path6" />
+    </marker>
+  </defs>
+  <metadata
+     id="metadata8650">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427"
+     x="5.0234332"
+     y="12.875005"
+     id="text5070-2-2-9-9-8"><tspan
+       id="tspan5068-0-3-36-9-9"
+       x="5.0234332"
+       y="12.875005"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427">0</tspan></text>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427"
+     x="165.02344"
+     y="12.875005"
+     id="text5070-2-2-9-9-7-7"><tspan
+       id="tspan5068-0-3-36-9-6-6"
+       x="165.02344"
+       y="12.875005"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427">2</tspan></text>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427"
+     x="85.02343"
+     y="12.875005"
+     id="text5070-2-2-9-9-6-2"><tspan
+       id="tspan5068-0-3-36-9-4-8"
+       x="85.02343"
+       y="12.875005"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427">1</tspan></text>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427"
+     x="245.02341"
+     y="12.875005"
+     id="text5070-2-2-9-9-77-5"><tspan
+       id="tspan5068-0-3-36-9-5-1"
+       x="245.02341"
+       y="12.875005"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427">3</tspan></text>
+  <circle
+     style="fill:#f9f9f9;fill-opacity:1;stroke:#f9f9f9;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="path4517-0-8-5-5-0-7"
+     cx="245.02341"
+     cy="22.874998"
+     r="3.4908931" />
+  <path
+     style="fill:#f9f9f9;stroke:#f9f9f9;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 5.02343,22.875 240,-5e-6"
+     id="path2085" />
+  <circle
+     style="fill:#f9f9f9;fill-opacity:1;stroke:#f9f9f9;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="path4517-0-8-5-91-0-3"
+     cx="5.0234332"
+     cy="22.874998"
+     r="3.4908931" />
+  <circle
+     style="fill:#f9f9f9;fill-opacity:1;stroke:#f9f9f9;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="path4517-0-8-5-91-0-3-9"
+     cx="85.02343"
+     cy="22.874998"
+     r="3.4908931" />
+  <circle
+     style="fill:#f9f9f9;fill-opacity:1;stroke:#f9f9f9;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="path4517-0-8-5-91-0-3-1"
+     cx="165.02344"
+     cy="22.874998"
+     r="3.4908931" />
+  <path
+     style="fill:#f9f9f9;stroke:#f9f9f9;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#DartArrow)"
+     d="m 20.02343,17.874995 c 16.66767,0 33.33433,0 50,0"
+     id="path16307" />
+  <path
+     id="path16954"
+     d="m 100.02343,17.874995 c 16.66767,0 33.33433,0 50,0"
+     style="fill:#f9f9f9;stroke:#f9f9f9;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#DartArrow)" />
+  <path
+     style="fill:#f9f9f9;stroke:#f9f9f9;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#DartArrow)"
+     d="m 180.02343,17.874995 c 16.66767,0 33.33433,0 50,0"
+     id="path17316" />
+</svg>
diff --git a/static/images/primitive_topology_point_list.svg b/static/images/primitive_topology_point_list.svg
new file mode 100644
index 0000000..448436e
--- /dev/null
+++ b/static/images/primitive_topology_point_list.svg
@@ -0,0 +1,334 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="200.14062"
+   height="147.16275"
+   viewBox="0 0 200.14063 147.16275"
+   version="1.1"
+   id="svg8653"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs8647">
+    <filter
+       style="color-interpolation-filters:sRGB"
+       id="filter2"
+       x="0"
+       y="0"
+       width="1"
+       height="1">
+      <feColorMatrix
+         values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 -0.21 -0.72 -0.07 2 0 "
+         result="fbSourceGraphic"
+         id="feColorMatrix2" />
+      <feColorMatrix
+         result="fbSourceGraphicAlpha"
+         in="fbSourceGraphic"
+         values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
+         id="feColorMatrix14" />
+      <feColorMatrix
+         id="feColorMatrix15"
+         values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 -0.21 -0.72 -0.07 2 0 "
+         result="color2"
+         in="fbSourceGraphic" />
+    </filter>
+    <filter
+       style="color-interpolation-filters:sRGB"
+       id="filter3"
+       x="0"
+       y="0"
+       width="1"
+       height="1">
+      <feColorMatrix
+         values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 -0.21 -0.72 -0.07 2 0 "
+         result="fbSourceGraphic"
+         id="feColorMatrix3" />
+      <feColorMatrix
+         result="fbSourceGraphicAlpha"
+         in="fbSourceGraphic"
+         values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
+         id="feColorMatrix16" />
+      <feColorMatrix
+         id="feColorMatrix17"
+         values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 -0.21 -0.72 -0.07 2 0 "
+         result="color2"
+         in="fbSourceGraphic" />
+    </filter>
+    <filter
+       style="color-interpolation-filters:sRGB"
+       id="filter4"
+       x="0"
+       y="0"
+       width="1"
+       height="1">
+      <feColorMatrix
+         values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 -0.21 -0.72 -0.07 2 0 "
+         result="fbSourceGraphic"
+         id="feColorMatrix4" />
+      <feColorMatrix
+         result="fbSourceGraphicAlpha"
+         in="fbSourceGraphic"
+         values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
+         id="feColorMatrix18" />
+      <feColorMatrix
+         id="feColorMatrix19"
+         values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 -0.21 -0.72 -0.07 2 0 "
+         result="color2"
+         in="fbSourceGraphic" />
+    </filter>
+    <filter
+       style="color-interpolation-filters:sRGB"
+       id="filter5"
+       x="0"
+       y="0"
+       width="1"
+       height="1">
+      <feColorMatrix
+         values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 -0.21 -0.72 -0.07 2 0 "
+         result="fbSourceGraphic"
+         id="feColorMatrix5" />
+      <feColorMatrix
+         result="fbSourceGraphicAlpha"
+         in="fbSourceGraphic"
+         values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
+         id="feColorMatrix20" />
+      <feColorMatrix
+         id="feColorMatrix21"
+         values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 -0.21 -0.72 -0.07 2 0 "
+         result="color2"
+         in="fbSourceGraphic" />
+    </filter>
+    <filter
+       style="color-interpolation-filters:sRGB"
+       id="filter6"
+       x="0"
+       y="0"
+       width="1"
+       height="1">
+      <feColorMatrix
+         values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 -0.21 -0.72 -0.07 2 0 "
+         result="fbSourceGraphic"
+         id="feColorMatrix6" />
+      <feColorMatrix
+         result="fbSourceGraphicAlpha"
+         in="fbSourceGraphic"
+         values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
+         id="feColorMatrix22" />
+      <feColorMatrix
+         id="feColorMatrix23"
+         values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 -0.21 -0.72 -0.07 2 0 "
+         result="color2"
+         in="fbSourceGraphic" />
+    </filter>
+    <filter
+       style="color-interpolation-filters:sRGB"
+       id="filter7"
+       x="0"
+       y="0"
+       width="1"
+       height="1">
+      <feColorMatrix
+         values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 -0.21 -0.72 -0.07 2 0 "
+         result="fbSourceGraphic"
+         id="feColorMatrix7" />
+      <feColorMatrix
+         result="fbSourceGraphicAlpha"
+         in="fbSourceGraphic"
+         values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
+         id="feColorMatrix24" />
+      <feColorMatrix
+         id="feColorMatrix25"
+         values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 -0.21 -0.72 -0.07 2 0 "
+         result="color2"
+         in="fbSourceGraphic" />
+    </filter>
+    <filter
+       style="color-interpolation-filters:sRGB"
+       id="filter8"
+       x="0"
+       y="0"
+       width="1"
+       height="1">
+      <feColorMatrix
+         values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 -0.21 -0.72 -0.07 2 0 "
+         result="fbSourceGraphic"
+         id="feColorMatrix8" />
+      <feColorMatrix
+         result="fbSourceGraphicAlpha"
+         in="fbSourceGraphic"
+         values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
+         id="feColorMatrix26" />
+      <feColorMatrix
+         id="feColorMatrix27"
+         values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 -0.21 -0.72 -0.07 2 0 "
+         result="color2"
+         in="fbSourceGraphic" />
+    </filter>
+    <filter
+       style="color-interpolation-filters:sRGB"
+       id="filter9"
+       x="0"
+       y="0"
+       width="1"
+       height="1">
+      <feColorMatrix
+         values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 -0.21 -0.72 -0.07 2 0 "
+         result="fbSourceGraphic"
+         id="feColorMatrix9" />
+      <feColorMatrix
+         result="fbSourceGraphicAlpha"
+         in="fbSourceGraphic"
+         values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
+         id="feColorMatrix28" />
+      <feColorMatrix
+         id="feColorMatrix29"
+         values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 -0.21 -0.72 -0.07 2 0 "
+         result="color2"
+         in="fbSourceGraphic" />
+    </filter>
+    <filter
+       style="color-interpolation-filters:sRGB"
+       id="filter10"
+       x="0"
+       y="0"
+       width="1"
+       height="1">
+      <feColorMatrix
+         values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 -0.21 -0.72 -0.07 2 0 "
+         result="fbSourceGraphic"
+         id="feColorMatrix10" />
+      <feColorMatrix
+         result="fbSourceGraphicAlpha"
+         in="fbSourceGraphic"
+         values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
+         id="feColorMatrix30" />
+      <feColorMatrix
+         id="feColorMatrix31"
+         values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 -0.21 -0.72 -0.07 2 0 "
+         result="color2"
+         in="fbSourceGraphic" />
+    </filter>
+    <filter
+       style="color-interpolation-filters:sRGB"
+       id="filter11"
+       x="0"
+       y="0"
+       width="1"
+       height="1">
+      <feColorMatrix
+         values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 -0.21 -0.72 -0.07 2 0 "
+         result="fbSourceGraphic"
+         id="feColorMatrix11" />
+      <feColorMatrix
+         result="fbSourceGraphicAlpha"
+         in="fbSourceGraphic"
+         values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
+         id="feColorMatrix32" />
+      <feColorMatrix
+         id="feColorMatrix33"
+         values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 -0.21 -0.72 -0.07 2 0 "
+         result="color2"
+         in="fbSourceGraphic" />
+    </filter>
+  </defs>
+  <metadata
+     id="metadata8650">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     transform="translate(52.301544,180.70697)">
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427;filter:url(#filter11)"
+       x="12.534395"
+       y="-108.03511"
+       id="text5070-2-2-9-9"><tspan
+         id="tspan5068-0-3-36-9"
+         x="12.534395"
+         y="-108.03511"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke-width:1.16427">0</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427;filter:url(#filter10)"
+       x="142.53439"
+       y="-118.03511"
+       id="text5070-2-2-9-9-1"><tspan
+         id="tspan5068-0-3-36-9-3"
+         x="142.53439"
+         y="-118.03511"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke-width:1.16427">4</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427;filter:url(#filter9)"
+       x="-47.465607"
+       y="-148.03511"
+       id="text5070-2-2-9-9-7"><tspan
+         id="tspan5068-0-3-36-9-6"
+         x="-47.465607"
+         y="-148.03511"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke-width:1.16427">2</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427;filter:url(#filter8)"
+       x="52.534393"
+       y="-168.0351"
+       id="text5070-2-2-9-9-6"><tspan
+         id="tspan5068-0-3-36-9-4"
+         x="52.534393"
+         y="-168.0351"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke-width:1.16427">1</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427;filter:url(#filter7)"
+       x="92.534393"
+       y="-48.03511"
+       id="text5070-2-2-9-9-77"><tspan
+         id="tspan5068-0-3-36-9-5"
+         x="92.534393"
+         y="-48.03511"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke-width:1.16427">3</tspan></text>
+    <circle
+       style="fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter6)"
+       id="path4517-0-8-5-8"
+       cx="142.53439"
+       cy="-108.03511"
+       r="3.4908931" />
+    <circle
+       style="fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter5)"
+       id="path4517-0-8-5-91"
+       cx="52.534393"
+       cy="-158.03511"
+       r="3.4908931" />
+    <circle
+       style="fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter4)"
+       id="path4517-0-8-5-2"
+       cx="92.534393"
+       cy="-38.03511"
+       r="3.4908931" />
+    <circle
+       style="fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter3)"
+       id="path4517-0-8-5-25"
+       cx="-47.465607"
+       cy="-138.03511"
+       r="3.4908931" />
+    <circle
+       style="fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter2)"
+       id="path4517-0-8-5-5"
+       cx="12.534393"
+       cy="-98.03511"
+       r="3.4908931" />
+  </g>
+</svg>
diff --git a/static/images/primitive_topology_triangle_fan.svg b/static/images/primitive_topology_triangle_fan.svg
new file mode 100644
index 0000000..c9ced8b
--- /dev/null
+++ b/static/images/primitive_topology_triangle_fan.svg
@@ -0,0 +1,171 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="169.79558"
+   height="104.11718"
+   viewBox="0 0 169.79558 104.11718"
+   version="1.1"
+   id="svg8653"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs8647">
+    <marker
+       style="overflow:visible"
+       id="DartArrow"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="1"
+       markerHeight="1"
+       viewBox="0 0 1 1"
+       preserveAspectRatio="xMidYMid">
+      <path
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         d="M 0,0 5,-5 -12.5,0 5,5 Z"
+         transform="scale(-0.5)"
+         id="path6" />
+    </marker>
+  </defs>
+  <metadata
+     id="metadata8650">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     transform="translate(-248.0435,180.9101)">
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427"
+       x="332.53439"
+       y="-78.035103"
+       id="text5070-2-2-9-9-75"><tspan
+         id="tspan5068-0-3-36-9-68"
+         x="332.53439"
+         y="-78.035103"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke-width:1.16427">0</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427"
+       x="412.53439"
+       y="-78.035103"
+       id="text5070-2-2-9-9-1-4"><tspan
+         id="tspan5068-0-3-36-9-3-6"
+         x="412.53439"
+         y="-78.035103"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke-width:1.16427">4</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427"
+       x="292.53439"
+       y="-168.0351"
+       id="text5070-2-2-9-9-7-4"><tspan
+         id="tspan5068-0-3-36-9-6-3"
+         x="292.53439"
+         y="-168.0351"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke-width:1.16427">2</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427"
+       x="252.53439"
+       y="-78.035103"
+       id="text5070-2-2-9-9-6-2"><tspan
+         id="tspan5068-0-3-36-9-4-4"
+         x="252.53439"
+         y="-78.035103"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke-width:1.16427">1</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427"
+       x="372.53439"
+       y="-168.0351"
+       id="text5070-2-2-9-9-77-2"><tspan
+         id="tspan5068-0-3-36-9-5-2"
+         x="372.53439"
+         y="-168.0351"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke-width:1.16427">3</tspan></text>
+    <circle
+       style="fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4517-0-8-5-8-0"
+       cx="412.53439"
+       cy="-98.035095"
+       r="3.4908931" />
+    <path
+       style="fill:none;stroke:#f9f9f9;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 252.53439,-98.0351 40,-59.99999 h 80 l 40,59.99999 z m 40,-59.99999 40,59.99999 40,-59.99999"
+       id="path875-4" />
+    <path
+       id="path1868-1"
+       d="m 267.53439,-113.0351 20,-30"
+       style="fill:none;stroke:#f9f9f9;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#DartArrow)" />
+    <path
+       id="path1870-2"
+       d="m 297.53439,-143.0351 20,30"
+       style="fill:none;stroke:#f9f9f9;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#DartArrow)" />
+    <path
+       id="path1872-1"
+       d="m 317.53439,-103.0351 h -50"
+       style="fill:none;stroke:#f9f9f9;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#DartArrow)" />
+    <path
+       id="path1868-6-6"
+       d="m 347.19583,-112.35392 20,-30"
+       style="fill:none;stroke:#f9f9f9;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#DartArrow)" />
+    <path
+       id="path1870-4-3"
+       d="m 377.19583,-142.35392 20,30"
+       style="fill:none;stroke:#f9f9f9;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#DartArrow)" />
+    <path
+       id="path1872-0-9"
+       d="m 397.19583,-102.35392 h -50"
+       style="fill:none;stroke:#f9f9f9;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#DartArrow)" />
+    <path
+       id="path1868-08-3"
+       d="m 307.53439,-143.03509 20,30"
+       style="fill:none;stroke:#f9f9f9;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-start:url(#DartArrow)" />
+    <path
+       id="path1870-9-9"
+       d="m 337.53439,-113.03509 20,-30"
+       style="fill:none;stroke:#f9f9f9;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-start:url(#DartArrow)" />
+    <path
+       id="path1872-2-3"
+       d="m 357.53439,-153.03509 h -50"
+       style="fill:none;stroke:#f9f9f9;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-start:url(#DartArrow)" />
+    <circle
+       style="fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4517-0-8-5-91-0-3"
+       cx="292.53439"
+       cy="-158.03511"
+       r="3.4908931" />
+    <circle
+       style="fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4517-0-8-5-2-9"
+       cx="252.53439"
+       cy="-98.03511"
+       r="3.4908931" />
+    <circle
+       style="fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4517-0-8-5-2-9-7"
+       cx="332.53439"
+       cy="-98.03511"
+       r="3.4908931" />
+    <circle
+       style="fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4517-0-8-5-2-9-6"
+       cx="372.53439"
+       cy="158.03511"
+       r="3.4908931"
+       transform="scale(1,-1)" />
+  </g>
+</svg>
diff --git a/static/images/primitive_topology_triangle_list.png b/static/images/primitive_topology_triangle_list.png
new file mode 100644
index 0000000..b449ab9
Binary files /dev/null and b/static/images/primitive_topology_triangle_list.png differ
diff --git a/static/images/primitive_topology_triangle_list.svg b/static/images/primitive_topology_triangle_list.svg
new file mode 100644
index 0000000..2acd56b
--- /dev/null
+++ b/static/images/primitive_topology_triangle_list.svg
@@ -0,0 +1,190 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="210.32816"
+   height="104.11718"
+   viewBox="0 0 210.32816 104.11718"
+   version="1.1"
+   id="svg8653"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs8647">
+    <marker
+       style="overflow:visible"
+       id="marker3"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="1"
+       markerHeight="1"
+       viewBox="0 0 1 1"
+       preserveAspectRatio="xMidYMid">
+      <path
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         d="M 0,0 5,-5 -12.5,0 5,5 Z"
+         transform="scale(-0.5)"
+         id="path3" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="marker1"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="1"
+       markerHeight="1"
+       viewBox="0 0 1 1"
+       preserveAspectRatio="xMidYMid">
+      <path
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         d="M 0,0 5,-5 -12.5,0 5,5 Z"
+         transform="scale(-0.5)"
+         id="path1" />
+    </marker>
+  </defs>
+  <metadata
+     id="metadata8650">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <path
+     style="fill:none;stroke:#f9f9f9;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 125.02343,22.875 40,59.999997 40,-59.999997 z"
+     id="path11344" />
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427"
+     x="85.02346"
+     y="102.875"
+     id="text5070-2-2-9-9-75-8"><tspan
+       id="tspan5068-0-3-36-9-68-4"
+       x="85.02346"
+       y="102.875"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427">2</tspan></text>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427"
+     x="45.023403"
+     y="12.87502"
+     id="text5070-2-2-9-9-7-4-5"><tspan
+       id="tspan5068-0-3-36-9-6-3-1"
+       x="45.023403"
+       y="12.87502"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427">1</tspan></text>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427"
+     x="5.0234332"
+     y="102.875"
+     id="text5070-2-2-9-9-6-2-2"><tspan
+       id="tspan5068-0-3-36-9-4-4-0"
+       x="5.0234332"
+       y="102.875"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427">0</tspan></text>
+  <circle
+     style="fill:#f9f9f9;fill-opacity:1;stroke:#f9f9f9;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="path4517-0-8-5-91-9-3"
+     cx="45.023403"
+     cy="22.875021"
+     r="3.4908931" />
+  <circle
+     style="fill:#f9f9f9;fill-opacity:1;stroke:#f9f9f9;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="path4517-0-8-5-25-0-0"
+     cx="85.02346"
+     cy="82.875"
+     r="3.4908931" />
+  <path
+     id="path1868-1-8"
+     d="m 20.02343,67.87502 20,-30"
+     style="fill:none;stroke:#f9f9f9;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#marker3)" />
+  <path
+     id="path1870-2-7"
+     d="m 50.02343,37.87502 20,30"
+     style="fill:none;stroke:#f9f9f9;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#marker3)" />
+  <path
+     id="path1872-1-0"
+     d="m 70.02343,77.87502 h -50"
+     style="fill:none;stroke:#f9f9f9;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#marker3)" />
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427"
+     x="125.02346"
+     y="12.875005"
+     id="text5070-2-2-9-9-75-8-3"><tspan
+       id="tspan5068-0-3-36-9-68-4-4"
+       x="125.02346"
+       y="12.875005"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427">3</tspan></text>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427"
+     x="165.02347"
+     y="102.875"
+     id="text5070-2-2-9-9-1-4-2"><tspan
+       id="tspan5068-0-3-36-9-3-6-1"
+       x="165.02347"
+       y="102.875"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427">5</tspan></text>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427"
+     x="205.02347"
+     y="12.875005"
+     id="text5070-2-2-9-9-77-2-4"><tspan
+       id="tspan5068-0-3-36-9-5-2-0"
+       x="205.02347"
+       y="12.875005"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1.16427">4</tspan></text>
+  <circle
+     style="fill:#f9f9f9;fill-opacity:1;stroke:#f9f9f9;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="path4517-0-8-5-8-0-3"
+     cx="165.02347"
+     cy="82.875"
+     r="3.4908931" />
+  <circle
+     style="fill:#f9f9f9;fill-opacity:1;stroke:#f9f9f9;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="path4517-0-8-5-25-0-0-6"
+     cx="205.02347"
+     cy="22.875006"
+     r="3.4908931" />
+  <path
+     style="fill:none;stroke:#f9f9f9;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 5.02343,82.875005 40,-59.999995 40,59.999995 z"
+     id="path11342" />
+  <path
+     id="path1868-08-3"
+     d="m 140.02344,37.875 20,30"
+     style="fill:none;stroke:#f9f9f9;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-start:url(#marker1)" />
+  <path
+     id="path1870-9-9"
+     d="m 170.02344,67.875 20,-30"
+     style="fill:none;stroke:#f9f9f9;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-start:url(#marker1)" />
+  <path
+     id="path1872-2-3"
+     d="m 190.02344,27.875 h -50"
+     style="fill:none;stroke:#f9f9f9;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-start:url(#marker1)" />
+  <circle
+     style="fill:#f9f9f9;fill-opacity:1;stroke:#f9f9f9;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="path4517-0-8-5-91-0-97"
+     cx="5.0234332"
+     cy="82.875"
+     r="3.4908931" />
+  <circle
+     style="fill:#f9f9f9;fill-opacity:1;stroke:#f9f9f9;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="path4517-0-8-5-91-0-3"
+     cx="125.02346"
+     cy="22.875006"
+     r="3.4908931" />
+</svg>
diff --git a/static/images/primitive_topology_triangle_strip.svg b/static/images/primitive_topology_triangle_strip.svg
new file mode 100644
index 0000000..d6a8e1f
--- /dev/null
+++ b/static/images/primitive_topology_triangle_strip.svg
@@ -0,0 +1,202 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="170.32812"
+   height="104.11719"
+   viewBox="0 0 170.32813 104.11719"
+   version="1.1"
+   id="svg8653"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs8647">
+    <marker
+       style="overflow:visible"
+       id="marker2"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="1"
+       markerHeight="1"
+       viewBox="0 0 1 1"
+       preserveAspectRatio="xMidYMid">
+      <path
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         d="M 0,0 5,-5 -12.5,0 5,5 Z"
+         transform="scale(-0.5)"
+         id="path2" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="marker1"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="1"
+       markerHeight="1"
+       viewBox="0 0 1 1"
+       preserveAspectRatio="xMidYMid">
+      <path
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         d="M 0,0 5,-5 -12.5,0 5,5 Z"
+         transform="scale(-0.5)"
+         id="path1" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="DartArrow"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       markerWidth="1"
+       markerHeight="1"
+       viewBox="0 0 1 1"
+       preserveAspectRatio="xMidYMid">
+      <path
+         style="fill:context-stroke;fill-rule:evenodd;stroke:none"
+         d="M 0,0 5,-5 -12.5,0 5,5 Z"
+         transform="scale(-0.5)"
+         id="path6" />
+    </marker>
+  </defs>
+  <metadata
+     id="metadata8650">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     transform="translate(-7.5109558,180.91011)">
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.16427"
+       x="12.534393"
+       y="-78.03511"
+       id="text5070-2-2-9-9"><tspan
+         id="tspan5068-0-3-36-9"
+         x="12.534393"
+         y="-78.03511"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke-width:1.16427">0</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.16427"
+       x="172.53439"
+       y="-78.035103"
+       id="text5070-2-2-9-9-1"><tspan
+         id="tspan5068-0-3-36-9-3"
+         x="172.53439"
+         y="-78.035103"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke-width:1.16427">4</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.16427"
+       x="92.534393"
+       y="-78.035103"
+       id="text5070-2-2-9-9-7"><tspan
+         id="tspan5068-0-3-36-9-6"
+         x="92.534393"
+         y="-78.035103"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke-width:1.16427">2</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.16427"
+       x="52.534393"
+       y="-168.0351"
+       id="text5070-2-2-9-9-6"><tspan
+         id="tspan5068-0-3-36-9-4"
+         x="52.534393"
+         y="-168.0351"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke-width:1.16427">1</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.16427"
+       x="132.53439"
+       y="-168.03511"
+       id="text5070-2-2-9-9-77"><tspan
+         id="tspan5068-0-3-36-9-5"
+         x="132.53439"
+         y="-168.03511"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:16px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke-width:1.16427">3</tspan></text>
+    <circle
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4517-0-8-5-8"
+       cx="172.53439"
+       cy="-98.035103"
+       r="3.4908931" />
+    <circle
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4517-0-8-5-2"
+       cx="132.53439"
+       cy="-158.03511"
+       r="3.4908931" />
+    <path
+       style="fill:none;stroke:#f9f9f9;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 12.534393,-98.035106 40,-59.999994 h 79.999997 l 40,59.999994 z m 40,-59.999994 39.999997,59.999994 40,-59.999994"
+       id="path875" />
+    <path
+       id="path1868"
+       d="m 27.534393,-113.0351 20,-30"
+       style="fill:none;stroke:#f9f9f9;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#marker2)" />
+    <path
+       id="path1870"
+       d="m 57.534393,-143.0351 19.999997,30"
+       style="fill:none;stroke:#f9f9f9;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#marker2)" />
+    <path
+       id="path1872"
+       d="M 77.53439,-103.0351 H 27.534393"
+       style="fill:none;stroke:#f9f9f9;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#marker2)" />
+    <path
+       id="path1868-6"
+       d="m 107.19584,-112.35393 20,-30"
+       style="fill:none;stroke:#f9f9f9;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#marker2)" />
+    <path
+       id="path1870-4"
+       d="m 137.19584,-142.35393 19.99999,30"
+       style="fill:none;stroke:#f9f9f9;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#marker2)" />
+    <path
+       id="path1872-0"
+       d="M 157.19583,-102.35393 H 107.19584"
+       style="fill:none;stroke:#f9f9f9;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#marker2)" />
+    <path
+       id="path1868-08-3-3"
+       d="m 67.53439,-143.0351 20,30"
+       style="fill:none;stroke:#f9f9f9;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-start:url(#marker1)" />
+    <path
+       id="path1870-9-9-3"
+       d="m 97.53439,-113.0351 20,-30"
+       style="fill:none;stroke:#f9f9f9;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-start:url(#marker1)" />
+    <path
+       id="path1872-2-3-1"
+       d="M 111.73438,-153.0351 H 67.53439"
+       style="fill:none;stroke:#f9f9f9;stroke-width:0.940213px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-start:url(#DartArrow)" />
+    <circle
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4517-0-8-5-91-0-97"
+       cx="12.872943"
+       cy="-98.716286"
+       r="3.4908931" />
+    <circle
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4517-0-8-5-91-0-97-3"
+       cx="92.534393"
+       cy="-98.035103"
+       r="3.4908931" />
+    <circle
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4517-0-8-5-91-0-3"
+       cx="52.534393"
+       cy="-158.0351"
+       r="3.4908931" />
+  </g>
+</svg>