square twist

assets/Tessellations/singlesquaretwist.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="400px" height="400px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
+<rect fill="#FFFFFF" width="400" height="400"/>
+<path fill="none" stroke="#0000FF" stroke-linecap="round" stroke-miterlimit="10" d="M150.82,88.47l36,62.35 M213.18,249.18
+	l36,62.351 M249.18,186.82l62.351-36 M150.82,213.18l-62.35,36 M186.82,150.82l62.36,36 M186.82,150.82l-36,62.36 M213.18,249.18
+	l36-62.36 M213.18,249.18l-62.36-36"/>
+<path fill="none" stroke="#000000" stroke-linecap="round" stroke-miterlimit="10" d="M124.47,186.82l-36-62.35 M124.47,186.82
+	l-36,62.36 M88.47,249.18l36,62.351 M150.82,88.47l-62.35,36 M150.82,88.47l62.36,36 M213.18,124.47l62.351-36 M275.53,88.47
+	l36,62.35 M311.53,150.82l-36,62.36 M275.53,213.18l36,62.351 M311.53,275.53l-62.351,36 M249.18,311.53l-62.36-36 M186.82,275.53
+	l-62.35,36"/>
+<path fill="none" stroke="#FF0000" stroke-linecap="round" stroke-miterlimit="10" d="M186.82,150.82l-62.35,36"/>
+<path fill="none" stroke="#FF0000" stroke-linecap="round" stroke-miterlimit="10" d="M213.18,249.18l62.351-36"/>
+<path fill="none" stroke="#FF0000" stroke-linecap="round" stroke-miterlimit="10" d="M213.18,124.47l36,62.35"/>
+<path fill="none" stroke="#FF0000" stroke-linecap="round" stroke-miterlimit="10" d="M150.82,213.18l36,62.351"/>
+<rect fill="none" width="400" height="400"/>
+<path fill="none" stroke="#FFFF00" stroke-miterlimit="10" d="M124.47,186.82l26.35-98.35 M213.18,124.47l98.351,26.35
+	 M275.53,213.18L249.18,311.53 M186.82,275.53L88.47,249.18 M124.47,186.82l26.35,26.36 M213.18,249.18l-26.36,26.351
+	 M275.53,213.18l-26.351-26.36 M186.82,150.82l26.36-26.35 M186.82,150.82l26.36,98.36"/>
+</svg>

css/nav.css

@@ -115,7 +115,7 @@ img{
     top: 0;
     left: 100%;
     margin-top: 0;
-    margin-left: 0;
+    margin-left: -1px;
     border-radius: 0;
     /*-webkit-border-radius: 0 6px 6px 6px;*/
     /*-moz-border-radius: 0 6px 6px;*/

index.html

@@ -377,6 +377,7 @@
                         <ul class="dropdown-menu">
                             <li><a href="#" class="demo" data-url="Tessellations/miura-ori.svg">Miura-Ori</a></li>
                             <li><a href="#" class="demo" data-url="Tessellations/waterbomb.svg">Waterbomb</a></li>
+                            <li><a href="#" class="demo" data-url="Tessellations/singlesquaretwist.svg">Square Twist (single)</a></li>
                         </ul>
                     </li>
                     <li><a class="loadFile" href="#">Import .txt...</a></li>

js/pattern.js

@@ -63,6 +63,7 @@ function initPattern(globals){
                 $svg.append($mountains);
                 $svg.append($valleys);
                 $svg.append($cuts);
+                $svg.append($triangulations);
 
                 $("#svgViewer").html($svg);