@p3artschool/

11-Dodecagon-No-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
<!--  11-Dodecagon.html   -->
<!--  2019-05-13          -->
<!--                      -->
<!--  view HTML result online                   -->
<!--  https://jakearchibald.github.io/svgomg/   -->
<!--                                            -->
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
  <meta charset="utf-8" />
     <title>Dodecagon</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>
    <g id="dode">
      <polygon fill="rgb(255, 237, 174)" 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"/>
      <polygon fill="rgb(255, 237, 174)" points="61.7794,397.3368 87.5751,352.6575 132.2544,326.8619 183.8457,326.8619 228.525,352.6575 254.3207,397.3368 254.3207,448.9281 228.525,493.6075 183.8457,519.4031 132.2544,519.4031 87.5751,493.6075 61.7794,448.9281" stroke="none"/>
      <polygon fill="rgb(255, 237, 174)" points="465.7456,519.4031 414.1543,519.4031 369.475,493.6075 343.6793,448.9281 343.6793,397.3368 369.475,352.6575 414.1543,326.8619 465.7456,326.8619 510.4249,352.6575 536.2206,397.3368 536.2206,448.9281 510.4249,493.6075" stroke="none"/>
    </g>
    <g id="star">
      <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="black" 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="black" stroke-linejoin="bevel" stroke-width="1"/>
      <polyline fill="none" points="74.6773,374.9972 130.2591,374.9972 158.05,326.8619 185.841,374.9972 241.4228,374.9972 213.6319,423.1325 241.4228,471.2678 185.841,471.2678 158.05,519.4031 130.2591,471.2678 74.6773,471.2678 102.4682,423.1325 74.6773,374.9972" stroke="black" stroke-linejoin="bevel" stroke-width="1"/>
      <polyline fill="none" points="109.9147,339.7597 158.05,367.5506 206.1854,339.7597 206.1854,395.3415 254.3207,423.1325 206.1854,450.9234 206.1854,506.5053 158.05,478.7143 109.9147,506.5053 109.9147,450.9234 61.7794,423.1325 109.9147,395.3415 109.9147,339.7597" stroke="black" stroke-linejoin="bevel" stroke-width="1"/>
      <polyline fill="none" points="439.95,519.4031 412.159,471.2678 356.5772,471.2678 384.3681,423.1325 356.5772,374.9972 412.159,374.9972 439.95,326.8619 467.7409,374.9972 523.3227,374.9972 495.5318,423.1325 523.3227,471.2678 467.7409,471.2678 439.95,519.4031" stroke="black" stroke-linejoin="bevel" stroke-width="1"/>
      <polyline fill="none" points="391.8146,506.5053 391.8146,450.9234 343.6793,423.1325 391.8146,395.3415 391.8146,339.7597 439.95,367.5506 488.0853,339.7597 488.0853,395.3415 536.2206,423.1325 488.0853,450.9234 488.0853,506.5053 439.95,478.7143 391.8146,506.5053" stroke="black" stroke-linejoin="bevel" stroke-width="1"/>
    </g>
    <g id="join">
      <line stroke="black" stroke-width="1" x1="382.3728" x2="439.95" y1="227.1353" y2="326.8619"/>
      <line stroke="black" stroke-width="1" x1="356.5772" x2="241.4228" y1="471.2678" y2="471.2678"/>
      <line stroke="black" stroke-width="1" x1="158.05" x2="215.6272" y1="326.8619" y2="227.1353"/>
      <polyline fill="none" points="347.1353,262.3728 347.1453,313.9583 391.8146,339.7597" stroke="black" stroke-width="1"/>
      <polyline fill="none" points="343.6793,423.1325 299.0,397.3484 254.3207,423.1325" stroke="black" stroke-width="1"/>
      <polyline fill="none" points="206.1854,339.7597 250.8547,313.9583 250.8647,262.3728" stroke="black" stroke-width="1"/>
    </g>
    <g id="Tri">
      <polygon fill="rgb(255, 202, 228)" points="273.2044,275.2706 228.525,301.0662 228.525,249.475" stroke="none"/>
      <polygon fill="rgb(255, 202, 228)" points="183.8457,326.8619 228.525,301.0662 228.525,352.6575" stroke="none"/>
      <polygon fill="rgb(255, 202, 228)" points="343.6793,448.9281 299.0,423.1325 343.6793,397.3368" stroke="none"/>
      <polygon fill="rgb(255, 202, 228)" points="254.3207,397.3368 299.0,423.1325 254.3207,448.9281" stroke="none"/>
      <polygon fill="rgb(255, 202, 228)" points="369.475,352.6575 369.475,301.0662 414.1543,326.8619" stroke="none"/>
      <polygon fill="rgb(255, 202, 228)" points="369.475,249.475 369.475,301.0662 324.7956,275.2706" stroke="none"/>
      <polygon fill="rgb(255, 202, 228)" points="202.7294,204.7956 158.05,179.0 202.7294,153.2044" stroke="none"/>
      <polygon fill="rgb(255, 202, 228)" points="395.2706,153.2044 439.95,179.0 395.2706,204.7956" stroke="none"/>
      <line stroke="green" stroke-width="1" x1="250.8647" x2="228.525" y1="288.1684" y2="275.2706"/>
    </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="blue" stroke-linejoin="bevel" stroke-width="1"/>
      <polyline fill="none" points="356.5772,374.9972 185.841,374.9972 100.4729,227.1353 271.2091,227.1353 356.5772,374.9972" stroke="blue" stroke-linejoin="bevel" stroke-width="1"/>
      <polyline fill="none" points="241.4228,374.9972 326.7909,227.1353 497.5271,227.1353 412.159,374.9972 241.4228,374.9972" stroke="blue" stroke-linejoin="bevel" stroke-width="1"/>
    </g>
    <g id="hexa">
      <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="green" stroke-width="1"/>
      <polyline fill="none" points="321.3547,491.6035 321.3547,354.6615 439.95,286.1905 558.5452,354.6615 558.5452,491.6035 439.95,560.0745 321.3547,491.6035" stroke="green" stroke-width="1"/>
      <polyline fill="none" points="158.05,286.1905 276.6453,354.6615 276.6453,491.6035 158.05,560.0745 39.4548,491.6035 39.4548,354.6615 158.05,286.1905" stroke="green" stroke-width="1"/>
      <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>
  </defs>
  <use xlink:href="#dode"/>
  <use xlink:href="#star"/>
  <use xlink:href="#Tri"/>
  <use xlink:href="#Bd"/>
  <use xlink:href="#join"/>
  <use xlink:href="#hexa"/>
</svg>
result
console