-
Notifications
You must be signed in to change notification settings - Fork 0
/
svgcircle.html
41 lines (38 loc) · 3.02 KB
/
svgcircle.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
<html>
<head>
<!-- <link href = "styling.css" rel = "stylesheet" type = "text/css"></link> -->
</head>
<body>
<svg class = "button" expanded = "true" height = "100px" width = "100px">
<!-- <circle cx = "50%" cy = "50%" r = "35%" stroke = "#000000" stroke-width = "10%" fill = "none"/> -->
<circle cx = "50%" cy = "50%" r = "45%" fill = "#333A40"/>
<circle class = "innerCircle" cx = "50%" cy = "50%" r = "5%" fill = "#ffffff">
<animate attributeName="r" dur="4s" repeatCount="indefinite" values="3% ; 7%; 3%" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1" />
</circle>
<circle class = "innerCircle" cx = "50%" cy = "35%" r = "5%" fill = "#ffffff">
<animate attributeName="r" dur="4s" repeatCount="indefinite" values="3% ; 7%; 3%" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1" begin="-0.5s" />
</circle>
<circle class = "innerCircle" cx = "50%" cy = "65%" r = "5%" fill = "#ffffff">
<animate attributeName="r" dur="4s" repeatCount="indefinite" values="3% ; 7%; 3%" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1" begin="-1s" />
</circle>
<circle class = "innerCircle" cx = "35%" cy = "50%" r = "5%" fill = "#ffffff">
<animate attributeName="r" dur="4s" repeatCount="indefinite" values="3% ; 7%; 3%" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1" begin="-1.5s" />
</circle>
<circle class = "innerCircle" cx = "35%" cy = "35%" r = "5%" fill = "#ffffff">
<animate attributeName="r" dur="4s" repeatCount="indefinite" values="3% ; 7%; 3%" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1" begin="-2.5s" />
</circle>
<circle class = "innerCircle" cx = "35%" cy = "65%" r = "5%" fill = "#ffffff">
<animate attributeName="r" dur="4s" repeatCount="indefinite" values="3% ; 7%; 3%" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1" begin="-3s" />
</circle>
<circle class = "innerCircle" cx = "65%" cy = "50%" r = "5%" fill = "#ffffff">
<animate attributeName="r" dur="4s" repeatCount="indefinite" values="3% ; 7%; 3%" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1" begin="-3.5s" />
</circle>
<circle class = "innerCircle" cx = "65%" cy = "35%" r = "5%" fill = "#ffffff">
<animate attributeName="r" dur="4s" repeatCount="indefinite" values="3% ; 7%; 3%" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1" begin="-1.5s" />
</circle>
<circle class = "innerCircle" cx = "65%" cy = "65%" r = "5%" fill = "#ffffff">
<animate attributeName="r" dur="4s" repeatCount="indefinite" values="3% ; 7%; 3%" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1" begin="-2s" />
</circle>
</svg>
</body>
</html>