Merge branch 'master' of https://github.com/adobe-webplatform/savage
Dmitry Baranovskiy
commit
65e65fa074
|
|
@ -1,197 +0,0 @@
|
|||
<!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 croc = Snap.select("#crocodile"),
|
||||
head = croc.select("#upper-head"),
|
||||
jaw = croc.select("#upper-jaw"),
|
||||
symbol = croc.select("#symbol"),
|
||||
timer;
|
||||
|
||||
var pivots = [
|
||||
[44, 147],
|
||||
[92, 126]
|
||||
];
|
||||
|
||||
function close() {
|
||||
clearTimeout(timer);
|
||||
|
||||
head.animate({
|
||||
transform: "r" + [8, pivots[0]]
|
||||
}, 500, mina.backin);
|
||||
|
||||
jaw.animate({
|
||||
transform: "r" + [37, pivots[1]]
|
||||
}, 500, mina.backin);
|
||||
|
||||
timer = setTimeout(function () {
|
||||
symbol.animate({
|
||||
transform: "t-70,40r40"
|
||||
}, 100);
|
||||
}, 400);
|
||||
}
|
||||
|
||||
function open() {
|
||||
clearTimeout(timer);
|
||||
|
||||
head.animate({
|
||||
transform: "r" + [0, pivots[0]]
|
||||
}, 700, mina.elastic);
|
||||
|
||||
jaw.animate({
|
||||
transform: "r" + [0, pivots[1]]
|
||||
}, 700, mina.elastic);
|
||||
|
||||
symbol.animate({
|
||||
transform: "t0,0r0"
|
||||
}, 500, mina.elastic);
|
||||
}
|
||||
|
||||
timer = setTimeout(close, 500);
|
||||
|
||||
croc.hover(open,
|
||||
function () {
|
||||
timer = setTimeout(close, 200);
|
||||
}
|
||||
);
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<svg version="1.1" id="crocodile" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="260px" height="250px">
|
||||
<g>
|
||||
<path id="symbol" opacity="0.2" fill="#848383" d="M185.631,140.915
|
||||
l5.02,10.86l8.145-3.765l-5.02-10.86L185.631,140.915zM246.828,109.341
|
||||
l-47.613,25.306l5.02,10.86l50.123-19.876L246.828,109.341z"/>
|
||||
<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" points="-0.252,146.703
|
||||
11.712,170.631 26.667,140.721 8.721,146.703"/>
|
||||
<polyline opacity="0.2" fill="#FFFFFF" points="8.718,146.703
|
||||
20.685,152.685 26.665,140.721"/>
|
||||
<polygon opacity="0.2" fill="#FFFFFF" 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>
|
||||
<path id="upper-teeth" fill="#E0CAB1" d="M151.174,
|
||||
129.382l14.913,6.086l-6.602-14.691L151.174,129.382z
|
||||
M138.707,142.292l14.914,6.086l-6.603-14.692
|
||||
L138.707,142.292zM126.241,155.201l14.913,6.086l-6.602
|
||||
-14.692L126.241,155.201zM163.64,116.474l14.913,6.085
|
||||
l-6.603-14.692L163.64,116.474zM176.106,103.564
|
||||
l14.913,6.086l-6.602-14.692L176.106,103.564z
|
||||
M188.572,90.655l14.914,6.085l-6.602-14.691
|
||||
L188.572,90.655zM201.039,77.746l14.913,6.085
|
||||
L209.35,69.14L201.039,77.746z M221.816,56.23
|
||||
l-8.311,8.607l14.913,6.085L221.816,56.23z"/>
|
||||
<path opacity="0.4" fill="#FFFFFF" d="M155.329,125.08
|
||||
l10.758,10.388l-6.602-14.691L155.329,125.08z
|
||||
M142.863,137.989l10.758,10.389l-6.603-14.692L142.863,
|
||||
137.989zM130.396,150.898l10.758,10.389l-6.602-14.692
|
||||
L130.396,150.898zM167.796,112.171l10.757,10.388
|
||||
l-6.603-14.692L167.796,112.171zM180.261,99.261
|
||||
l10.758,10.389l-6.602-14.692L180.261,99.261zM192.728,
|
||||
86.352l10.758,10.388l-6.602-14.691L192.728,86.352z
|
||||
M205.195,73.443l10.757,10.388L209.35,69.14L205.195,
|
||||
73.443zM221.816,56.23l-4.156,4.303l10.758,10.389
|
||||
L221.816,56.23z"/>
|
||||
</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" points="92,125
|
||||
97.423,150.703 197.189,46.955"/>
|
||||
<polyline opacity="0.2" fill="#FFFFFF" points="197.189,
|
||||
46.955185.207,76.892 92,125"/>
|
||||
<polygon opacity="0.2" fill="#FFFFFF" points="200.18,33
|
||||
236.072,47.955 215.135,33"/>
|
||||
<polygon opacity="0.2" fill="#FFFFFF" 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" points="92,125
|
||||
102.423,145.703 65.55,126.757"/>
|
||||
<polygon opacity="0.2" fill="#FFFFFF" 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" 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" 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" 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" 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" 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" 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" points="119.594,167.64
|
||||
91.711,167.64 79.747,179.604"/>
|
||||
<polygon opacity="0.3" fill="#FFFFFF" points="91.711,167.64
|
||||
79.747,206.523 79.747,179.604"/>
|
||||
<polygon opacity="0.1" fill="#534741" 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" points="187.432,198.55
|
||||
160.513,195.559 156.522,206.523 156.522,206.523"/>
|
||||
<polygon opacity="0.3" fill="#FFFFFF" points="-4,200.541
|
||||
46.847,194.559 79.747,179.604"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -23,6 +23,7 @@
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
background: #b7bf76;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
svg{
|
||||
|
|
@ -30,6 +31,8 @@
|
|||
margin: auto;
|
||||
-webkit-transform-origin: top center;
|
||||
-webkit-transform: scale(1.5);
|
||||
-moz-transform-origin: top center;
|
||||
-moz-transform: scale(1.5);
|
||||
}
|
||||
|
||||
.hit-area{
|
||||
|
|
@ -40,19 +43,26 @@
|
|||
-webkit-transform-origin: 0px 4px;
|
||||
-webkit-transition: -webkit-transform .4s;
|
||||
-webkit-transform: scale(1, 0);
|
||||
-moz-transform-origin: 0px 4px;
|
||||
-moz-transition: -webkit-transform .4s;
|
||||
-moz-transform: scale(1, 0);
|
||||
}
|
||||
|
||||
.face .eye.right{
|
||||
-webkit-transform-origin: 8px -4px;
|
||||
-moz-transform-origin: 8px -4px;
|
||||
}
|
||||
|
||||
.face .eye.left{
|
||||
-webkit-transform-origin: -8px -4px;
|
||||
-moz-transform-origin: -8px -4px;
|
||||
}
|
||||
|
||||
.face .eye{
|
||||
-webkit-transition: -webkit-transform .2s;
|
||||
-webkit-transform: scale(1, 0);
|
||||
-moz-transition: -webkit-transform .2s;
|
||||
-moz-transform: scale(1, 0);
|
||||
}
|
||||
|
||||
@-webkit-keyframes breeze{
|
||||
|
|
@ -67,6 +77,18 @@
|
|||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes breeze{
|
||||
0% {
|
||||
-moz-transform: rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
-moz-transform: rotate(10deg);
|
||||
}
|
||||
100% {
|
||||
-moz-transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes blink{
|
||||
0% {
|
||||
-webkit-transform: scale(1, 0);
|
||||
|
|
@ -82,6 +104,21 @@
|
|||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes blink{
|
||||
0% {
|
||||
-moz-transform: scale(1, 0);
|
||||
}
|
||||
10% {
|
||||
-moz-transform: scale(1, 1);
|
||||
}
|
||||
90% {
|
||||
-moz-transform: scale(1, 1);
|
||||
}
|
||||
100% {
|
||||
-moz-transform: scale(1, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes talk{
|
||||
0% {
|
||||
-webkit-transform: scale(1, 0);
|
||||
|
|
@ -94,21 +131,38 @@
|
|||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes talk{
|
||||
0% {
|
||||
-moz-transform: scale(1, 0);
|
||||
}
|
||||
50% {
|
||||
-moz-transform: scale(1, 1);
|
||||
}
|
||||
100% {
|
||||
-moz-transform: scale(1, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.tree{
|
||||
-webkit-transform-origin: 50% 100%;
|
||||
-webkit-animation: breeze 2s ease-out infinite;
|
||||
-moz-transform-origin: 50% bottom;
|
||||
/*-moz-animation: breeze 2s ease-out infinite;*/
|
||||
}
|
||||
|
||||
.tree .face.animating .eye{
|
||||
-webkit-transform: scale(1, 1);
|
||||
-moz-transform: scale(1, 1);
|
||||
}
|
||||
|
||||
.face.animating .eye{
|
||||
-webkit-animation: blink 5s infinite;
|
||||
-moz-animation: blink 5s infinite;
|
||||
}
|
||||
|
||||
.face.animating .mouth{
|
||||
-webkit-animation: talk 1s infinite;
|
||||
-moz-animation: talk 1s infinite;
|
||||
}
|
||||
|
||||
#cube-hitarea{
|
||||
|
|
@ -127,13 +181,18 @@
|
|||
width: 74px;
|
||||
height: 74px;
|
||||
z-index: 100;
|
||||
backface-visibility: visible;
|
||||
pointer-events: none;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-webkit-transform-origin: center center;
|
||||
-webkit-backface-visibility: visible;
|
||||
backface-visibility: visible;
|
||||
pointer-events: none;
|
||||
-webkit-transform: rotateX(-45deg) rotateY(50deg);
|
||||
-webkit-transition: -webkit-transform 1s;
|
||||
-moz-transform-style: preserve-3d;
|
||||
-moz-transform-origin: center center;
|
||||
-moz-backface-visibility: visible;
|
||||
-moz-transform: rotateX(-45deg) rotateY(50deg);
|
||||
-moz-transition: -moz-transform 1s;
|
||||
}
|
||||
|
||||
.side{
|
||||
|
|
@ -143,10 +202,9 @@
|
|||
width: 74px;
|
||||
height: 74px;
|
||||
pointer-events: none;
|
||||
|
||||
-webkit-transform-origin: center center;
|
||||
-webkit-backface-visibility: visible;
|
||||
backface-visibility: visible;
|
||||
-moz-transform-origin: center center;
|
||||
-moz-backface-visibility: visible;
|
||||
}
|
||||
|
||||
.side *{
|
||||
|
|
@ -155,26 +213,34 @@
|
|||
|
||||
#cube .side:nth-child(1) {
|
||||
-webkit-transform: translateY(37px) rotateX(90deg);
|
||||
-moz-transform: translateY(37px) rotateX(90deg);
|
||||
}
|
||||
|
||||
#cube .side:nth-child(2) {
|
||||
-webkit-transform: translateY(-37px) rotateX(-90deg);
|
||||
-moz-transform: translateY(-37px) rotateX(-90deg);
|
||||
|
||||
}
|
||||
|
||||
#cube .side:nth-child(3) {
|
||||
-webkit-transform: translateX(37px) rotateY(-90deg);
|
||||
-moz-transform: translateX(37px) rotateY(-90deg);
|
||||
|
||||
}
|
||||
|
||||
#cube .side:nth-child(4) {
|
||||
-webkit-transform: translateX(-37px) rotateY(-90deg);
|
||||
-moz-transform: translateX(-37px) rotateY(-90deg);
|
||||
}
|
||||
|
||||
#cube .side:nth-child(5) {
|
||||
-webkit-transform: translateZ(37px) rotateZ(90deg);
|
||||
-moz-transform: translateZ(37px) rotateZ(90deg);
|
||||
}
|
||||
|
||||
#cube .side:nth-child(6) {
|
||||
-webkit-transform: translateZ(-37px) rotateZ(0deg);
|
||||
-moz-transform: translateZ(-37px) rotateZ(0deg);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1193,7 +1259,200 @@
|
|||
<path display="inline" fill="none" stroke="#42B19D" stroke-width="40" stroke-linecap="round" stroke-miterlimit="10" d="
|
||||
M-632,579c0,0-8-97,53-97s31,63,91,63s54-124,54-124"/>
|
||||
</g>
|
||||
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#8FA268" d="M93.729,230.969c-1.229-1.403-5.014-0.029-8.691,4.254l-15.494,18.043l1.805,2.061
|
||||
c0,0,10.046-11.699,11.216-13.062c2.381-2.773,5.47-6.226,6.071-5.538s-0.6,1.942-1.882,3.435
|
||||
c-8.815,10.266-10.268,15.82-8.834,17.458l5.81-6.766c-0.865-0.988,0.76-3.892,4.829-8.63c3.016-3.512,4.369-6,4.975-7.47
|
||||
C94.268,232.97,94.335,231.662,93.729,230.969z"/>
|
||||
</g>
|
||||
<path fill="#8FA268" d="M73.302,258.081c4.699-5.619,6.491-12.282,4.004-14.883c-2.487-2.601-8.313-0.154-13.011,5.465
|
||||
c-4.699,5.619-6.491,12.282-4.004,14.883S68.604,263.7,73.302,258.081z"/>
|
||||
<polygon fill="#8FA268" points="80.478,224.827 75.21,223.998 66.108,236.924 69.519,240.362 "/>
|
||||
<polygon fill="#8FA268" points="89.929,221.327 85.193,220.685 66.001,247.98 69.412,251.418 "/>
|
||||
<polygon fill="#8FA268" points="72.032,222.469 67.218,222.022 59.027,232.447 62.438,235.885 "/>
|
||||
<path fill="#8FA268" d="M63.263,256.391c6.266-3.334,10.729-12.172,9.968-19.74c-0.76-7.568-6.456-11-12.722-7.666
|
||||
c-6.266,3.334-10.729,12.172-9.968,19.74C51.302,256.293,56.998,259.725,63.263,256.391z"/>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#B7B3AB" d="M98.076,213.564c-2.042,0-4.228-1.275-4.228-3.174v-8h3c0,0,0,5.187,0,5.792
|
||||
c0,1.229,0.104,2.792,1.104,2.792s0.896-0.588,0.896-1.25c0-4.552,2.783-6.167,5.167-6.167v3c-1.438,0-2.167,1.065-2.167,3.167
|
||||
c0,1.557-0.657,2.46-1.208,2.944C99.97,213.253,99.084,213.564,98.076,213.564z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="#87837F" d="M95.848,210.389v-8h-2v8c0,1.899,2.186,3.174,4.228,3.174c0.341,0,0.661-0.048,0.97-0.118
|
||||
C97.362,213.104,95.848,211.968,95.848,210.389z"/>
|
||||
<path fill="#87837F" d="M98.848,210.181c0,0,0.693,0.035,0.875-1.416c0.208-1.667,1-4.875,4.292-4.804
|
||||
c0.042,0.001,0-0.404,0-0.404c-2.383,0-5.167,1.615-5.167,6.167V210.181z"/>
|
||||
</g>
|
||||
<ellipse fill="#B7B3AB" cx="90.514" cy="203.223" rx="7.167" ry="7.5"/>
|
||||
<path fill="#87837F" d="M83.348,203.223c0,4.142,3.209,7.5,7.167,7.5c0.208,0,0.413-0.014,0.616-0.033
|
||||
c2.122-1.302,3.55-3.708,3.55-6.467c0-4.142-3.209-7.5-7.167-7.5c-0.208,0-0.413,0.014-0.616,0.033
|
||||
C84.776,198.057,83.348,200.463,83.348,203.223z"/>
|
||||
<rect x="75.014" y="217.389" fill="#B7B3AB" width="5.333" height="7.667"/>
|
||||
<rect x="74.764" y="217.389" fill="#87837F" width="2.5" height="7.667"/>
|
||||
<rect x="84.681" y="210.056" fill="#B7B3AB" width="5.333" height="11.333"/>
|
||||
<rect x="84.681" y="210.056" fill="#87837F" width="2.333" height="11.333"/>
|
||||
<rect x="66.681" y="215.056" fill="#B7B3AB" width="5.333" height="7.667"/>
|
||||
<rect x="66.494" y="215.056" fill="#87837F" width="2.708" height="7.667"/>
|
||||
|
||||
<ellipse transform="matrix(0.9118 -0.4107 0.4107 0.9118 -79.3698 50.5674)" fill="#B7B3AB" cx="78" cy="210" rx="12.82" ry="10.532"/>
|
||||
<g>
|
||||
<path fill="#87837F" d="M66.311,215.266c1.32,2.931,4.104,4.829,7.418,5.455c1.201-0.216,2.411-0.584,3.597-1.118
|
||||
c6.456-2.908,14.188-11.38,11.188-16.88s-10.5-4.167-14.84-2.326C67.156,203.162,63.922,209.962,66.311,215.266z"/>
|
||||
</g>
|
||||
<path fill="#87837F" d="M96.348,203.639c0,2.439-1.455,4.417-3.25,4.417c-1.795,0-3.25-1.977-3.25-4.417s0.167-4.417,3.25-4.417
|
||||
C96.181,199.223,96.348,201.2,96.348,203.639z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#8FA268" d="M53.142,254.768c-0.976-1.115-3.984-0.023-6.907,3.381l-12.313,14.339l1.434,1.638
|
||||
c0,0,7.983-9.297,8.914-10.38c1.892-2.204,4.347-4.947,4.825-4.401s-0.476,1.543-1.495,2.73
|
||||
c-7.005,8.158-8.16,12.572-7.021,13.873l4.617-5.377c-0.687-0.785,0.604-3.093,3.838-6.858c2.397-2.791,3.472-4.768,3.953-5.936
|
||||
C53.571,256.359,53.624,255.319,53.142,254.768z"/>
|
||||
</g>
|
||||
<path fill="#8FA268" d="M37.705,272.34c3.734-4.465,5.158-9.761,3.182-11.827c-1.977-2.067-6.606-0.122-10.34,4.343
|
||||
s-5.158,9.761-3.182,11.827C29.341,278.75,33.971,276.806,37.705,272.34z"/>
|
||||
<polygon fill="#8FA268" points="43.407,245.914 39.221,245.255 31.987,255.528 34.698,258.26 "/>
|
||||
<polygon fill="#8FA268" points="50.918,243.132 47.154,242.622 31.903,264.313 34.613,267.045 "/>
|
||||
<polygon fill="#8FA268" points="36.695,244.04 32.869,243.685 26.36,251.969 29.071,254.701 "/>
|
||||
<path fill="#8FA268" d="M29.727,270.997c4.979-2.65,8.526-9.673,7.922-15.687c-0.604-6.014-5.13-8.742-10.11-6.092
|
||||
s-8.526,9.673-7.922,15.687C20.221,270.919,24.748,273.647,29.727,270.997z"/>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#B7B3AB" d="M57.392,236.963c-1.623,0-3.36-1.014-3.36-2.523v-6.357h2.384c0,0,0,4.122,0,4.602
|
||||
c0,0.977,0.083,2.219,0.877,2.219s0.712-0.467,0.712-0.993c0-3.617,2.212-4.9,4.106-4.9v2.384c-1.142,0-1.722,0.847-1.722,2.516
|
||||
c0,1.237-0.522,1.955-0.96,2.339C58.897,236.717,58.193,236.963,57.392,236.963z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="#87837F" d="M55.621,234.441v-6.357h-1.589v6.357c0,1.509,1.737,2.523,3.36,2.523c0.271,0,0.525-0.038,0.771-0.094
|
||||
C56.825,236.598,55.621,235.695,55.621,234.441z"/>
|
||||
<path fill="#87837F" d="M58.005,234.275c0,0,0.551,0.028,0.695-1.126c0.166-1.324,0.795-3.874,3.411-3.818
|
||||
c0.033,0.001,0-0.321,0-0.321c-1.894,0-4.106,1.283-4.106,4.9V234.275z"/>
|
||||
</g>
|
||||
<ellipse fill="#B7B3AB" cx="51.383" cy="228.745" rx="5.695" ry="5.96"/>
|
||||
<path fill="#87837F" d="M45.687,228.745c0,3.292,2.55,5.96,5.695,5.96c0.165,0,0.328-0.011,0.49-0.026
|
||||
c1.686-1.035,2.821-2.946,2.821-5.14c0-3.292-2.55-5.96-5.695-5.96c-0.165,0-0.328,0.011-0.49,0.026
|
||||
C46.823,224.641,45.687,226.552,45.687,228.745z"/>
|
||||
<rect x="39.065" y="240.003" fill="#B7B3AB" width="4.238" height="6.093"/>
|
||||
<rect x="38.866" y="240.003" fill="#87837F" width="1.987" height="6.093"/>
|
||||
<rect x="46.747" y="234.176" fill="#B7B3AB" width="4.238" height="9.006"/>
|
||||
<rect x="46.747" y="234.176" fill="#87837F" width="1.854" height="9.006"/>
|
||||
<rect x="32.443" y="238.149" fill="#B7B3AB" width="4.238" height="6.093"/>
|
||||
<rect x="32.294" y="238.149" fill="#87837F" width="2.152" height="6.093"/>
|
||||
|
||||
<ellipse transform="matrix(0.9118 -0.4107 0.4107 0.9118 -92.5074 37.6797)" fill="#B7B3AB" cx="41.438" cy="234.131" rx="10.188" ry="8.37"/>
|
||||
<g>
|
||||
<path fill="#87837F" d="M32.149,238.316c1.049,2.329,3.262,3.838,5.895,4.335c0.954-0.172,1.916-0.464,2.859-0.888
|
||||
c5.13-2.311,11.275-9.044,8.891-13.414S41.449,225.037,38,226.5C32.82,228.697,30.25,234.101,32.149,238.316z"/>
|
||||
</g>
|
||||
<path fill="#87837F" d="M56.018,229.077c0,1.938-1.156,3.51-2.583,3.51s-2.583-1.571-2.583-3.51c0-1.938,0.132-3.51,2.583-3.51
|
||||
S56.018,227.138,56.018,229.077z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#8FA268" d="M65.092,279.742c-1.229-1.403-5.014-0.029-8.691,4.254l-15.494,18.043l1.805,2.061
|
||||
c0,0,10.046-11.699,11.216-13.062c2.381-2.773,5.47-6.226,6.071-5.538s-0.6,1.942-1.882,3.435
|
||||
c-8.815,10.266-10.268,15.82-8.834,17.458l5.81-6.766c-0.865-0.988,0.76-3.892,4.829-8.63c3.016-3.512,4.369-6,4.975-7.47
|
||||
C65.632,281.743,65.699,280.435,65.092,279.742z"/>
|
||||
</g>
|
||||
<path fill="#8FA268" d="M44.302,306.581c4.699-5.619,6.491-12.282,4.004-14.883s-8.313-0.154-13.011,5.465
|
||||
s-6.491,12.282-4.004,14.883S39.604,312.2,44.302,306.581z"/>
|
||||
<polygon fill="#8FA268" points="51.478,273.327 46.21,272.498 37.108,285.424 40.519,288.862 "/>
|
||||
<polygon fill="#8FA268" points="60.929,269.827 56.193,269.185 37.001,296.48 40.412,299.918 "/>
|
||||
<polygon fill="#8FA268" points="43.032,270.969 38.218,270.522 30.027,280.947 33.438,284.385 "/>
|
||||
<path fill="#8FA268" d="M34.263,304.891c6.266-3.334,10.729-12.172,9.968-19.74s-6.456-11-12.722-7.666
|
||||
c-6.266,3.334-10.729,12.172-9.968,19.74C22.302,304.793,27.998,308.225,34.263,304.891z"/>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#B7B3AB" d="M69.076,262.064c-2.042,0-4.228-1.275-4.228-3.174v-8h3c0,0,0,5.187,0,5.792
|
||||
c0,1.229,0.104,2.792,1.104,2.792s0.896-0.588,0.896-1.25c0-4.552,2.783-6.167,5.167-6.167v3c-1.438,0-2.167,1.065-2.167,3.167
|
||||
c0,1.557-0.657,2.46-1.208,2.944C70.97,261.753,70.084,262.064,69.076,262.064z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="#87837F" d="M66.848,258.889v-8h-2v8c0,1.899,2.186,3.174,4.228,3.174c0.341,0,0.661-0.048,0.97-0.118
|
||||
C68.362,261.604,66.848,260.468,66.848,258.889z"/>
|
||||
<path fill="#87837F" d="M69.848,258.681c0,0,0.693,0.035,0.875-1.416c0.208-1.667,1-4.875,4.292-4.804
|
||||
c0.042,0.001,0-0.404,0-0.404c-2.383,0-5.167,1.615-5.167,6.167V258.681z"/>
|
||||
</g>
|
||||
<ellipse fill="#B7B3AB" cx="61.514" cy="251.723" rx="7.167" ry="7.5"/>
|
||||
<path fill="#87837F" d="M54.348,251.723c0,4.142,3.209,7.5,7.167,7.5c0.208,0,0.413-0.014,0.616-0.033
|
||||
c2.122-1.302,3.55-3.708,3.55-6.467c0-4.142-3.209-7.5-7.167-7.5c-0.208,0-0.413,0.014-0.616,0.033
|
||||
C55.776,246.557,54.348,248.963,54.348,251.723z"/>
|
||||
<rect x="46.014" y="265.889" fill="#B7B3AB" width="5.333" height="7.667"/>
|
||||
<rect x="45.764" y="265.889" fill="#87837F" width="2.5" height="7.667"/>
|
||||
<rect x="55.681" y="258.556" fill="#B7B3AB" width="5.333" height="11.333"/>
|
||||
<rect x="55.681" y="258.556" fill="#87837F" width="2.333" height="11.333"/>
|
||||
<rect x="37.681" y="263.556" fill="#B7B3AB" width="5.333" height="7.667"/>
|
||||
<rect x="37.494" y="263.556" fill="#87837F" width="2.708" height="7.667"/>
|
||||
|
||||
<ellipse transform="matrix(0.9118 -0.4107 0.4107 0.9118 -101.849 42.936)" fill="#B7B3AB" cx="49" cy="258.5" rx="12.82" ry="10.532"/>
|
||||
<g>
|
||||
<path fill="#87837F" d="M37.311,263.766c1.32,2.931,4.104,4.829,7.418,5.455c1.201-0.216,2.411-0.584,3.597-1.118
|
||||
c6.456-2.908,14.188-11.38,11.188-16.88s-10.5-4.167-14.84-2.326C38.156,251.662,34.922,258.462,37.311,263.766z"/>
|
||||
</g>
|
||||
<path fill="#87837F" d="M67.348,252.139c0,2.439-1.455,4.417-3.25,4.417c-1.795,0-3.25-1.977-3.25-4.417s0.167-4.417,3.25-4.417
|
||||
C67.181,247.723,67.348,249.7,67.348,252.139z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#8FA268" d="M310.592,462.742c-1.229-1.403-5.014-0.029-8.691,4.254l-15.494,18.043l1.805,2.061
|
||||
c0,0,10.046-11.699,11.216-13.062c2.381-2.773,5.47-6.226,6.071-5.538s-0.6,1.942-1.882,3.435
|
||||
c-8.815,10.266-10.268,15.82-8.834,17.458l5.81-6.766c-0.865-0.988,0.76-3.892,4.829-8.63c3.016-3.512,4.369-6,4.975-7.47
|
||||
C311.132,464.743,311.199,463.435,310.592,462.742z"/>
|
||||
</g>
|
||||
<path fill="#8FA268" d="M289.802,491.081c4.699-5.619,6.491-12.282,4.004-14.883s-8.313-0.154-13.011,5.465
|
||||
s-6.491,12.282-4.004,14.883S285.104,496.7,289.802,491.081z"/>
|
||||
<polygon fill="#8FA268" points="296.978,457.827 291.71,456.998 282.608,469.924 286.019,473.362 "/>
|
||||
<polygon fill="#8FA268" points="306.429,454.327 301.693,453.685 282.501,480.98 285.912,484.418 "/>
|
||||
<polygon fill="#8FA268" points="288.532,455.469 283.718,455.022 275.527,465.447 278.938,468.885 "/>
|
||||
<path fill="#8FA268" d="M279.763,489.391c6.266-3.334,10.729-12.172,9.968-19.74c-0.76-7.568-6.456-11-12.722-7.666
|
||||
c-6.266,3.334-10.729,12.172-9.968,19.74C267.802,489.293,273.498,492.725,279.763,489.391z"/>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#B7B3AB" d="M314.576,446.564c-2.042,0-4.228-1.275-4.228-3.174v-8h3c0,0,0,5.187,0,5.792
|
||||
c0,1.229,0.104,2.792,1.104,2.792s0.896-0.588,0.896-1.25c0-4.552,2.783-6.167,5.167-6.167v3c-1.438,0-2.167,1.065-2.167,3.167
|
||||
c0,1.557-0.657,2.46-1.208,2.944C316.47,446.253,315.584,446.564,314.576,446.564z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="#87837F" d="M312.348,443.389v-8h-2v8c0,1.899,2.186,3.174,4.228,3.174c0.341,0,0.661-0.048,0.97-0.118
|
||||
C313.862,446.104,312.348,444.968,312.348,443.389z"/>
|
||||
<path fill="#87837F" d="M315.348,443.181c0,0,0.693,0.035,0.875-1.416c0.208-1.667,1-4.875,4.292-4.804
|
||||
c0.042,0.001,0-0.404,0-0.404c-2.383,0-5.167,1.615-5.167,6.167V443.181z"/>
|
||||
</g>
|
||||
<ellipse fill="#B7B3AB" cx="307.014" cy="436.223" rx="7.167" ry="7.5"/>
|
||||
<path fill="#87837F" d="M299.848,436.223c0,4.142,3.209,7.5,7.167,7.5c0.208,0,0.413-0.014,0.616-0.033
|
||||
c2.122-1.302,3.55-3.708,3.55-6.467c0-4.142-3.209-7.5-7.167-7.5c-0.208,0-0.413,0.014-0.616,0.033
|
||||
C301.276,431.057,299.848,433.463,299.848,436.223z"/>
|
||||
<rect x="291.514" y="450.389" fill="#B7B3AB" width="5.333" height="7.667"/>
|
||||
<rect x="291.264" y="450.389" fill="#87837F" width="2.5" height="7.667"/>
|
||||
<rect x="301.181" y="443.056" fill="#B7B3AB" width="5.333" height="11.333"/>
|
||||
<rect x="301.181" y="443.056" fill="#87837F" width="2.333" height="11.333"/>
|
||||
<rect x="283.181" y="448.056" fill="#B7B3AB" width="5.333" height="7.667"/>
|
||||
<rect x="282.994" y="448.056" fill="#87837F" width="2.708" height="7.667"/>
|
||||
|
||||
<ellipse transform="matrix(0.9118 -0.4107 0.4107 0.9118 -155.9648 160.05)" fill="#B7B3AB" cx="294.5" cy="443" rx="12.82" ry="10.532"/>
|
||||
<g>
|
||||
<path fill="#87837F" d="M282.811,448.266c1.32,2.931,4.104,4.829,7.418,5.455c1.201-0.216,2.411-0.584,3.597-1.118
|
||||
c6.456-2.908,14.188-11.38,11.188-16.88s-10.5-4.167-14.84-2.326C283.656,436.162,280.422,442.962,282.811,448.266z"/>
|
||||
</g>
|
||||
<path fill="#87837F" d="M312.848,436.639c0,2.439-1.455,4.417-3.25,4.417s-3.25-1.977-3.25-4.417c0-2.439,0.167-4.417,3.25-4.417
|
||||
S312.848,434.2,312.848,436.639z"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
|
||||
<div id="cube-hitarea">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,164 @@
|
|||
<!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>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="../../dist/snap.svg-min.js"></script>
|
||||
<script>
|
||||
window.onload = function () {
|
||||
|
||||
var croc = Snap.select("#crocodile"),
|
||||
head = croc.select("#upper-head"),
|
||||
jaw = croc.select("#upper-jaw"),
|
||||
symbol = croc.select("#symbol"),
|
||||
timer;
|
||||
|
||||
var pivots = [
|
||||
[44, 147],
|
||||
[92, 126]
|
||||
];
|
||||
|
||||
function close() {
|
||||
clearTimeout(timer);
|
||||
|
||||
head.animate({
|
||||
transform: "r" + [8, pivots[0]]
|
||||
}, 500, mina.backin);
|
||||
|
||||
jaw.animate({
|
||||
transform: "r" + [37, pivots[1]]
|
||||
}, 500, mina.backin);
|
||||
|
||||
timer = setTimeout(function () {
|
||||
symbol.animate({
|
||||
transform: "t-70,40r40"
|
||||
}, 100);
|
||||
}, 400);
|
||||
}
|
||||
|
||||
function open() {
|
||||
clearTimeout(timer);
|
||||
|
||||
head.animate({
|
||||
transform: "r" + [0, pivots[0]]
|
||||
}, 700, mina.elastic);
|
||||
|
||||
jaw.animate({
|
||||
transform: "r" + [0, pivots[1]]
|
||||
}, 700, mina.elastic);
|
||||
|
||||
symbol.animate({
|
||||
transform: "t0,0r0"
|
||||
}, 500, mina.elastic);
|
||||
}
|
||||
|
||||
timer = setTimeout(close, 50);
|
||||
|
||||
croc.hover(open,
|
||||
function () {
|
||||
timer = setTimeout(close, 200);
|
||||
}
|
||||
);
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<svg version="1.1" id="crocodile" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="312px" height="300px" viewBox="0 0 260 250" enable-background="new 0 0 260 250" xml:space="preserve">
|
||||
<g>
|
||||
<path id="symbol" opacity="0.2" fill="#848383" enable-background="new " d="M185.631,140.915l5.02,10.86l8.145-3.765
|
||||
l-5.02-10.86L185.631,140.915z M246.828,109.341l-47.613,25.306l5.02,10.86l50.123-19.876L246.828,109.341z"/>
|
||||
<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>
|
||||
<path id="upper-teeth" fill="#E0CAB1" d="M151.174,129.382l14.913,6.086l-6.602-14.691L151.174,129.382z M138.707,142.292
|
||||
l14.914,6.086l-6.603-14.692L138.707,142.292z M126.241,155.201l14.913,6.086l-6.602-14.692L126.241,155.201z M163.64,116.474
|
||||
l14.913,6.085l-6.603-14.692L163.64,116.474z M176.106,103.564l14.913,6.086l-6.602-14.692L176.106,103.564z M188.572,90.655
|
||||
l14.914,6.085l-6.602-14.691L188.572,90.655z M201.039,77.746l14.913,6.085L209.35,69.14L201.039,77.746z M221.816,56.23
|
||||
l-8.311,8.607l14.913,6.085L221.816,56.23z"/>
|
||||
<path opacity="0.4" fill="#FFFFFF" enable-background="new " d="M155.329,125.08l10.758,10.388l-6.602-14.691L155.329,125.08
|
||||
z M142.863,137.989l10.758,10.389l-6.603-14.692L142.863,137.989z M130.396,150.898l10.758,10.389l-6.602-14.692
|
||||
L130.396,150.898z M167.796,112.171l10.757,10.388l-6.603-14.692L167.796,112.171z M180.261,99.261l10.758,10.389l-6.602-14.692
|
||||
L180.261,99.261z M192.728,86.352l10.758,10.388l-6.602-14.691L192.728,86.352z M205.195,73.443l10.757,10.388L209.35,69.14
|
||||
L205.195,73.443z M221.816,56.23l-4.156,4.303l10.758,10.389L221.816,56.23z"/>
|
||||
</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 "/>
|
||||
<line opacity="0.2" fill="#FFFFFF" enable-background="new " x1="197.189" y1="46.955" x2="92" y2="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
|
||||
0,200.541 0,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="0,200.541 46.847,194.559 79.747,179.604 "/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,327 @@
|
|||
<!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>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script>
|
||||
window.onload = function () {
|
||||
|
||||
var diagramgroup = Snap.select("#crocodile-2"),
|
||||
elements = {},
|
||||
elementkeys = ['map', 'pie', 'eye'],
|
||||
diagramtimer = [],
|
||||
animating = {},
|
||||
cleartimers = {},
|
||||
i = 0, j = 0;
|
||||
|
||||
function show(key) {
|
||||
if (animating[key]) return;
|
||||
clearTimeout(cleartimers[key]);
|
||||
animating[key] = true;
|
||||
var element = elements[key],
|
||||
x = element[0].getBBox().x,
|
||||
offset = x/2 + 25;
|
||||
element[0].attr({
|
||||
transform: "translate("+offset+",80) scale(0.5, 0.5)"
|
||||
});
|
||||
setTimeout(function() {
|
||||
element[0].animate({opacity:1,transform:""}, 500, mina.elastic);
|
||||
}, 50);
|
||||
element[1].animate({opacity:0.25}, 400);
|
||||
setTimeout(function(){animating[key] = false}, 550);
|
||||
}
|
||||
|
||||
function showAll() {
|
||||
j = 0;
|
||||
function cycle() {
|
||||
show(elementkeys[j]);
|
||||
j++;
|
||||
if (j < elementkeys.length) setTimeout(cycle, 200);
|
||||
}
|
||||
cycle();
|
||||
}
|
||||
|
||||
function hoverIn() {
|
||||
show( this.node.id.replace('hit-', '') );
|
||||
}
|
||||
|
||||
|
||||
for (i = 0; i < elementkeys.length; i++) {
|
||||
var key = elementkeys[i],
|
||||
diagram = diagramgroup.select("#diagram-" + key).attr({opacity:0}),
|
||||
path = diagramgroup.select("#path-" + key).attr({opacity:0}),
|
||||
hitarea = diagramgroup.select("#hit-" + key);
|
||||
hitarea.hover(hoverIn);
|
||||
elements[key] = [diagram, path];
|
||||
}
|
||||
|
||||
diagramtimer = setTimeout(showAll, 250);
|
||||
|
||||
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<svg version="1.1" id="crocodile-2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="375px" height="300px" viewBox="0 0 500 400" enable-background="new 0 0 500 400" xml:space="preserve">
|
||||
<g id="croc">
|
||||
|
||||
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-352.022" y1="820.576" x2="-352.022" y2="919.5" gradientTransform="matrix(-1 0 0 1 79 -537.5)">
|
||||
<stop offset="0" style="stop-color:#000000;stop-opacity:0.25"/>
|
||||
<stop offset="0.7074" style="stop-color:#000000;stop-opacity:0"/>
|
||||
</linearGradient>
|
||||
<polygon fill="url(#SVGID_1_)" points="828.78,382 766.953,320.172 424.839,283.076 33.264,309.868 105.396,382 "/>
|
||||
<polygon fill="#00A99D" points="717.49,299.563 639.175,287.198 597.957,274.832 581.47,274.832 527.886,258.345 499.033,250.101
|
||||
424.839,237.735 363.012,237.735 330.037,245.979 272.331,250.101 255.844,245.979 218.747,254.223 198.138,254.223
|
||||
169.285,262.466 169.02,262.528 168.718,262.466 150.365,258.345 132.031,258.345 120.695,270.535 49.639,291.805 39.562,289.472
|
||||
33.264,295.441 33.264,309.413 37.204,309.346 43.291,316.495 72.885,318.333 91.381,320.172 137.62,319.364 153.768,319.364
|
||||
161.041,320.172 210.503,320.172 198.138,332.538 239.356,332.538 247.6,328.416 251.722,320.172 276.453,320.172 325.915,324.294
|
||||
381.312,320.337 375.377,324.294 363.012,332.538 416.596,332.538 424.839,328.416 430.335,320.172 441.327,320.172
|
||||
503.154,316.05 532.007,320.172 614.437,324.294 635.066,324.294 672.15,320.172 766.953,320.172 "/>
|
||||
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="346.524,258.345 330.037,245.979 363.012,237.735 "/>
|
||||
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="717.49,299.563 721.612,311.929 655.663,303.685
|
||||
597.957,291.319 569.104,295.441 494.911,274.832 499.033,250.101 527.886,258.345 581.47,274.832 597.957,274.832
|
||||
639.175,287.198 "/>
|
||||
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="499.033,250.101 433.083,250.101 424.839,237.735 "/>
|
||||
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="527.885,258.345 494.911,274.832 433.083,250.101
|
||||
363.012,237.735 424.839,237.735 499.033,250.101 "/>
|
||||
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="597.957,274.832 597.957,291.319 581.47,274.832 "/>
|
||||
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="527.885,258.345 569.104,295.441 581.47,274.832 "/>
|
||||
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="527.885,258.345 494.911,274.832 437.205,262.466
|
||||
420.718,274.832 346.524,258.345 272.331,250.101 330.037,245.979 363.012,237.735 424.839,237.735 499.033,250.101 "/>
|
||||
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="433.083,250.101 420.718,274.832 346.524,258.345
|
||||
309.428,278.954 272.331,262.466 255.844,245.979 272.331,250.101 330.037,245.979 363.012,237.735 424.839,237.735
|
||||
499.033,250.101 "/>
|
||||
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="272.331,250.101 272.331,262.466 218.747,254.223
|
||||
255.844,245.979 "/>
|
||||
<polygon opacity="0.2" fill="#FFFFFF" enable-background="new " points="120.695,270.534 123.127,285.425 49.638,291.805 "/>
|
||||
<polyline opacity="0.2" fill="#FFFFFF" enable-background="new " points="49.638,291.805 62.343,298.568 120.695,270.534 "/>
|
||||
<polygon opacity="0.2" fill="#FFFFFF" enable-background="new " points="120.695,270.534 120.695,270.534 123.127,285.425
|
||||
132.031,258.345 "/>
|
||||
<polygon opacity="0.2" fill="#FFFFFF" enable-background="new " points="150.365,258.345 123.127,285.425 120.695,270.534
|
||||
132.031,258.345 "/>
|
||||
<polygon fill="#FFFFFF" points="141.617,267.138 137.495,271.26 145.739,271.26 149.861,268.676 "/>
|
||||
<polygon opacity="0.2" fill="#FFFFFF" enable-background="new " points="150.365,258.345 168.718,262.642 119.911,270.71
|
||||
132.031,258.345 "/>
|
||||
<polygon opacity="0.2" fill="#FFFFFF" enable-background="new " points="49.638,291.805 33.264,295.441 39.562,289.472 "/>
|
||||
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="161.041,311.929 140.432,299.563 107.457,299.563
|
||||
123.945,295.441 144.554,295.441 "/>
|
||||
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="144.554,295.441 123.945,295.441 140.432,299.563 "/>
|
||||
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="255.844,245.979 218.747,254.223 218.747,262.466
|
||||
198.138,254.223 218.747,254.223 "/>
|
||||
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="218.747,254.223 218.747,262.466 169.285,270.71
|
||||
132.598,258.345 152.798,258.345 169.285,262.466 198.138,254.223 "/>
|
||||
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="330.037,245.979 272.331,262.466 247.6,278.954
|
||||
218.747,262.466 169.285,283.076 169.285,262.466 198.138,254.223 218.747,254.223 255.844,245.979 272.331,250.101 "/>
|
||||
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="259.966,278.954 247.6,291.319 235.235,287.198 "/>
|
||||
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="280.575,287.198 247.6,291.319 226.991,316.05
|
||||
235.235,287.198 259.966,278.954 "/>
|
||||
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="210.503,320.172 206.382,332.538 198.138,332.538 "/>
|
||||
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="226.991,316.05 235.235,320.172 210.503,320.172 "/>
|
||||
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="288.819,299.563 280.575,287.198 259.966,278.954
|
||||
235.235,287.198 247.6,291.319 259.966,278.954 "/>
|
||||
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="235.235,287.198 235.235,320.172 218.747,332.538
|
||||
206.382,332.538 198.138,332.538 210.503,320.172 226.991,316.05 "/>
|
||||
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="466.058,270.71 445.449,287.198 433.083,278.954 "/>
|
||||
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="420.718,287.198 445.449,287.198 486.667,287.198
|
||||
466.058,270.71 433.083,278.954 "/>
|
||||
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="404.23,311.929 445.449,287.198 466.058,270.71
|
||||
433.083,278.954 420.718,287.198 "/>
|
||||
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="387.743,316.05 416.596,320.172 404.23,311.929 "/>
|
||||
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="379.499,332.538 375.377,324.294 363.012,332.538 "/>
|
||||
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="387.743,316.05 379.499,332.538 363.012,332.538
|
||||
375.377,324.294 "/>
|
||||
<polygon opacity="0.15" fill="#FFFFFF" enable-background="new " points="416.596,320.172 379.499,332.538 363.012,332.538
|
||||
375.377,324.294 387.743,316.05 404.23,311.929 420.718,287.198 "/>
|
||||
</g>
|
||||
<polyline id="path-eye" opacity="0.25" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" enable-background="new " points="
|
||||
121.714,247.568 66.427,193.472 66.427,149.497 "/>
|
||||
<polyline id="path-pie" opacity="0.25" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" enable-background="new " points="
|
||||
272.069,237.568 226.782,193.472 226.782,155.497 "/>
|
||||
<polyline id="path-map" opacity="0.25" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" enable-background="new " points="
|
||||
412.069,227.568 376.782,193.472 376.782,145.497 "/>
|
||||
<g id="diagram-eye">
|
||||
|
||||
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="238.8165" y1="619.2575" x2="320.3815" y2="700.8225" gradientTransform="matrix(1 0 0 1 -171 -537.5)">
|
||||
<stop offset="0" style="stop-color:#000000;stop-opacity:0.15"/>
|
||||
<stop offset="0.9331" style="stop-color:#000000;stop-opacity:0"/>
|
||||
</linearGradient>
|
||||
<polygon fill="url(#SVGID_2_)" points="91.848,220.855 10.283,139.291 125.35,24.224 206.915,105.789 "/>
|
||||
<rect x="10" y="24.507" fill="#00A99D" width="115.35" height="115.35"/>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<defs>
|
||||
<rect id="SVGID_3_" x="10" y="24.507" width="115.35" height="115.35"/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_4_">
|
||||
<use xlink:href="#SVGID_3_" overflow="visible"/>
|
||||
</clipPath>
|
||||
|
||||
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="-288.3424" y1="535.6428" x2="-205.4552" y2="618.5298" gradientTransform="matrix(0.5689 0.1954 0.1954 0.5689 124.387 -168.8858)">
|
||||
<stop offset="0" style="stop-color:#000000;stop-opacity:0.25"/>
|
||||
<stop offset="1" style="stop-color:#000000;stop-opacity:0"/>
|
||||
</linearGradient>
|
||||
<polygon clip-path="url(#SVGID_4_)" fill="url(#SVGID_5_)" points="106.408,162.927 44.068,100.445 96.512,68.965
|
||||
149.381,121.833 "/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<path fill="#60C6BA" d="M28.023,82.182c0,0,18.023-28.837,39.652-28.837s39.652,28.837,39.652,28.837s-18.023,28.837-39.652,28.837
|
||||
S28.023,82.182,28.023,82.182z"/>
|
||||
<g>
|
||||
<circle fill="#9BEADF" cx="67.675" cy="82.182" r="24.031"/>
|
||||
</g>
|
||||
<path fill="#00A99D" d="M67.675,65.017c0,0,3.433,6.866,3.433,17.165s-3.433,17.165-3.433,17.165s-3.433-6.866-3.433-17.165
|
||||
S67.675,65.017,67.675,65.017z"/>
|
||||
<circle opacity="0.5" fill="#FFFFFF" enable-background="new " cx="57.921" cy="67.48" r="4.806"/>
|
||||
<circle opacity="0.5" fill="#FFFFFF" enable-background="new " cx="50.712" cy="74.689" r="2.403"/>
|
||||
</g>
|
||||
<g id="diagram-pie">
|
||||
|
||||
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="400.0527" y1="624.0652" x2="473.0262" y2="697.0389" gradientTransform="matrix(1 0 0 1 -171 -537.5)">
|
||||
<stop offset="0" style="stop-color:#000000;stop-opacity:0.25"/>
|
||||
<stop offset="0.9" style="stop-color:#000000;stop-opacity:0"/>
|
||||
</linearGradient>
|
||||
<path fill="url(#SVGID_6_)" d="M272.351,43.267l-86.596,86.597l72.973,72.973l86.596-86.596L272.351,43.267z"/>
|
||||
<circle fill="#60C6BA" cx="226.973" cy="83.304" r="61.828"/>
|
||||
<path fill="#00A99D" d="M197.727,137.784c8.708,4.684,18.665,7.347,29.246,7.347c34.146,0,61.828-27.681,61.828-61.828
|
||||
s-27.681-61.828-61.828-61.828v59.767L197.727,137.784z"/>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<defs>
|
||||
<circle id="SVGID_7_" cx="226.973" cy="83.304" r="61.828"/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_8_">
|
||||
<use xlink:href="#SVGID_7_" overflow="visible"/>
|
||||
</clipPath>
|
||||
|
||||
<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="397.6839" y1="619.334" x2="444.7831" y2="666.433" gradientTransform="matrix(1 0 0 1 -171 -537.5)">
|
||||
<stop offset="0" style="stop-color:#000000;stop-opacity:0.25"/>
|
||||
<stop offset="1" style="stop-color:#000000;stop-opacity:0"/>
|
||||
</linearGradient>
|
||||
<path clip-path="url(#SVGID_8_)" fill="url(#SVGID_9_)" d="M258.189,50.329l-4.726,4.726
|
||||
c6.853,6.853,11.092,16.321,11.092,26.779c0,20.916-16.955,37.871-37.871,37.871c-10.458,0-19.926-4.239-26.779-11.092
|
||||
l-4.726,4.726l47.099,47.099l63.009-63.009L258.189,50.329z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<path fill="#9BEADF" d="M226.973,83.304V21.476c-9.586,0-18.663,2.183-26.76,6.077L226.973,83.304z"/>
|
||||
<circle fill="#60C6BA" cx="226.973" cy="83.304" r="45.34"/>
|
||||
<path fill="#00A99D" d="M272.313,83.304c0-25.041-20.3-45.34-45.34-45.34v90.681C252.013,128.644,272.313,108.345,272.313,83.304z"
|
||||
/>
|
||||
<path fill="#9BEADF" d="M184.162,68.37l42.811,14.934v-45.34C207.166,37.963,190.337,50.669,184.162,68.37z"/>
|
||||
</g>
|
||||
<g id="diagram-map">
|
||||
|
||||
<linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="505.6437" y1="570.8013" x2="608.6902" y2="673.8477" gradientTransform="matrix(1 0 0 1 -171 -537.5)">
|
||||
<stop offset="0" style="stop-color:#000000;stop-opacity:0.25"/>
|
||||
<stop offset="1" style="stop-color:#000000;stop-opacity:0"/>
|
||||
</linearGradient>
|
||||
<polygon fill="url(#SVGID_10_)" points="387.104,186.934 330.897,130.727 334.644,33.301 432.069,29.554 488.276,85.761 "/>
|
||||
<path fill="#60C6BA" d="M435.816,117.612c0,9.313-7.549,16.862-16.862,16.862h-78.69c-9.313,0-16.862-7.549-16.862-16.862v-78.69
|
||||
c0-9.313,7.549-16.862,16.862-16.862h78.69c9.313,0,16.862,7.549,16.862,16.862V117.612z"/>
|
||||
<g>
|
||||
<path fill="#00A99D" d="M412.875,101.541c-0.173,1.625-0.483,1.955,1.618,1.847C414.559,102.355,414.023,101.464,412.875,101.541
|
||||
C412.822,102.037,414.083,101.46,412.875,101.541z M425.12,118.865c0.869-1.597-3.166-1.674-3.927-1.848
|
||||
c0.801-2.307-0.758-1.445-2.301-1.944c-0.981-0.317-2.751-2.095-3.72-2.83c-1.12-0.849-2.495-0.625-3.695-1.162
|
||||
c-1.639-0.734-1.6-2.245-3.661-2.818c-1.15-0.319-4.17,0.105-4.623-0.454c-0.808-0.996-2.685-0.572-3.697-0.255
|
||||
c-1.204,0.376-2.472,1.029-3.236,2.068c-0.416,0.566-1.26,2.358-1.168,2.545c0.776-0.172,8.085-5.264,8.085-2.542
|
||||
c0,1.436,4.053,1.143,4.328,2.108c0.547,1.92,3.575,1.939,5.144,1.819c-0.561,2.424,2.1,3.612,3.927,4.158
|
||||
c-0.159,0.952-1.499,1.761-1.156,2.771C417.782,120.22,423.477,120.739,425.12,118.865
|
||||
C425.957,117.328,424.645,119.407,425.12,118.865z M395.784,80.974c2.509,0.069,1.327,2.668,3.205,3.107
|
||||
c1.935,0.453-0.559,5.006,0.952,6.131c0.372-0.824,0.346-1.347,1.385-1.155c-0.047,1.523-1.881,2.833-0.23,4.158
|
||||
c0.298,0.492,1.155,0.373,1.155,1.155c0,1.539,2.068,4.913,3.927,5.543c0.575-2.302,1.155-4.685,1.155-6.365
|
||||
c0-1.209-0.534-4.18-1.617-4.722c0.234-1.168,0.235-0.913,0-1.617c-1.028-0.69-0.525-1.354-0.692-2.311
|
||||
c-0.154-0.88-0.925-2.092-0.925-3.601c0-0.721-1.258-1.364-0.991-2.097c0.381-1.047,0.734-0.752,0.53-2.386
|
||||
c-0.003,0.008,1.055-2.113,1.155-2.31c-0.512-1.531,2.031-2.269,2.31-3.927c1.698,0.566,1.654-1.618,2.541-1.618
|
||||
c0.788,0,0.751-1.144,0.924-1.848c1.387,0.347,1.32-0.378,2.541-0.924c1.275-0.651,2.202-2.903,3.696-3.234
|
||||
c-0.136-0.579-0.367-1.118-0.692-1.617c0.854,0.015,1.187-0.092,1.617-0.462c-0.15-0.595-0.834-1.288-1.155-1.617
|
||||
c0.57,0.157,1.109,0.08,1.617-0.231c0.407,1.22,1.495,0.917,2.079,0.001c-0.588-0.451-0.413-0.236-0.923-0.924
|
||||
c-2.706-0.516-1.321-0.662,0.231-1.616c-0.508-1.524-0.092-1.592-1.791-2.426c-0.48-0.236-0.99-1.303-1.212-1.731
|
||||
c0.616-0.077,1.232-0.154,1.848-0.231c-0.155-0.74-0.927-1.502-1.387-1.848c0.231,0,0.463,0,0.694,0
|
||||
c-0.272-0.855-1.376-1.159-1.617-2.079c0.231,0,0.461,0,0.692,0c-0.252-1.762,0.278-1.826,0.693-3.696
|
||||
c0.709,0.076,0.709-0.463,0-1.617c1.639-0.328,0.885-0.792,2.541-0.462c0.214-0.626-0.062-0.534,0.463-0.923
|
||||
c0.867,1.135-1.279,2.217-1.617,3.232c0.154,0,0.308,0,0.462,0c-1.142,0.548-1.308,3.691-0.692,4.158
|
||||
c0.473,0.359,2.247-1.061,1.616,1.155c1.652-0.881,1.439-0.474,1.848-1.848c0.158-0.533,0.368-0.674,0.462-1.387
|
||||
c0.103-0.818-1.031-2.294-0.924-3.927c0.761,0.339,1.825,1.343,2.773,0.923c1.198-0.58,0.322-2.588,1.848-2.079
|
||||
c0.399-1.329,0.309-4.388-0.001-4.388c0.589,0,1.487-2.163,2.078-2.541c0.9-0.576,2.577-0.124,3.003-1.387
|
||||
c1.198-0.054,2.052,0.555,2.54,0.231h0.231c0.197-0.515-0.382-0.574-0.462-0.924h0.231c0.151-0.347,0.186-0.377,0.231-0.923
|
||||
c0.028,0.006,0.057,0.011,0.085,0.017c-2.69-5.74-8.502-9.725-15.261-9.725h-78.69c-9.313,0-16.862,7.549-16.862,16.862v61.411
|
||||
c0.458,0.918,1.198,2.159,1.477,2.364c1.681,0.128,2.141,3.274,3.465,4.157c0.577,1.067,0.775,2.05,1.617,3.233
|
||||
c1.367,0.688,2.337,7.623,1.154,7.623c-1.059,0,1.12,6.006,3.004,6.006c0.52,0,2.246,1.595,2.77,2.077
|
||||
c0.742,0.577,0.698,1.476,1.617,2.08c0.316,0.204,1.355,0.566,1.847,0.693c3.485,0.901,6.774,5.433,10.857,4.619
|
||||
c0.077,0.231,0.154,0.462,0.231,0.693c0.995,0.053,0.783,0.142,1.386,0.462v0.134h29.595c0.209-0.462-0.014-0.922,0.199-1.524
|
||||
c0.298-0.276,1.803-5.585-0.229-5.775c0.296-0.644,0.87-1.52,1.155-1.848c0.112,0.498,0.035,0.96-0.231,1.386
|
||||
c2.802,0.691,0.126-0.015,0.924,0.692c0.154,0,0.307,0,0.461,0c-0.322-2.284,1.188-4.774,0.654-6.635
|
||||
c-0.335-1.168,1.194-2.637,1.194-3.528c0-1.734,0.816-2.275-0.924-3.233c-0.694-0.382-1.948-0.727-3.234,0
|
||||
c-2.284,3.036-5.775,0.71-5.775,6.072c0,1.772-2.141,5.815-3.927,6.167c-0.333-0.267-0.576-0.568-0.693-0.923
|
||||
c-0.542,0.181-1.804,0.217-2.238,0.526c-0.244,0.173-0.924,1.288-0.996,1.321c-0.92-0.453-2.549,0.335-3.552,0.408
|
||||
c-1.738,0.126-1.403-2.025-3.031-2.025c-2.078,0-1.885-0.493-2.893-2.494c-0.721-1.432-0.569-2.181-2.075-3.05
|
||||
c-0.257-0.257-0.254-0.6-0.461-0.924c-0.567-0.888-1.997-2.877-2.079-4.156c-0.198,0.127-0.568,0.36-0.692,0.462
|
||||
c0.316-1.902,0.693-4.139,0.692-5.775c0-0.996-0.947-2.768-0.678-3.571c0.325-0.972-0.078-2.736-0.015-3.357
|
||||
c-0.317-1.908,0.494-1.278,0.692-3.004c0.212-0.369,1.095-0.273,1.467-1.403c0.323-0.98,0.135-0.973-0.544-1.138
|
||||
c0.512-1.53-0.621-1.696-0.924-3.002c-0.274-1.181-0.879-3.683,0.461-3.234c0.399-1.043,0.425-3.002,1.849-3.002
|
||||
c1.109,0,1.63-0.648,1.385-1.617c1.057-0.677,2.649-0.532,3.464-1.155c0.065-1.455,1.375-1.531,0.925-3.003
|
||||
c0.285,0.095,1.319,0.703,1.385,0.693c0.705-0.106,2.3-0.59,2.079-1.617c0.962,0.485,1.113-0.14,1.848,0
|
||||
c0.005,0,2.327,0.773,1.848,0.693c0.46,0.104,0.876-0.271,1.617-0.463c-0.211,1.814,1.416,1.576,2.541,0.923
|
||||
c0,0.154,0,0.308,0,0.462c-2.585,1.273,2.05,1.263,2.54,1.385c-0.253-0.934-0.693-1.484,0.231-2.309
|
||||
c0.628,0.173,3.465,2.134,3.465,2.308c0,0.726,0.493,0.553,0.924,0.232c-0.194-0.973-2.545-2.14-0.23-2.541
|
||||
c-0.047-0.174-0.433-1.023-0.693-0.925c-1.103,0.498-0.558-0.805-2.079-0.231c-0.159-0.163-0.461-0.61-0.692-0.923
|
||||
c0.769-0.104,1.539-0.104,2.31,0c-0.053-0.479,0.108-0.734,0.484-0.766c0.406-0.116,1.422-0.167,1.364-0.159
|
||||
c0.818-0.111,2.554,1.765,2.309-0.462c0.154,0,0.308,0,0.462,0c0.353,2.143,1.659,1.379,2.078,0.001
|
||||
c0.584,1.551,1.801,0.262,3.004,0.462c-0.496,1.646,1.971,1.348,2.541,2.772c0.799,0.348,1.109,0.703,2.078,0.461
|
||||
c-0.381,0.052,2.847-1.321,2.667-0.991C396.719,81.347,395.595,81.32,395.784,80.974
|
||||
C398.309,81.043,395.457,81.572,395.784,80.974z M428.351,115.631c0.024-0.304-0.19-0.311-0.461-0.231
|
||||
C428.152,115.658,427.888,115.498,428.351,115.631z M399.478,112.396c0.78,0.312,0.3,1.138-0.462,1.618
|
||||
C402.647,115.73,399.785,108.812,399.478,112.396z M434.824,120.714c-0.447-0.188-1.037,0.024-1.386,0.462
|
||||
c-1.893,0.693-2.513-1.081-4.39-0.694c1.479,1.363,0.753,1.063,1.385,2.772c0.088,0.149,1.346,2.124,0.709,2.146
|
||||
c-0.981,0.035-2.859-0.336-3.845-0.597c-1.739-0.46-3.358,1.223-1.391,1.38c2.47,0.198,4.858,0.304,7.367,0.304
|
||||
c1.102-1.774,1.884-3.761,2.265-5.893C435.299,120.634,435.062,120.674,434.824,120.714
|
||||
C434.377,120.526,435.062,120.674,434.824,120.714z M418.188,125.793c-0.611-1.214-4.706-1.446-5.446-0.186
|
||||
c-0.362,0.616,5.189,3.353,6.758,1.667C419.879,126.867,418.13,125.748,418.188,125.793
|
||||
C417.857,125.135,418.525,126.058,418.188,125.793z"/>
|
||||
</g>
|
||||
|
||||
<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="548.6378" y1="585.9402" x2="596.8632" y2="634.1658" gradientTransform="matrix(1 0 0 1 -171 -537.5)">
|
||||
<stop offset="0" style="stop-color:#000000;stop-opacity:0.25"/>
|
||||
<stop offset="0.7305" style="stop-color:#000000;stop-opacity:0.0245"/>
|
||||
<stop offset="0.9282" style="stop-color:#000000;stop-opacity:0"/>
|
||||
</linearGradient>
|
||||
<polygon fill="url(#SVGID_11_)" points="413.91,108.619 377.844,71.522 389.591,36.487 434.519,83.888 "/>
|
||||
<path fill="#9BEADF" d="M391.297,48.623h-0.169c0.508-1.435,0.799-2.971,0.799-4.58c0-7.588-6.151-13.739-13.739-13.739
|
||||
s-13.739,6.151-13.739,13.739c0,1.608,0.291,3.145,0.799,4.58h-0.169l0.504,0.88c0.395,0.911,0.892,1.764,1.466,2.56l11.14,19.459
|
||||
l11.14-19.459c0.574-0.796,1.071-1.649,1.466-2.56L391.297,48.623z M373.607,44.043c0-2.529,2.051-4.58,4.58-4.58
|
||||
s4.58,2.05,4.58,4.58c0,2.529-2.051,4.58-4.58,4.58S373.607,46.572,373.607,44.043z"/>
|
||||
</g>
|
||||
<rect id="hit-eye" x="6.5" y="22.061" opacity="0" fill="#FF0000" width="122.667" height="123.071"/>
|
||||
<rect id="hit-pie" x="165.658" y="22.061" opacity="0" fill="#FF0000" width="122.667" height="123.071"/>
|
||||
<rect id="hit-map" x="316.855" y="22.061" opacity="0" fill="#FF0000" width="122.667" height="123.071"/>
|
||||
</svg>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!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>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<iframe src="crocodile-1.html" ></iframe>
|
||||
<br>
|
||||
<iframe src="snap-logo.html" ></iframe>
|
||||
<iframe src="crocodile-2.html" ></iframe>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -15,94 +15,118 @@
|
|||
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 Logo</title>
|
||||
<title>Snap</title>
|
||||
<script src="../../dist/snap.svg-min.js"></script>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script>
|
||||
|
||||
window.onload = function () {
|
||||
|
||||
var logo = Snap.select("#snap-logo"),
|
||||
elements = [
|
||||
parts = [
|
||||
["top", [0, 20]],
|
||||
["left", [20, 0]],
|
||||
["bottom", [0, -20]],
|
||||
["right", [-20, 0]]
|
||||
],
|
||||
i;
|
||||
i = 0,
|
||||
showTimer = null,
|
||||
hideTimer = null;
|
||||
|
||||
for (i = 0; i < elements.length; i++) {
|
||||
var el = elements[i],
|
||||
element = logo.select("#" + el[0]);
|
||||
for (i = 0; i < parts.length; i++) {
|
||||
var el = parts[i],
|
||||
element = logo.select("#" + el[0]);
|
||||
element.attr({
|
||||
opacity: 0,
|
||||
transform: "t" + el[1]
|
||||
});
|
||||
elements[i] = element;
|
||||
parts[i].push(element);
|
||||
}
|
||||
|
||||
i = 0;
|
||||
|
||||
function animateEach() {
|
||||
if (!elements[i]) return;
|
||||
elements[i].animate({
|
||||
function showEach() {
|
||||
clearTimeout(hideTimer);
|
||||
if (i >= parts.length) return;
|
||||
parts[i][2].animate({
|
||||
transform: "t0,0",
|
||||
opacity: 1
|
||||
}, 200, mina.easeout);
|
||||
setTimeout(animateEach, 200);
|
||||
showTimer = setTimeout(showEach, 200);
|
||||
i++;
|
||||
if (i >= parts.length) i = parts.length-1;
|
||||
}
|
||||
|
||||
function hideEach() {
|
||||
clearTimeout(showTimer);
|
||||
if (i < 0) return;
|
||||
parts[i][2].animate({
|
||||
transform: "t" + parts[i][1],
|
||||
opacity: 0
|
||||
}, 200, mina.easeout);
|
||||
hideTimer = setTimeout(hideEach, 200);
|
||||
i--;
|
||||
if (i < 0) i = 0;
|
||||
}
|
||||
|
||||
setTimeout(function () {
|
||||
logo.attr({
|
||||
display: "block"
|
||||
display: "inline"
|
||||
});
|
||||
animateEach();
|
||||
}, 500);
|
||||
showEach();
|
||||
}, 100);
|
||||
|
||||
logo.hover(hideEach, showEach);
|
||||
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<svg version="1.1" id="snap-logo" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="250px" height="250px" style="display:none">
|
||||
width="250px" height="250px">
|
||||
<defs>
|
||||
<linearGradient id="bottom_1_" gradientUnits="userSpaceOnUse"
|
||||
x1="196" y1="485.6281" x2="196" y2="732.5812"
|
||||
gradientTransform="matrix(1 0 0 1 -71 -486.5)">
|
||||
<stop offset="0" stop-color="#002E3B"/>
|
||||
<stop offset="1" stop-color="#002639"/>
|
||||
<stop offset="0" stop-color="#002E3B"/>
|
||||
<stop offset="1" stop-color="#002639"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="right_2_" cx="146.3819" cy="449.8799"
|
||||
r="408.7811" gradientTransform="matrix(1 0 0 1 -71 -486.5)"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#00BC85"/>
|
||||
<stop offset="1" stop-color="#149D91"/>
|
||||
<stop offset="0" stop-color="#00BC85"/>
|
||||
<stop offset="1" stop-color="#149D91"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="left_1_" cx="139.0562" cy="454.2622"
|
||||
r="507.5908" gradientTransform="matrix(1 0 0 1 -71 -486.5)"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#004473"/>
|
||||
<stop offset="1" stop-color="#00345F"/>
|
||||
<stop offset="0" stop-color="#004473"/>
|
||||
<stop offset="1" stop-color="#00345F"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="top_1_" gradientUnits="userSpaceOnUse"
|
||||
x1="195.922" y1="486.8864" x2="195.922" y2="732.5903"
|
||||
gradientTransform="matrix(1 0 0 1 -71 -486.5)">
|
||||
<stop offset="0" stop-color="#002E3B"/>
|
||||
<stop offset="1" stop-color="#002639"/>
|
||||
<stop offset="0" stop-color="#002E3B"/>
|
||||
<stop offset="1" stop-color="#002639"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<polygon id="bottom" fill="url(#bottom_1_)" stroke="url(#bottom_1_)"
|
||||
points="124.913,210.751 89.063,193.264 89.103,193.245 89.093,193.24
|
||||
51,211.82 124.941,247.884 199,211.9 160.771,192.962 "/>
|
||||
<polygon id="right" fill="url(#right_2_)" stroke="url(#right_2_)"
|
||||
points="198.996,138.632 198.996,38.123 165.596,58.995 165.596,117.758
|
||||
165.596,117.758 165.596,117.758 51.091,174.781 51.091,211.945 "/>
|
||||
<polygon id="left" fill="url(#left_1_)" stroke="url(#left_1_)"
|
||||
points="199,211.912 199,211.912 199,174.746 84.498,117.723 84.498,58.96
|
||||
51.096,38.088 51.096,138.597 "/>
|
||||
<polygon id="top" fill="url(#top_1_)" stroke="url(#top_1_)"
|
||||
points="84.396,58.904 84.396,58.892 124.939,39.118 165.485,58.892
|
||||
198.844,38.046 124.912,1.985 51,38.035 51,38.067 84.368,58.918 "/>
|
||||
</defs>
|
||||
<polygon id="bottom" fill="url(#bottom_1_)" stroke="url(#bottom_1_)"
|
||||
points="124.913,210.751 89.063,193.264 89.103,193.245 89.093,193.24
|
||||
51,211.82 124.941,247.884 199,211.9 160.771,192.962 "/>
|
||||
<polygon id="right" fill="url(#right_2_)" stroke="url(#right_2_)"
|
||||
points="198.996,138.632 198.996,38.123 165.596,58.995 165.596,117.758
|
||||
165.596,117.758 165.596,117.758 51.091,174.781 51.091,211.945 "/>
|
||||
<polygon id="left" fill="url(#left_1_)" stroke="url(#left_1_)"
|
||||
points="199,211.912 199,211.912 199,174.746 84.498,117.723 84.498,58.96
|
||||
51.096,38.088 51.096,138.597 "/>
|
||||
<polygon id="top" fill="url(#top_1_)" stroke="url(#top_1_)"
|
||||
points="84.396,58.904 84.396,58.892 124.939,39.118 165.485,58.892
|
||||
198.844,38.046 124.912,1.985 51,38.035 51,38.067 84.368,58.918 "/>
|
||||
</svg>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
html {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #eee;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
iframe {
|
||||
display: inline-block;
|
||||
border: none;
|
||||
height: 300px;
|
||||
width: 400px;
|
||||
margin: 10px;
|
||||
}
|
||||
Loading…
Reference in New Issue