From a803cb783efab8fffe26eff71e250b164f4e2999 Mon Sep 17 00:00:00 2001
From: Yohei Shimomae <yohei.shimomae@gmail.com>
Date: Tue, 15 Oct 2013 14:53:00 -0700
Subject: [PATCH] added crocodile demo

---
 demos/animated-crocodile/crocodile.svg | 118 +++++++++++++++++++++++++
 demos/animated-crocodile/index.html    |  84 ++++++++++++++++++
 2 files changed, 202 insertions(+)
 create mode 100644 demos/animated-crocodile/crocodile.svg
 create mode 100644 demos/animated-crocodile/index.html

diff --git a/demos/animated-crocodile/crocodile.svg b/demos/animated-crocodile/crocodile.svg
new file mode 100644
index 0000000..99bff2c
--- /dev/null
+++ b/demos/animated-crocodile/crocodile.svg
@@ -0,0 +1,118 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.0.0, 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="260px" height="250px" viewBox="-5 0 260 250" enable-background="new -5 0 260 250" xml:space="preserve">
+<g>
+	<g id="symbol" opacity="0.2">
+		
+			<rect x="186.241" y="139.98" transform="matrix(0.4196 0.9077 -0.9077 0.4196 242.6889 -90.6368)" fill="#848383" width="11.964" height="8.973"/>
+		<polygon fill="#848383" points="246.828,109.341 199.215,134.647 204.235,145.507 254.358,125.631 		"/>
+	</g>
+	<g id="head">
+		<polygon fill="#09B39C" points="44.613,146.703 26.665,140.721 8.718,146.703 -0.252,146.703 -0.252,206.523 44.613,206.523 
+			119.387,206.523 119.387,167.64 		"/>
+		<polygon opacity="0.2" fill="#FFFFFF" enable-background="new    " points="-0.252,146.703 11.712,170.631 26.667,140.721 
+			8.721,146.703 		"/>
+		<polyline opacity="0.2" fill="#FFFFFF" enable-background="new    " points="8.718,146.703 20.685,152.685 26.665,140.721 		"/>
+		<polygon opacity="0.2" fill="#FFFFFF" enable-background="new    " points="44.613,146.703 53.613,163.667 17.694,143.712 
+			26.667,140.721 		"/>
+	</g>
+	<g id="upper-head">
+		<g id="upper-jaw">
+			<g>
+				<g>
+					<polygon fill="#E0CAB1" points="151.174,129.382 166.087,135.468 159.485,120.777 					"/>
+					<polygon opacity="0.4" fill="#FFFFFF" enable-background="new    " points="159.485,120.777 166.087,135.468 155.329,125.08 
+											"/>
+				</g>
+				<g>
+					<polygon fill="#E0CAB1" points="138.707,142.292 153.621,148.378 147.018,133.686 					"/>
+					<polygon opacity="0.4" fill="#FFFFFF" enable-background="new    " points="147.018,133.686 153.621,148.378 142.863,137.989 
+											"/>
+				</g>
+				<g>
+					<polygon fill="#E0CAB1" points="126.241,155.201 141.154,161.287 134.552,146.595 					"/>
+					<polygon opacity="0.4" fill="#FFFFFF" enable-background="new    " points="134.552,146.595 141.154,161.287 130.396,150.898 
+											"/>
+				</g>
+				<g>
+					<polygon fill="#E0CAB1" points="163.64,116.474 178.553,122.559 171.95,107.867 					"/>
+					<polygon opacity="0.4" fill="#FFFFFF" enable-background="new    " points="171.95,107.867 178.553,122.559 167.796,112.171 
+											"/>
+				</g>
+				<g>
+					<polygon fill="#E0CAB1" points="176.106,103.564 191.019,109.65 184.417,94.958 					"/>
+					<polygon opacity="0.4" fill="#FFFFFF" enable-background="new    " points="184.417,94.958 191.019,109.65 180.261,99.261 
+											"/>
+				</g>
+				<g>
+					<polygon fill="#E0CAB1" points="188.572,90.655 203.486,96.74 196.884,82.049 					"/>
+					<polygon opacity="0.4" fill="#FFFFFF" enable-background="new    " points="196.884,82.049 203.486,96.74 192.728,86.352 					
+						"/>
+				</g>
+				<g>
+					<polygon fill="#E0CAB1" points="201.039,77.746 215.952,83.831 209.35,69.14 					"/>
+					<polygon opacity="0.4" fill="#FFFFFF" enable-background="new    " points="209.35,69.14 215.952,83.831 205.195,73.443 					
+						"/>
+				</g>
+				<g>
+					<polygon fill="#E0CAB1" points="213.505,64.837 228.418,70.922 221.816,56.23 					"/>
+					<polygon opacity="0.4" fill="#FFFFFF" enable-background="new    " points="221.816,56.23 228.418,70.922 217.66,60.533 					
+						"/>
+				</g>
+			</g>
+			<polygon fill="#09B39C" points="215.135,33 200.18,33 197.189,46.955 92,125 88.355,171.706 106.387,180.64 236.072,47.955 			
+				"/>
+			<polygon opacity="0.2" fill="#FFFFFF" enable-background="new    " points="92,125 97.423,150.703 197.189,46.955 			"/>
+			<polyline opacity="0.2" fill="#FFFFFF" enable-background="new    " points="197.189,46.955 185.207,76.892 92,125 			"/>
+			<polygon opacity="0.2" fill="#FFFFFF" enable-background="new    " points="200.18,33 236.072,47.955 215.135,33 			"/>
+			<polygon opacity="0.2" fill="#FFFFFF" enable-background="new    " points="197.189,46.955 215.135,33 200.18,33 			"/>
+		</g>
+		<polygon fill="#09B39C" points="92,125 65.55,126.757 44.613,146.703 44.613,176.523 119.387,176.523 119.387,167.64 
+			107.897,156.377 		"/>
+		<polygon opacity="0.2" fill="#FFFFFF" enable-background="new    " points="92,125 102.423,145.703 65.55,126.757 		"/>
+		<polygon opacity="0.2" fill="#FFFFFF" enable-background="new    " points="44.613,146.703 102.423,145.703 92,125 65.55,126.757 
+					"/>
+		<polygon id="eye_1_" fill="#FFFFFF" points="71.532,145.703 83.495,139.721 95.459,145.703 80.505,154.676 		"/>
+		<polygon opacity="0.2" fill="#FFFFFF" enable-background="new    " points="44.613,146.703 44.613,158.667 92,125 65.55,126.757 
+					"/>
+	</g>
+	<g id="bottom-jaw">
+		<g>
+			<polygon fill="#E0CAB1" points="152.531,185.586 158.513,170.631 164.495,185.586 			"/>
+			<polygon opacity="0.4" fill="#FFFFFF" enable-background="new    " points="164.495,185.586 158.513,170.631 158.513,185.586 			
+				"/>
+		</g>
+		<g>
+			<polygon fill="#E0CAB1" points="170.477,185.586 176.459,170.631 182.441,185.586 			"/>
+			<polygon opacity="0.4" fill="#FFFFFF" enable-background="new    " points="182.441,185.586 176.459,170.631 176.459,185.586 			
+				"/>
+		</g>
+		<g>
+			<polygon fill="#E0CAB1" points="188.423,185.586 194.405,170.631 200.387,185.586 			"/>
+			<polygon opacity="0.4" fill="#FFFFFF" enable-background="new    " points="200.387,185.586 194.405,170.631 194.405,185.586 			
+				"/>
+		</g>
+		<g>
+			<polygon fill="#E0CAB1" points="206.369,185.586 212.351,170.631 218.333,185.586 			"/>
+			<polygon opacity="0.4" fill="#FFFFFF" enable-background="new    " points="218.333,185.586 212.351,170.631 212.351,185.586 			
+				"/>
+		</g>
+		<g>
+			<polygon fill="#E0CAB1" points="224.315,185.586 230.297,170.631 236.279,185.586 			"/>
+			<polygon opacity="0.4" fill="#FFFFFF" enable-background="new    " points="236.279,185.586 230.297,170.631 230.297,185.586 			
+				"/>
+		</g>
+		<polygon fill="#E0CAB1" points="148.54,179.604 119.596,167.64 109.657,167.64 103.675,167.64 91.711,167.64 79.747,179.604 
+			-4,200.541 -4,206.523 79.747,206.523 156.522,206.523 187.432,198.55 235.288,189.577 244.252,179.604 		"/>
+		<polygon opacity="0.3" fill="#FFFFFF" enable-background="new    " points="119.594,167.64 91.711,167.64 79.747,179.604 		"/>
+		<polygon opacity="0.3" fill="#FFFFFF" enable-background="new    " points="91.711,167.64 79.747,206.523 79.747,179.604 		"/>
+		<polygon opacity="0.1" fill="#534741" enable-background="new    " points="235.288,189.577 160.513,195.559 115.639,206.523 
+			156.522,206.523 187.432,198.55 		"/>
+		<polygon opacity="0.1" fill="#534741" enable-background="new    " points="187.432,198.55 160.513,195.559 156.522,206.523 
+			156.522,206.523 		"/>
+		<polygon opacity="0.3" fill="#FFFFFF" enable-background="new    " points="-4,200.541 46.847,194.559 79.747,179.604 		"/>
+	</g>
+</g>
+</svg>
diff --git a/demos/animated-crocodile/index.html b/demos/animated-crocodile/index.html
new file mode 100644
index 0000000..1946537
--- /dev/null
+++ b/demos/animated-crocodile/index.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="copyright" content="Copyright © 2013 Adobe Systems Incorporated. All rights reserved.
+ 
+ Licensed under the Apache License, Version 2.0 (the “License”);
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ 
+ http://www.apache.org/licenses/LICENSE-2.0
+ 
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an “AS IS” BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.">
+        <title>Snap</title>
+        <script src="../../dist/snap.svg-min.js"></script>
+        <script>
+        window.onload = function () {
+
+            var g = Snap("100%", "100%");
+            
+            Snap.load("crocodile.svg", function (f) {
+                var gr = f.select("g"),
+                    head = f.select("#upper-head"),
+                    jaw = f.select("#upper-jaw"),
+                    symbol = f.select("#symbol"),
+                    top = g.g();
+
+                var pivots = [
+                    [44,147],
+                    [92,126]
+                ];
+
+
+                function close() {
+                    
+                    head.animate({ 
+                        transform: "r" + [8, pivots[0][0], pivots[0][1]]
+                    }, 500, mina.backin);
+                    
+                    jaw.animate({
+                        transform: "r" + [37, pivots[1][0], pivots[1][1]]
+                    }, 500, mina.backin);
+
+                    setTimeout(function() {
+                        symbol.animate({
+                            transform: "t" + (-70) + "," + (40) + "r" + (40)
+                        }, 100);
+                    }, 400);
+
+                    setTimeout(open, 1000);
+                }
+
+                function open() {
+
+                    head.animate({ 
+                        transform: "r" + [0, pivots[0][0], pivots[0][1]]
+                    }, 700, mina.elastic);
+                    
+                    jaw.animate({
+                        transform: "r" + [0, pivots[1][0], pivots[1][1]]
+                    }, 700, mina.elastic);
+
+                    symbol.animate({
+                        transform: "t" + (0) + "," + (0) + "r" + (0)
+                    }, 500, mina.elastic);
+
+                    setTimeout(close, 1000);
+                }
+                
+
+                top.add(gr.attr());
+
+                close();
+            });
+        };
+        </script>
+    </head>
+    <body>
+    </body>
+</html>
\ No newline at end of file