-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
173 lines (162 loc) · 11 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Mua Logo</title>
<meta property="og:site_name" content="Mua">
<meta property="og:url" content="http://www.visualrevolt.net/wp-content/uploads/2012/07/vv.gif">
<meta property="og:title" content="Mua simple animation tool">
<meta property="og:type" content="video.other">
<meta property="og:image" content="http://www.visualrevolt.net/wp-content/uploads/2012/07/vv.gif">
<meta property="og:image:width" content="500">
<meta property="og:image:height"content="500">
<style>
body {
font-family: "Helvetica Neue",Helvetica,sans-serif;
}
svg {
background-color: hsla(31, 10%, 80%, 0.1);
}
polyline, .animation-path {
fill: transparent;
stroke-width: 1;
stroke: black;
}
.animation-path {
stroke: darkred;
}
.legend {
position: fixed;
top: 1em;
right: 1em;
/*pointer-events: none;*/
}
.legend__list {
margin: 0;
padding: 0;
list-style: none;
}
.legend__ctrl, .legend__key {
position: relative;
display: inline-block;
margin: 0 .1em;
padding: .1em .6em;
background-color: #e1e3e5;
border: 1px solid #adb3b9;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(12,13,14,0.2), 0 0 0 2px #FFF inset;
font-family: "Helvetica Neue",Helvetica,sans-serif;
font-size: 11px;
line-height: 1.4;
color: #242729;
text-shadow: 0 1px 0 #FFF;
white-space: nowrap;
}
.legend__ctrl {
margin-right: 1em;
}
.legend__ctrl::after {
position: absolute;
top: 0;
right: -.9em;
content: ' +';
}
</style>
<script src="js/lib/svg.min.js" defer></script>
<script src="js/lib/svg.draw.js" defer></script>
<script src="js/lib/svg.topath.js" defer></script>
<script src="js/commands.js" defer></script>
<script src="js/app.js" defer></script>
</head>
<body>
<svg version="1.1" id="mua_logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<g>
<path id="outline" fill="#31BFC6" d="M308.222,261.424c0.252,2.055,0.381,4.135,0.777,6.162c2.641,13.521,13.862,24.178,28.487,25.311
c9.746,0.755,18.184-2.495,25.144-9.484c12.586-12.636,25.22-25.224,37.824-37.841c5.74-5.745,12.75-7.966,20.603-6.587
c11.64,2.043,19.634,12.629,18.588,24.659c-1.041,11.967-12.637,23.135-27.589,20.03c-4.604-0.955-8.44-3.28-11.742-6.559
c-2.725-2.704-5.401-5.457-8.16-8.126c-2.227-2.153-5.462-1.752-6.949,0.774c-0.983,1.67-0.662,3.894,0.886,5.468
c2.748,2.794,5.509,5.576,8.315,8.311c7.562,7.367,16.544,10.468,27.079,9.087c16.537-2.167,28.891-17.846,26.851-34.697
c-0.859-7.1-3.672-13.201-8.519-18.343c-12.062-12.797-32.659-13.04-45.114-0.599c-12.788,12.773-25.562,25.561-38.345,38.339
c-5.602,5.599-12.418,7.702-20.151,6.592c-8.837-1.269-16.214-8.25-18.412-17.066c-2.191-8.788,1.162-18.138,8.401-23.653
c8.712-6.638,21.807-6.067,29.821,1.965c2.882,2.887,5.772,5.765,8.649,8.655c1.061,1.065,2.293,1.735,3.822,1.509
c1.79-0.266,3.131-1.221,3.698-2.991c0.528-1.651,0.177-3.159-1.068-4.408c-2.936-2.945-5.853-5.91-8.825-8.818
c-7.443-7.285-16.333-10.185-26.681-8.928C321.041,231.955,308.352,244.829,308.222,261.424z M102.739,240.12
c-0.795-0.772-1.57-1.564-2.389-2.309c-0.885-0.804-1.741-1.667-2.73-2.323c-9.149-6.061-18.957-6.646-29.058-3.031
c-7.303,2.613-12.172,7.853-14.316,15.324c-0.782,2.724-1.136,5.651-1.175,8.492c-0.137,10.076-0.054,20.156-0.052,30.234
c0,0.639-0.024,1.284,0.047,1.917c0.227,2.012,1.67,3.68,3.508,4.115c2.183,0.517,4.347-0.264,5.357-2.205
c0.488-0.938,0.714-2.115,0.72-3.186c0.053-9.758,0.002-19.517,0.056-29.274c0.01-1.904,0.16-3.846,0.556-5.704
c1.351-6.341,5.093-10.518,11.48-12.143c4.289-1.091,8.528-0.907,12.706,0.542c4.903,1.701,8.057,5.118,9.383,10.076
c0.591,2.21,0.927,4.552,0.951,6.838c0.102,9.677,0.043,19.355,0.044,29.034c0,0.64-0.045,1.286,0.032,1.918
c0.248,2.042,1.915,3.841,3.784,4.146c2.353,0.385,4.509-0.593,5.366-2.66c0.381-0.917,0.458-2.012,0.461-3.026
c0.033-9.358-0.001-18.717,0.037-28.075c0.008-1.908,0.13-3.831,0.391-5.721c0.926-6.711,5.349-11.617,11.92-13.13
c2.875-0.662,5.782-0.776,8.771-0.332c8.714,1.296,13.204,7.304,13.847,14.753c0.26,3.017,0.31,6.057,0.326,9.087
c0.042,8.079,0.002,16.157,0.023,24.236c0.007,2.617,1.692,4.634,3.975,4.883c2.882,0.315,4.742-0.991,5.396-3.872
c0.191-0.844,0.271-1.731,0.273-2.599c0.022-6.479,0.05-12.958-0.001-19.437c-0.035-4.393-0.03-8.795-0.335-13.173
c-0.587-8.433-4.299-15.091-11.742-19.417C130.411,228.323,112.416,228.2,102.739,240.12z M220.769,253.11
c0-5.676-0.081-11.354,0.038-17.028c0.052-2.489-2.029-4.617-4.384-4.846c-2.301-0.224-4.53,1.399-5.106,3.814
c-0.2,0.839-0.201,1.739-0.202,2.611c-0.013,9.993,0.083,19.988-0.037,29.979c-0.096,7.952-3.893,14.034-11.432,16.044
c-2.123,0.566-4.405,0.749-6.613,0.74c-10.294-0.038-16.542-6.403-16.866-16.272c-0.241-7.348-0.132-14.706-0.169-22.06
c-0.017-3.358-0.008-6.716-0.018-10.073c-0.006-2.051-0.993-3.492-2.834-4.318c-1.765-0.792-3.46-0.513-4.956,0.661
c-1.354,1.063-1.752,2.534-1.746,4.243c0.041,10.394-0.001,20.787,0.042,31.18c0.007,1.824,0.144,3.673,0.462,5.467
c1.391,7.824,5.568,13.689,12.723,17.226c6.84,3.381,14.057,3.879,21.456,2.276c4.614-1,8.772-2.96,12.212-6.223
c4.955-4.698,7.265-10.607,7.408-17.353C220.861,263.825,220.771,258.467,220.769,253.11z M211.002,214.7
c0.308-3.047-2.535-6.598-6.456-6.561c-3.602,0.034-6.588,3.003-6.544,6.559c0.043,3.513,2.896,6.351,6.423,6.387
C208.188,221.124,210.975,218.418,211.002,214.7z M182.793,221.084c3.667-0.018,6.496-2.913,6.422-6.572
c-0.072-3.558-2.883-6.343-6.43-6.368c-3.586-0.025-6.598,2.937-6.599,6.492C176.186,218.201,179.159,221.103,182.793,221.084z"/>
<path id="infinity" fill-rule="evenodd" clip-rule="evenodd" fill="#31BFC6" d="M308.222,261.424c0.13-16.595,12.819-29.469,27.391-31.239
c10.348-1.257,19.237,1.643,26.681,8.928c2.973,2.909,5.89,5.874,8.825,8.818c1.245,1.249,1.597,2.756,1.068,4.408
c-0.567,1.771-1.908,2.726-3.698,2.991c-1.529,0.227-2.762-0.443-3.822-1.509c-2.877-2.891-5.768-5.768-8.649-8.655
c-8.015-8.032-21.109-8.603-29.821-1.965c-7.239,5.516-10.593,14.865-8.401,23.653c2.198,8.816,9.575,15.798,18.412,17.066
c7.733,1.11,14.55-0.993,20.151-6.592c12.783-12.778,25.557-25.565,38.345-38.339c12.455-12.441,33.052-12.198,45.114,0.599
c4.847,5.142,7.659,11.243,8.519,18.343c2.04,16.852-10.313,32.53-26.851,34.697c-10.535,1.381-19.517-1.72-27.079-9.087
c-2.807-2.734-5.567-5.517-8.315-8.311c-1.548-1.574-1.869-3.798-0.886-5.468c1.487-2.526,4.723-2.928,6.949-0.774
c2.759,2.669,5.436,5.422,8.16,8.126c3.302,3.278,7.139,5.604,11.742,6.559c14.952,3.104,26.548-8.063,27.589-20.03
c1.046-12.03-6.948-22.616-18.588-24.659c-7.853-1.379-14.862,0.842-20.603,6.587c-12.604,12.617-25.238,25.205-37.824,37.841
c-6.96,6.989-15.397,10.239-25.144,9.484c-14.625-1.133-25.847-11.789-28.487-25.311
C308.603,265.559,308.474,263.479,308.222,261.424z"/>
<path id="m" fill-rule="evenodd" clip-rule="evenodd" fill="#31BFC6" d="M102.739,240.12c9.677-11.92,27.672-11.797,37.614-6.019
c7.443,4.326,11.155,10.984,11.742,19.417c0.305,4.378,0.3,8.78,0.335,13.173c0.051,6.479,0.023,12.957,0.001,19.437
c-0.003,0.867-0.082,1.755-0.273,2.599c-0.654,2.881-2.514,4.188-5.396,3.872c-2.283-0.249-3.968-2.266-3.975-4.883
c-0.021-8.079,0.02-16.157-0.023-24.236c-0.016-3.03-0.065-6.07-0.326-9.087c-0.643-7.449-5.133-13.457-13.847-14.753
c-2.989-0.444-5.896-0.33-8.771,0.332c-6.571,1.513-10.994,6.419-11.92,13.13c-0.261,1.89-0.383,3.812-0.391,5.721
c-0.039,9.358-0.004,18.717-0.037,28.075c-0.003,1.015-0.081,2.109-0.461,3.026c-0.857,2.067-3.014,3.045-5.366,2.66
c-1.869-0.306-3.536-2.104-3.784-4.146c-0.077-0.632-0.032-1.278-0.032-1.918c-0.001-9.679,0.058-19.357-0.044-29.034
c-0.024-2.286-0.36-4.628-0.951-6.838c-1.326-4.958-4.48-8.375-9.383-10.076c-4.178-1.449-8.417-1.633-12.706-0.542
c-6.388,1.625-10.13,5.801-11.48,12.143c-0.396,1.858-0.545,3.8-0.556,5.704c-0.054,9.758-0.003,19.517-0.056,29.274
c-0.006,1.07-0.231,2.248-0.72,3.186c-1.011,1.941-3.175,2.722-5.357,2.205c-1.838-0.436-3.281-2.104-3.508-4.115
c-0.071-0.633-0.046-1.278-0.047-1.917c-0.002-10.078-0.085-20.158,0.052-30.234c0.039-2.841,0.393-5.769,1.175-8.492
c2.144-7.472,7.013-12.711,14.316-15.324c10.101-3.615,19.909-3.029,29.058,3.031c0.989,0.655,1.845,1.519,2.73,2.323
C101.169,238.555,101.944,239.348,102.739,240.12z"/>
<path id="u" fill-rule="evenodd" clip-rule="evenodd" fill="#31BFC6" d="M220.77,253.11c0,5.356,0.091,10.715-0.022,16.069
c-0.144,6.745-2.454,12.654-7.408,17.353c-3.44,3.263-7.599,5.223-12.212,6.223c-7.399,1.603-14.616,1.104-21.456-2.276
c-7.155-3.536-11.332-9.401-12.723-17.226c-0.319-1.794-0.455-3.643-0.462-5.467c-0.043-10.393-0.001-20.786-0.042-31.18
c-0.006-1.709,0.392-3.18,1.746-4.243c1.495-1.174,3.19-1.453,4.956-0.661c1.841,0.826,2.828,2.267,2.834,4.318
c0.01,3.357,0.001,6.715,0.018,10.073c0.038,7.354-0.072,14.712,0.169,22.06c0.324,9.869,6.571,16.234,16.866,16.272
c2.208,0.009,4.491-0.174,6.613-0.74c7.539-2.01,11.336-8.092,11.432-16.044c0.12-9.991,0.024-19.986,0.037-29.979
c0.001-0.872,0.001-1.771,0.202-2.611c0.576-2.416,2.805-4.038,5.106-3.814c2.355,0.229,4.436,2.356,4.384,4.846
C220.688,241.756,220.769,247.435,220.77,253.11z"/>
<path id="dot_right" fill-rule="evenodd" clip-rule="evenodd" fill="#31BFC6" d="M211.002,214.7c-0.027,3.719-2.813,6.424-6.577,6.384
c-3.527-0.036-6.38-2.874-6.423-6.387c-0.044-3.556,2.942-6.524,6.544-6.559C208.467,208.102,211.31,211.652,211.002,214.7z"/>
<path id="dot_left" fill-rule="evenodd" clip-rule="evenodd" fill="#31BFC6" d="M182.793,221.084c-3.634,0.019-6.607-2.883-6.606-6.448
c0.001-3.555,3.012-6.517,6.599-6.492c3.546,0.025,6.358,2.81,6.43,6.368C189.29,218.171,186.461,221.066,182.793,221.084z"/>
<path id="a" fill-rule="evenodd" clip-rule="evenodd" fill="#31BFC6" d="M294.64,235.18c-0.275-2.707-2.349-4.771-4.788-4.794
c-2.584-0.024-4.701,2.064-4.904,4.903c-0.071,0.998-0.011,2.005-0.011,3.621c-7.097-6.262-14.905-9.129-23.717-8.472
c-8.924,0.665-16.399,4.547-22.076,11.534c-9.594,11.809-9.16,28.684,0.877,40.304c8.745,10.124,27.976,16.262,44.802,2.387
c0.071,1.487,0.059,2.691,0.2,3.877c0.294,2.444,2.317,4.264,4.694,4.315c2.229,0.049,4.324-1.636,4.786-3.948
c0.171-0.853,0.182-1.748,0.183-2.624c0.01-16.476,0.008-32.95,0.005-49.426C294.69,236.298,294.696,235.735,294.64,235.18z
M263.023,284.013c-11.543-0.23-22.093-9.393-22.03-22.521c0.066-13.77,11.571-22.617,22.47-22.297
c12.564-0.173,22.498,10.523,22.405,22.617C285.776,273.652,275.718,284.267,263.023,284.013z"/>
</g>
</svg>
<fieldset class="legend">
<legend>Keybindings</legend>
<ul class="legend__list">
<template id="legend__item" class="legend__item">
<li><kbd class="legend__ctrl"></kbd><kbd class="legend__key"></kbd>: <span class="legend__description"></span></li>
</template>
</ul>
</fieldset>
</body>
</html>