@p3artschool/

dodec-HTML5-SVG-Animation

HTML, CSS, JS

No description

fork
loading
Files
  • index.html
  • script.js
  • style.css
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
<!--  dodecagon-HTML5-SVG-Animation.html   -->
<!--  2019-05-28                          -->
<!--                                      -->
<!--  view HTML result online                   -->
<!--  https://jakearchibald.github.io/svgomg/   -->
<!--                                            -->
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
  <meta charset="utf-8" />
     <title>Dodecagon Animation</title>
  <style></style>
</head>
<svg baseProfile="tiny" height="598" version="1.2" width="598" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink">
  <polygon fill="white" points="0,0 598,0 598,598 0,598" stroke="blue"/>
  <polygon fill="rgb(225, 244, 249)" points="14.0,14.0 584.0,14.0 584.0,584.0 14.0,584.0" stroke="none"/>
  <defs>
    <polyline points="324.7956,275.2706 273.2044,275.2706 228.525,301.0662 228.525,352.6575 254.3207,397.3368 299.0,423.1325 343.6793,397.3368 369.475,352.6575 369.475,301.0662 324.7956,275.2706" stroke-linejoin="bevel" stroke-width="1"/>
    <g id="move">
      <polygon points="395.2706,204.7956 369.475,249.475 324.7956,275.2706 273.2044,275.2706 228.525,249.475 202.7294,204.7956 202.7294,153.2044 228.525,108.525 273.2044,82.7294 324.7956,82.7294 369.475,108.525 395.2706,153.2044" stroke="none"/>
    </g>
    <g id="dode">
      <polygon points="395.2706,204.7956 369.475,249.475 324.7956,275.2706 273.2044,275.2706 228.525,249.475 202.7294,204.7956 202.7294,153.2044 228.525,108.525 273.2044,82.7294 324.7956,82.7294 369.475,108.525 395.2706,153.2044" stroke="none"/>
    </g>
    <g id="star1">
      <polyline fill="none" points="382.3728,227.1353 326.7909,227.1353 299.0,275.2706 271.2091,227.1353 215.6272,227.1353 243.4181,179.0 215.6272,130.8647 271.2091,130.8647 299.0,82.7294 326.7909,130.8647 382.3728,130.8647 354.5819,179.0 382.3728,227.1353" stroke-linejoin="bevel" stroke-width="1"/>
    </g>
    <g id="star3_4">
      <polyline fill="none" points="382.3728,227.1353 326.7909,227.1353 299.0,275.2706 271.2091,227.1353 215.6272,227.1353 243.4181,179.0 215.6272,130.8647 271.2091,130.8647 299.0,82.7294 326.7909,130.8647 382.3728,130.8647 354.5819,179.0 382.3728,227.1353" stroke-linejoin="bevel" stroke-width="1"/>
      <polyline fill="none" points="347.1353,262.3728 299.0,234.5819 250.8647,262.3728 250.8647,206.7909 202.7294,179.0 250.8647,151.2091 250.8647,95.6272 299.0,123.4181 347.1353,95.6272 347.1353,151.2091 395.2706,179.0 347.1353,206.7909 347.1353,262.3728" stroke-linejoin="bevel" stroke-width="1"/>
    </g>
    <g id="star5_6">
      <polyline fill="none" points="382.3728,227.1353 326.7909,227.1353 299.0,275.2706 271.2091,227.1353 215.6272,227.1353 243.4181,179.0 215.6272,130.8647 271.2091,130.8647 299.0,82.7294 326.7909,130.8647 382.3728,130.8647 354.5819,179.0 382.3728,227.1353" stroke-linejoin="bevel" stroke-width="1"/>
      <polyline fill="none" points="347.1353,262.3728 299.0,234.5819 250.8647,262.3728 250.8647,206.7909 202.7294,179.0 250.8647,151.2091 250.8647,95.6272 299.0,123.4181 347.1353,95.6272 347.1353,151.2091 395.2706,179.0 347.1353,206.7909 347.1353,262.3728" stroke-linejoin="bevel" stroke-width="1"/>
    </g>
    <g id="Join">
      <line stroke-width="1" x1="382.3728" x2="439.95" y1="227.1353" y2="326.8619"/>
      <polyline fill="none" points="347.1353,262.3728 347.1453,313.9583 391.8146,339.7597" stroke-width="1"/>
    </g>
    <g id="Tri">
      <polygon points="273.2044,275.2706 228.525,301.0662 228.525,249.475" stroke="none"/>
    </g>
    <g id="HexaGreen">
      <polyline fill="none" points="417.5953,247.471 299.0,315.942 180.4047,247.471 180.4047,110.529 299.0,42.058 417.5953,110.529 417.5953,247.471" stroke-width="1"/>
    </g>
    <g id="Bd">
      <polyline fill="none" points="299.0,275.2706 384.3681,423.1325 299.0,570.9943 213.6319,423.1325 299.0,275.2706" stroke-linejoin="bevel" stroke-width="1"/>
    </g>
    <g id="HexaRed">
      <polyline fill="none" points="391.8047,395.3358 299.0,448.9166 206.1953,395.3358 206.1953,288.1742 299.0,234.5934 391.8047,288.1742 391.8047,395.3358" stroke="red" stroke-width="1"/>
    </g>
    <g id="Nonagon">
      <polyline points="324.7956,275.2706 273.2044,275.2706 228.525,301.0662 228.525,352.6575 254.3207,397.3368 299.0,423.1325 343.6793,397.3368 369.475,352.6575 369.475,301.0662 324.7956,275.2706" stroke-linejoin="bevel" stroke-width="1"/>
    </g>
  </defs>
  <use fill="rgb(255, 237, 174)" x="418.6" xlink:href="#move" y="0">
    <animateTransform attributeName="transform" begin="1.0s" dur="2s" fill="freeze" from="0,0" repeatCount="1" to="-418.59999999999997,0" type="translate"/>
    <animate attributeName="fill" begin="1.0s" dur="2s" from="green" repeatCount="1" to="rgb(255, 237, 174)"/>
  </use>
  <use fill="rgb(255, 237, 174)" x="418.6" xlink:href="#move" y="0">
    <animateTransform attributeName="transform" begin="8.4s" dur="2s" fill="freeze" from="0,0" repeatCount="1" to="-418.59999999999997,0" type="translate"/>
    <animate attributeName="fill" begin="8.4s" dur="2s" from="green" repeatCount="1" to="rgb(255, 237, 174)"/>
  </use>
  <use fill="rgb(255, 237, 174)" x="418.6" xlink:href="#move" y="0">
    <animateTransform attributeName="transform" begin="11.6s" dur="2s" fill="freeze" from="0,0" repeatCount="1" to="-418.59999999999997,0" type="translate"/>
    <animate attributeName="fill" begin="11.6s" dur="2s" from="green" repeatCount="1" to="rgb(255, 237, 174)"/>
  </use>
  <use fill="rgb(255, 237, 174)" visibility="hidden" xlink:href="#dode">
    <set attributeName="visibility" begin="5s" to="visible"/>
    <animateTransform attributeName="transform" begin="10.6s" dur="1s" fill="freeze" from="0,228.52502414174077,301.06623884869504" repeatCount="1" to="180,228.52502414174077,301.06623884869504" type="rotate"/>
    <animate attributeName="fill" begin="10.6s" dur="1s" from="green" repeatCount="1" to="rgb(255, 237, 174)"/>
  </use>
  <use fill="rgb(255, 237, 174)" visibility="hidden" xlink:href="#dode">
    <set attributeName="visibility" begin="5s" to="visible"/>
    <animateTransform attributeName="transform" begin="13.799999999999999s" dur="1s" fill="freeze" from="0,298.99999999999994,341.7549851315934" repeatCount="1" to="120,298.99999999999994,341.7549851315934" type="rotate"/>
    <animate attributeName="fill" begin="13.799999999999999s" dur="1s" from="green" repeatCount="1" to="rgb(255, 237, 174)"/>
  </use>
  <use stroke="black" x="418.6" xlink:href="#star1" y="0">
    <animateTransform attributeName="transform" begin="14.799999999999999s" dur="2s" fill="freeze" from="0,0" repeatCount="1" to="-418.59999999999997,0" type="translate"/>
  </use>
  <use stroke="black" x="418.6" xlink:href="#star1" y="0">
    <animateTransform attributeName="transform" begin="16.799999999999997s" dur="2s" fill="freeze" from="0,0" repeatCount="1" to="-418.59999999999997,0" type="translate"/>
    <animate attributeName="stroke" begin="16.799999999999997s" dur="2s" from="red" repeatCount="1" to="red"/>
  </use>
  <use stroke="black" visibility="hidden" x="0" xlink:href="#star1" y="0">
    <set attributeName="visibility" begin="17s" to="visible"/>
    <animateTransform attributeName="transform" begin="19s" dur="1s" fill="freeze" from="0,299.0,179.0" repeatCount="1" to="30,299.0,179.0" type="rotate"/>
    <animate attributeName="stroke" begin="19s" dur="1s" from="red" repeatCount="1" to="red"/>
  </use>
  <use fill="rgb(255, 202, 228)" x="418.6" xlink:href="#Tri" y="0">
    <animateTransform attributeName="transform" begin="3.0s" dur="2s" fill="freeze" from="0,0" repeatCount="1" to="-418.59999999999997,0" type="translate"/>
    <animate attributeName="fill" begin="3.0s" dur="2s" from="green" repeatCount="1" to="rgb(255, 202, 228)"/>
  </use>
  <use fill="rgb(255, 202, 228)" visibility="hidden" x="0" xlink:href="#Tri" y="0">
    <set attributeName="visibility" begin="5.5s" to="visible"/>
    <animateTransform attributeName="transform" begin="7.4s" dur="1s" fill="freeze" from="0,228.52502414174077,301.06623884869504" repeatCount="1" to="180,228.52502414174077,301.06623884869504" type="rotate"/>
    <animate attributeName="fill" begin="7.4s" dur="1s" from="green" repeatCount="1" to="rgb(255, 202, 228)"/>
  </use>
  <use fill="rgb(255, 202, 228)" x="418.6" xlink:href="#Tri" y="0">
    <animateTransform attributeName="transform" begin="5.0s" dur="2s" fill="freeze" from="0,0" repeatCount="1" to="-418.59999999999997,0" type="translate"/>
    <animate attributeName="fill" begin="5.0s" dur="2s" from="green" repeatCount="1" to="rgb(255, 202, 228)"/>
  </use>
  <use stroke="black" x="418.6" xlink:href="#Join" y="0">
    <animateTransform attributeName="transform" begin="22.0s" dur="2s" fill="freeze" from="0,0" repeatCount="1" to="-418.59999999999997,0" type="translate"/>
    <animate attributeName="stroke" begin="22.0s" dur="2s" from="red" repeatCount="1" to="red"/>
  </use>
  <use stroke="green" x="418.6" xlink:href="#HexaGreen" y="0">
    <animateTransform attributeName="transform" begin="26.5s" dur="2s" fill="freeze" from="0,0" repeatCount="1" to="-418.59999999999997,0" type="translate"/>
    <animate attributeName="stroke" begin="26.5s" dur="2s" from="green" repeatCount="1" to="green"/>
  </use>
  <use stroke="black" visibility="hidden" x="0" xlink:href="#star3_4" y="0">
    <set attributeName="visibility" begin="20.3s" to="visible"/>
    <animateTransform attributeName="transform" begin="20.5s" dur="1s" fill="freeze" from="0,228.52502414174077,301.06623884869504" repeatCount="1" to="180,228.52502414174077,301.06623884869504" type="rotate"/>
    <animate attributeName="stroke" begin="20.5s" dur="1s" from="red" repeatCount="1" to="red"/>
  </use>
  <use stroke="black" visibility="hidden" x="0" xlink:href="#star5_6" y="0">
    <set attributeName="visibility" begin="20.3s" to="visible"/>
    <animateTransform attributeName="transform" begin="21.5s" dur="1s" fill="freeze" from="0,298.99999999999994,341.7549851315934" repeatCount="1" to="120,298.99999999999994,341.7549851315934" type="rotate"/>
    <animate attributeName="stroke" begin="21.5s" dur="1s" from="red" repeatCount="1" to="red"/>
  </use>
  <use stroke="black" visibility="hidden" xlink:href="#Join">
    <set attributeName="visibility" begin="24.2s" to="visible"/>
    <animateTransform attributeName="transform" begin="25.5s" dur="1s" fill="freeze" from="0,298.99999999999994,341.7549851315934" repeatCount="1" to="240,298.99999999999994,341.7549851315934" type="rotate"/>
    <animate attributeName="stroke" begin="25.5s" dur="1s" from="red" repeatCount="1" to="red"/>
  </use>
  <use stroke="black" visibility="hidden" xlink:href="#Join">
    <set attributeName="visibility" begin="24.2s" to="visible"/>
    <animateTransform attributeName="transform" begin="24.5s" dur="1s" fill="freeze" from="0,298.99999999999994,341.7549851315934" repeatCount="1" to="120,298.99999999999994,341.7549851315934" type="rotate"/>
    <animate attributeName="stroke" begin="24.5s" dur="1s" from="red" repeatCount="1" to="red"/>
  </use>
  <use stroke="green" visibility="hidden" xlink:href="#HexaGreen">
    <set attributeName="visibility" begin="28.7s" to="visible"/>
    <animateTransform attributeName="transform" begin="30.1s" dur="1s" fill="freeze" from="0,298.99999999999994,341.7549851315934" repeatCount="1" to="240,298.99999999999994,341.7549851315934" type="rotate"/>
    <animate attributeName="stroke" begin="30.1s" dur="1s" from="red" repeatCount="1" to="red"/>
  </use>
  <use stroke="green" visibility="hidden" xlink:href="#HexaGreen">
    <set attributeName="visibility" begin="28.7s" to="visible"/>
    <animateTransform attributeName="transform" begin="28.8s" dur="1s" fill="freeze" from="0,298.99999999999994,341.7549851315934" repeatCount="1" to="120,298.99999999999994,341.7549851315934" type="rotate"/>
    <animate attributeName="stroke" begin="28.8s" dur="1s" from="red" repeatCount="1" to="red"/>
  </use>
  <use stroke="blue" x="418.6" xlink:href="#Bd" y="0">
    <animateTransform attributeName="transform" begin="31.6s" dur="2s" fill="freeze" from="0,0" repeatCount="1" to="-418.59999999999997,0" type="translate"/>
    <animate attributeName="stroke" begin="31.6s" dur="2s" from="red" repeatCount="1" to="red"/>
  </use>
  <use stroke="blue" visibility="hidden" xlink:href="#Bd">
    <set attributeName="visibility" begin="34.2s" to="visible"/>
    <animateTransform attributeName="transform" begin="36.0s" dur="1s" fill="freeze" from="0,298.99999999999994,341.7549851315934" repeatCount="1" to="240,298.99999999999994,341.7549851315934" type="rotate"/>
    <animate attributeName="stroke" begin="36.0s" dur="1s" from="red" repeatCount="1" to="red"/>
  </use>
  <use stroke="blue" visibility="hidden" xlink:href="#Bd">
    <set attributeName="visibility" begin="34.2s" to="visible"/>
    <animateTransform attributeName="transform" begin="34.5s" dur="1s" fill="freeze" from="0,298.99999999999994,341.7549851315934" repeatCount="1" to="120,298.99999999999994,341.7549851315934" type="rotate"/>
    <animate attributeName="stroke" begin="34.5s" dur="1s" from="red" repeatCount="1" to="red"/>
  </use>
  <use stroke="red" x="418.6" xlink:href="#HexaRed" y="0">
    <animateTransform attributeName="transform" begin="37.5s" dur="2s" fill="freeze" from="0,0" repeatCount="1" to="-418.59999999999997,0" type="translate"/>
    <animate attributeName="stroke" begin="37.5s" dur="2s" from="red" repeatCount="1" to="green"/>
  </use>
  <use fill="rgb(255,99,71)" fill-opacity="0.5" stroke="black" x="418.6" xlink:href="#Nonagon" y="0">
    <animateTransform attributeName="transform" begin="39.8s" dur="2s" fill="freeze" from="0,0" repeatCount="1" to="-418.59999999999997,0" type="translate"/>
    <animate attributeName="fill" begin="39.8s" dur="2s" from="green" repeatCount="1" to="green"/>
    <animate attributeName="fill-opacity" begin="39.8s" dur="2s" from="1.0" repeatCount="1" to="0.5"/>
  </use>
</svg>
result
console