Add animation

1 files changed, 239 insertions, 108 deletions

diff --git a/35x30-90⁰.svg b/35x30-90⁰.svg
index d553336..0913777 100644
--- a/35x30-90⁰.svg
+++ b/35x30-90⁰.svg
@@ -9,14 +9,113 @@
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   onload="Start(evt)"
    width="1052.3622"
    height="744.09448"
    id="svg2"
    version="1.1"
    inkscape:version="0.48.4 r9939"
    sodipodi:docname="35x30-90⁰.svg">
-  <defs
-     id="defs4" />
+  <script
+     type="text/ecmascript"
+     id="showMergeScript">
+
+    // How long to sleep between steps
+    var delta_time = 25;
+
+    //  Distances and angles needed for the transformation
+    var height;          // the height of the isolation
+    var r_angle_max;     // the maximum angle to rotate the isolation
+    var r_upper_left_x;
+    var r_upper_left_y;
+    var l_upper_left_y;
+
+    // Tracking the transformation progress
+    var l_y_off = 0;
+    var r_angle = 0;
+
+    // Paths representing the left and right half of the isolation
+    var l_iso, r_iso;
+    // used to pass along the rotation transformation
+    var r_rot_trans;
+
+    function Start(evt) {
+
+      r_iso = evt.target.ownerDocument.getElementById(&quot;rightIso&quot;);
+      l_iso = evt.target.ownerDocument.getElementById(&quot;leftIso&quot;);
+
+      getDists();
+      rotateUp();
+    }
+
+    // Get the distances we need to move objects from the paths
+    function getDists() {
+        var segments;
+	var lower_y;
+	// We rotate about the left upper point of the right part
+	r_angle_max = -90;
+
+        segments = r_iso.pathSegList;
+        for (var i=0,len = segments.numberOfItems;i &lt; len; ++i) {
+            var pathSeg = segments.getItem(i);
+            switch(pathSeg.pathSegType) {
+                case SVGPathSeg.PATHSEG_MOVETO_ABS:
+                    r_upper_left_x = pathSeg.x;
+                    r_upper_left_y = l_upper_left_y = pathSeg.y;
+                    break;
+		case SVGPathSeg.PATHSEG_LINETO_ABS:
+		    if (pathSeg.y &gt; r_upper_left_y) {
+                        lower_y = pathSeg.y;
+		    }
+		    break;
+            }
+        }
+        // The heigt of the isolation.
+        // Since this is a 90⁰ angle it's also the distance from the
+        //  &quot;midth line&quot; of the cut to the &quot;0&quot; on
+        // the x-axis
+	height = lower_y - r_upper_left_y;
+    }
+
+    // First rotate the right side up
+    function rotateUp() {
+      if (r_angle  &gt; r_angle_max) {
+          r_angle -= 2;
+	  r_rot_trans = &quot;rotate(&quot; + r_angle + &quot;, &quot; + r_upper_left_x + &quot;, &quot; + r_upper_left_y + &quot;)&quot;
+
+          r_iso.setAttribute(&quot;transform&quot;,
+	                     r_rot_trans);
+	  setTimeout(&quot;rotateUp()&quot;,
+                     delta_time);
+      } else {
+          setTimeout(&quot;flip()&quot;, delta_time);
+      }
+    }
+
+    // Flip the left end
+    function flip() {
+        var delta = -1 * (l_upper_left_y + height);
+	var l_flip_trans = &quot;translate(0, &quot; + l_upper_left_y + &quot;) scale(1, -1) translate( 0, &quot; + delta + &quot; )&quot;
+
+        l_iso.setAttribute(&quot;transform&quot;,
+	                   l_flip_trans);
+        setTimeout(&quot;moveLeft()&quot;, delta_time);
+    }
+
+    // Move pieces together
+    function moveLeft() {
+        l_y_off_max = -height;
+
+        if (l_y_off &gt; l_y_off_max) {
+          l_y_off -= 5;
+	  if (l_y_off &lt; l_y_off_max) l_y_off = l_y_off_max;
+          trans = r_rot_trans + &quot; translate(0.0, &quot; + l_y_off + &quot;)&quot;
+
+          r_iso.setAttribute(&quot;transform&quot;, trans);
+	  setTimeout(&quot;moveLeft()&quot;, delta_time);
+      }
+    }
+   </script>
   <sodipodi:namedview
      id="base"
      pagecolor="#ffffff"
@@ -24,9 +123,9 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="1.109884"
-     inkscape:cx="526.18111"
-     inkscape:cy="626.72274"
+     inkscape:zoom="1.569613"
+     inkscape:cx="712.78989"
+     inkscape:cy="125.40464"
      inkscape:document-units="cm"
      inkscape:current-layer="layer1"
      showgrid="true"
@@ -41,19 +140,21 @@
      inkscape:window-y="27"
      inkscape:window-maximized="1">
     <inkscape:grid
-       type="xygrid"
-       id="grid2985"
-       empspacing="5"
-       visible="true"
-       enabled="true"
-       snapvisiblegridlinesonly="true"
-       units="cm"
-       spacingx="0.25cm"
-       spacingy="0.5cm"
-       originx="5cm"
+       originy="5cm"
        dotted="false"
-       originy="5cm" />
+       originx="5cm"
+       spacingy="0.5cm"
+       spacingx="0.25cm"
+       units="cm"
+       snapvisiblegridlinesonly="true"
+       enabled="true"
+       visible="true"
+       empspacing="5"
+       id="grid2985"
+       type="xygrid" />
   </sodipodi:namedview>
+  <defs
+     id="defs4" />
   <metadata
      id="metadata7">
     <rdf:RDF>
@@ -85,152 +186,182 @@
     </rdf:RDF>
   </metadata>
   <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
+     style="display:inline"
+     transform="translate(0,-308.2677)"
      id="layer1"
-     transform="translate(0,-308.2677)">
+     inkscape:groupmode="layer"
+     inkscape:label="Text">
     <path
-       style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 177.16535,566.92913 708.66142,0 70.86614,0"
-       id="path2989"
        inkscape:connector-curvature="0"
-       transform="translate(0,308.2677)" />
-    <path
+       id="path2989"
+       d="m 177.16535,566.92913 708.66142,0 70.86614,0"
        style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 531.49606,531.49606 0,70.86614"
-       id="path2995"
-       inkscape:connector-curvature="0"
        transform="translate(0,308.2677)" />
     <path
+       inkscape:connector-curvature="0"
+       id="middleLine"
+       d="m 531.49606,531.49606 0,70.86614"
        style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="M 106.29921,141.73228 531.49606,566.92913 956.69291,141.73228"
-       id="path3039"
+       transform="translate(0,308.2677)"
+       inkscape:label="#path2995" />
+    <path
        inkscape:connector-curvature="0"
+       id="path3039"
+       d="M 106.29921,141.73228 531.49606,566.92913 956.69291,141.73228"
+       style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
        transform="translate(0,308.2677)" />
     <text
-       xml:space="preserve"
-       style="font-size:28px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:FreeSans;-inkscape-font-specification:Sans Bold"
-       x="88.58268"
-       y="343.70078"
+       sodipodi:linespacing="125%"
        id="text3811"
-       sodipodi:linespacing="125%"><tspan
-         sodipodi:role="line"
-         id="tspan3813"
-         x="88.58268"
-         y="343.70078">Template for 90⁰ angle with Rockwool 800 35x30</tspan><tspan
-         sodipodi:role="line"
+       y="343.70078"
+       x="88.58268"
+       style="font-size:28px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:FreeSans;-inkscape-font-specification:Sans Bold"
+       xml:space="preserve"><tspan
+         y="343.70078"
          x="88.58268"
+         id="tspan3813"
+         sodipodi:role="line">Template for 90⁰ angle with Rockwool 800 35x30</tspan><tspan
+         id="tspan4038"
          y="378.70078"
-         id="tspan4038">Suitable for small radii (~ 3,5cm)</tspan></text>
+         x="88.58268"
+         sodipodi:role="line">Suitable for small radii (~ 3,5cm)</tspan></text>
     <path
-       style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 177.16535,566.92913 -70.86614,0"
-       id="path3847"
        inkscape:connector-curvature="0"
+       id="path3847"
+       d="m 177.16535,566.92913 -70.86614,0"
+       style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
        transform="translate(0,308.2677)" />
     <path
-       style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 106.29921,230.31495 850.3937,0"
-       id="path3871"
        inkscape:connector-curvature="0"
+       id="path3871"
+       d="m 106.29921,230.31495 850.3937,0"
+       style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
        transform="translate(0,308.2677)" />
     <path
-       style="fill:none;stroke:#000000;stroke-width:0.99212598;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:0.99212598,3.96850394;stroke-dashoffset:0"
-       d="m 868.11024,124.01574 0,478.34646"
-       id="path3873"
        inkscape:connector-curvature="0"
+       id="path3873"
+       d="m 868.11024,124.01574 0,478.34646"
+       style="fill:none;stroke:#000000;stroke-width:0.99212599;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:0.99212598, 3.96850394;stroke-dashoffset:0"
        transform="translate(0,308.2677)" />
     <text
-       xml:space="preserve"
-       style="font-size:28px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:FreeSans;-inkscape-font-specification:Sans Bold"
-       x="872.14288"
-       y="619.09448"
-       id="text3875"
        sodipodi:linespacing="125%"
+       id="text3875"
+       y="619.09448"
+       x="872.14288"
+       style="font-size:28px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:FreeSans;-inkscape-font-specification:Sans Bold"
+       xml:space="preserve"
        transform="translate(0,308.2677)"><tspan
-         sodipodi:role="line"
-         id="tspan3877"
-         x="872.14288"
-         y="619.09448">0</tspan><tspan
-         sodipodi:role="line"
+         y="619.09448"
          x="872.14288"
+         id="tspan3877"
+         sodipodi:role="line">0</tspan><tspan
+         id="tspan3879"
          y="654.09448"
-         id="tspan3879" /></text>
+         x="872.14288"
+         sodipodi:role="line" /></text>
     <path
-       style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 868.11024,549.21259 0,35.43307"
-       id="path3883"
        inkscape:connector-curvature="0"
+       id="path3883"
+       d="m 868.11024,549.21259 0,35.43307"
+       style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
        transform="translate(0,308.2677)" />
     <path
-       style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 903.54331,566.92913 0,17.71653"
-       id="path3887"
        inkscape:connector-curvature="0"
+       id="path3887"
+       d="m 903.54331,566.92913 0,17.71653"
+       style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
        transform="translate(0,308.2677)" />
     <path
-       style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 938.97638,566.92913 0,17.71653"
-       id="path3889"
        inkscape:connector-curvature="0"
+       id="path3889"
+       d="m 938.97638,566.92913 0,17.71653"
+       style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
        transform="translate(0,308.2677)" />
     <path
-       style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:1,2;stroke-dashoffset:0"
-       d="m 194.88189,432.30278 0,478.44837"
+       inkscape:connector-curvature="0"
        id="path3891"
-       inkscape:connector-curvature="0" />
+       d="m 194.88189,432.30278 0,478.44837"
+       style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:1, 2;stroke-dashoffset:0" />
     <text
-       xml:space="preserve"
-       style="font-size:28px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:FreeSans;-inkscape-font-specification:Sans Bold"
-       x="903.54333"
-       y="928.34644"
+       sodipodi:linespacing="125%"
        id="text3893"
-       sodipodi:linespacing="125%"><tspan
-         sodipodi:role="line"
-         id="tspan3895"
+       y="928.34644"
+       x="903.54333"
+       style="font-size:28px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:FreeSans;-inkscape-font-specification:Sans Bold"
+       xml:space="preserve"><tspan
+         y="928.34644"
          x="903.54333"
-         y="928.34644">1</tspan></text>
+         id="tspan3895"
+         sodipodi:role="line">1</tspan></text>
     <text
-       xml:space="preserve"
-       style="font-size:28px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:FreeSans;-inkscape-font-specification:Sans Bold"
-       x="941.83466"
-       y="928.34644"
+       sodipodi:linespacing="125%"
        id="text3897"
-       sodipodi:linespacing="125%"><tspan
-         sodipodi:role="line"
-         id="tspan3899"
+       y="928.34644"
+       x="941.83466"
+       style="font-size:28px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:FreeSans;-inkscape-font-specification:Sans Bold"
+       xml:space="preserve"><tspan
+         y="928.34644"
          x="941.83466"
-         y="928.34644">2cm </tspan></text>
+         id="tspan3899"
+         sodipodi:role="line">2cm </tspan></text>
     <a
-       id="a4034">
+       id="a4034"
+       transform="translate(-15.927493,-0.63709972)">
       <text
-         sodipodi:linespacing="125%"
-         id="text3903"
-         y="1034.6456"
-         x="664.37006"
+         xml:space="preserve"
          style="font-size:16px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:FreeSans;-inkscape-font-specification:FreeSans"
-         xml:space="preserve"><tspan
-           y="1034.6456"
-           x="664.37006"
+         x="664.37006"
+         y="1034.6456"
+         id="text3903"
+         sodipodi:linespacing="125%"><tspan
+           sodipodi:role="line"
            id="tspan3905"
-           sodipodi:role="line">CC-by-SA, © 2013 Guido Günter &lt;agx@sigxcpu.org&gt;</tspan></text>
+           x="664.37006"
+           y="1034.6456">CC-by-SA, © 2013 Guido Günther &lt;agx@sigxcpu.org&gt;</tspan></text>
     </a>
     <text
-       xml:space="preserve"
-       style="font-size:28px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:FreeSans;-inkscape-font-specification:Sans Bold"
-       x="77.485573"
-       y="132.31886"
-       id="text4040"
        sodipodi:linespacing="125%"
+       id="text4040"
+       y="132.31886"
+       x="77.485573"
+       style="font-size:28px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:FreeSans;-inkscape-font-specification:Sans Bold"
+       xml:space="preserve"
        transform="translate(0,308.2677)"><tspan
-         sodipodi:role="line"
-         id="tspan4042"
+         y="132.31886"
          x="77.485573"
-         y="132.31886">✂</tspan></text>
+         id="tspan4042"
+         sodipodi:role="line">✂</tspan></text>
+    <text
+       sodipodi:linespacing="125%"
+       id="text4040-3"
+       y="449.99997"
+       x="974.40942"
+       style="font-size:28px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;display:inline;font-family:FreeSans;-inkscape-font-specification:Sans Bold"
+       xml:space="preserve"><tspan
+         y="449.99997"
+         x="974.40942"
+         id="tspan4042-7"
+         sodipodi:role="line">✂</tspan></text>
+  </g>
+  <g
+     style="display:inline"
+     inkscape:label="cutout"
+     id="layer3"
+     inkscape:groupmode="layer">
     <path
        style="color:#000000;fill:#284550;fill-opacity:0.28703703;fill-rule:evenodd;stroke:none;stroke-width:0.99212599;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-       d="M 88.59375 230.3125 L 88.59375 566.9375 L 531.5 566.9375 L 194.875 230.3125 L 88.59375 230.3125 z M 531.5 566.9375 L 974.40625 566.9375 L 974.40625 230.3125 L 868.125 230.3125 L 531.5 566.9375 z "
-       transform="translate(0,308.2677)"
-       id="rect4044" />
+       d="m 86.79176,230.3125 0,336.625 442.90625,0 336.625,-336.625 -336.625,0 -336.625,0 -106.28125,0 z"
+       id="leftIso"
+       inkscape:connector-curvature="0" />
+  </g>
+  <g
+     style="display:inline"
+     inkscape:label="iso-cut"
+     id="layer2"
+     inkscape:groupmode="layer">
+    <path
+       style="color:#000000;fill:#284550;fill-opacity:0.28703703;fill-rule:evenodd;stroke:none;stroke-width:0.99212599;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       d="M 868.125 230.3125 L 531.5 566.9375 L 974.40625 566.9375 L 974.40625 230.3125 L 868.125 230.3125 z "
+       id="rightIso" />
   </g>
 </svg>