JSDM

HTML

​x
 
1
<svg viewBox="0 0 20 20" id="surface">
2
  <g id="circle">
3
    <path class="north">
4
      <animate
5
        attributeName="d"
6
        dur="3"
7
        keyTimes="0;0.1;0.4;0.6;0.9;1"
8
        repeatCount="indefinite"
9
        values="
10
        M 10 10
11
        q 0.3536 -0.3536 0.7071 -0.7071
12
        q -0.3 -0.2929 -0.7071 -0.2929
13
        q -0.4 0 -0.7071 0.2929
14
        q 0.3536 0.3536 0.7071 0.7071;
15
​
16
        M 10 10
17
        q 0.3536 -0.3536 0.7071 -0.7071
18
        q -0.3 -0.2929 -0.7071 -0.2929
19
        q -0.4 0 -0.7071 0.2929
20
        q 0.3536 0.3536 0.7071 0.7071;
21
​
22
        M 10 8.75
23
        q 0.4 0 0.7071 -0.2929
24
        q -0.3536 -0.3536 -0.7071 -0.7071
25
        q -0.3536 0.3536 -0.7071 0.7071
26
        q 0.3 0.2929 0.7071 0.2929;
27
​
28
        M 10 8.75
29
        q 0.4 0 0.7071 -0.2929
30
        q -0.3536 -0.3536 -0.7071 -0.7071
31
        q -0.3536 0.3536 -0.7071 0.7071
32
        q 0.3 0.2929 0.7071 0.2929;
33
​
34
        M 10 10
35
        q 0.3536 -0.3536 0.7071 -0.7071
36
        q -0.3 -0.2929 -0.7071 -0.2929
37
        q -0.4 0 -0.7071 0.2929
38
        q 0.3536 0.3536 0.7071 0.7071;
39
​
40
        M 10 10
41
        q 0.3536 -0.3536 0.7071 -0.7071
42
        q -0.3 -0.2929 -0.7071 -0.2929
43
        q -0.4 0 -0.7071 0.2929
44
        q 0.3536 0.3536 0.7071 0.7071
45
       ">
46
    </path>
47
    <path class="east">
48
      <animate
49
        attributeName="d"
50
        dur="3"
51
        keyTimes="0;0.1;0.4;0.6;0.9;1"
52
        repeatCount="indefinite"
53
        values="
54
        M 10 10
55
        q 0.3536 -0.3536 0.7071 -0.7071
56
        q 0.2929 0.3 0.2929 0.7071
57
        q 0 0.4 -0.2929 0.7071
58
        q -0.3536 -0.3536 -0.7071 -0.7071;
59
​
60
        M 10 10
61
        q 0.3536 -0.3536 0.7071 -0.7071
62
        q 0.2929 0.3 0.2929 0.7071
63
        q 0 0.4 -0.2929 0.7071
64
        q -0.3536 -0.3536 -0.7071 -0.7071;
65
​
66
        M 11.25 10
67
        q 0 -0.4 0.2929 -0.7071
68
        q 0.3536 0.3536 0.7071 0.7071
69
        q -0.3536 0.3536 -0.7071 0.7071
70
        q -0.2929 -0.3 -0.2929 -0.7071;
71
​
72
        M 11.25 10
73
        q 0 -0.4 0.2929 -0.7071
74
        q 0.3536 0.3536 0.7071 0.7071
75
        q -0.3536 0.3536 -0.7071 0.7071
76
        q -0.2929 -0.3 -0.2929 -0.7071;
77
​
78
        M 10 10
79
        q 0.3536 -0.3536 0.7071 -0.7071
80
        q 0.2929 0.3 0.2929 0.7071
81
        q 0 0.4 -0.2929 0.7071
82
        q -0.3536 -0.3536 -0.7071 -0.7071;
83
​
84
        M 10 10
85
        q 0.3536 -0.3536 0.7071 -0.7071
86
        q 0.2929 0.3 0.2929 0.7071
87
        q 0 0.4 -0.2929 0.7071
88
        q -0.3536 -0.3536 -0.7071 -0.7071
89
       ">
90
    </path>
91
    <path class="south">
92
      <animate
93
        attributeName="d"
94
        dur="3"
95
        keyTimes="0;0.1;0.4;0.6;0.9;1"
96
        repeatCount="indefinite"
97
        values="
98
        M 10 10
99
        q -0.3536 0.3536 -0.7071 0.7071
100
        q 0.3 0.2929 0.7071 0.2929
101
        q 0.4 0 0.7071 -0.2929
102
        q -0.3536 -0.3536 -0.7071 -0.7071;
103
​
104
        M 10 10
105
        q -0.3536 0.3536 -0.7071 0.7071
106
        q 0.3 0.2929 0.7071 0.2929
107
        q 0.4 0 0.7071 -0.2929
108
        q -0.3536 -0.3536 -0.7071 -0.7071;
109
​
110
        M 10 11.25
111
        q -0.4 0 -0.7071 0.2929
112
        q 0.3536 0.3536 0.7071 0.7071
113
        q 0.3536 -0.3536 0.7071 -0.7071
114
        q -0.3 -0.2929 -0.7071 -0.2929;
115
​
116
        M 10 11.25
117
        q -0.4 0 -0.7071 0.2929
118
        q 0.3536 0.3536 0.7071 0.7071
119
        q 0.3536 -0.3536 0.7071 -0.7071
120
        q -0.3 -0.2929 -0.7071 -0.2929;
121
​
122
        M 10 10
123
        q -0.3536 0.3536 -0.7071 0.7071
124
        q 0.3 0.2929 0.7071 0.2929
125
        q 0.4 0 0.7071 -0.2929
126
        q -0.3536 -0.3536 -0.7071 -0.7071;
127
​
128
        M 10 10
129
        q -0.3536 0.3536 -0.7071 0.7071
130
        q 0.3 0.2929 0.7071 0.2929
131
        q 0.4 0 0.7071 -0.2929
132
        q -0.3536 -0.3536 -0.7071 -0.7071
133
      ">
134
    </path>
135
    <path class="west">
136
      <animate
137
        attributeName="d"
138
        dur="3"
139
        keyTimes="0;0.1;0.4;0.6;0.9;1"
140
        repeatCount="indefinite"
141
        values="
142
        M 10 10
143
        q -0.3536 0.3536 -0.7071 0.7071
144
        q -0.2929 -0.3 -0.2929 -0.7071
145
        q 0 -0.4 0.2929 -0.7071
146
        q 0.3536 0.3536 0.7071 0.7071;
147
​
148
        M 10 10
149
        q -0.3536 0.3536 -0.7071 0.7071
150
        q -0.2929 -0.3 -0.2929 -0.7071
151
        q 0 -0.4 0.2929 -0.7071
152
        q 0.3536 0.3536 0.7071 0.7071;
153
​
154
        M 8.75 10
155
        q 0 0.4 -0.2929 0.7071
156
        q -0.3536 -0.3536 -0.7071 -0.7071
157
        q 0.3536 -0.3536 0.7071 -0.7071
158
        q 0.2929 0.3 0.2929 0.7071;
159
​
160
        M 8.75 10
161
        q 0 0.4 -0.2929 0.7071
162
        q -0.3536 -0.3536 -0.7071 -0.7071
163
        q 0.3536 -0.3536 0.7071 -0.7071
164
        q 0.2929 0.3 0.2929 0.7071;
165
​
166
        M 10 10
167
        q -0.3536 0.3536 -0.7071 0.7071
168
        q -0.2929 -0.3 -0.2929 -0.7071
169
        q 0 -0.4 0.2929 -0.7071
170
        q 0.3536 0.3536 0.7071 0.7071;
171
​
172
        M 10 10
173
        q -0.3536 0.3536 -0.7071 0.7071
174
        q -0.2929 -0.3 -0.2929 -0.7071
175
        q 0 -0.4 0.2929 -0.7071
176
        q 0.3536 0.3536 0.7071 0.7071
177
      ">
178
    </path>
179
   </g>
180
</svg>
181
182
<p>a re-creation of this amazing <a href="http://beesandbombs.tumblr.com/post/101579804084/quarters">Bees and Bombs gif</a></p>
183
<small><p>2 the haters: this is just for fun, won't work in IE because SMIL isn't supported there</p></small>

CSS

xxxxxxxxxx
13
 
1
svg {
2
  width: 500px;
3
  height: 500px;
4
}
5
​
6
body {
7
  padding: 20px;
8
  text-align: center;
9
}
10
​
11
a {
12
  color: #000;
13
}
?   ?  
?   ?  
必须是有效的URL
+ 添加另一个资源

JS

xxxxxxxxxx
73
 
1
var originRe = /M(\s*)[0-9.]*[\s,][0-9.]*/;
2
var surface = document.getElementById('surface');
3
var circle = document.getElementById('circle');
4
var waveOffset = 0.1;
5
var gridScale = 2.25;
6
var numRings = 5;
7
​
8
​
9
/* generate diagonal grid points in n concentric rings */
10
function makeGrid(n){
11
12
  //make an array of n empty arrays
13
  var coords = [];
14
  while(coords.push([]) <= n);
15
16
  for (var x = -n; x <= n; x++){
17
    for (var y = -n; y <=n; y++){
18
      if ((x + y)%2 === 0){
19
        var ringIndex = (Math.abs(x) + Math.abs(y))/2;
20
        coords[ringIndex].push([x*gridScale,y*gridScale]);
21
      }
22
    }
23
  }
24
25
  return coords;
26
}
27
​
28
/* takes seimclon separated path list, amount to translate in x and y
29
 returns the same list with the M coordiates translated by a certain amount */
30
function translatePaths(paths, dx, dy){
31
  return paths.split(';').map(function(path){
32
     var origin = originRe.exec(path)[0].split(" ");
33
     origin[1] = Number(origin[1]) + dx;
34
     origin[2] = Number(origin[2]) + dy;
35
​
36
     return path.replace(originRe, origin.join(" "));    
37
  }).join(";");
38
}
39
​
40
/* take a circle elem and clone it but placed at a new location and with an animation start offset */
41
function cloneCircle(circle, dx, dy, animOffset){
42
  var clone = circle.cloneNode(true);
43
  var quads = clone.childNodes;
44
  for (var i=0; i < quads.length; i++){
45
    /* eliminate text only nodes, because .children ain't working on mobile
46
    and .childNodes gets all sorts of garbage */
47
    if (quads[i].nodeType === 1){
48
      var paths = quads[i].childNodes[1].getAttribute('values');
49
      quads[i].childNodes[1].setAttribute('values', translatePaths(paths, dx, dy));
50
      quads[i].childNodes[1].setAttribute('begin', animOffset);
51
    }
52
  }
53
​
54
​
55
  surface.appendChild(clone);
56
}
57
​
58
//make a grid
59
var gridCoords = makeGrid(numRings);
60
​
61
//then generate the waaaves:
62
//start at 1. 0 is trivial, it's the original circle
63
for (var i = 1; i < gridCoords.length; i++){
64
  gridCoords[i].forEach(function(pos){
65
    cloneCircle(circle, pos[0], pos[1], waveOffset*i );
66
  });
67
}
68
​
69
70
71
​
72
​
73
​
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................