5+ JavaScript Periodic Table Examples

This post contains a total of 5+ Hand-Picked JavaScript Periodic Table Examples with Source Code. All these Periodic Tables are made using JavaScript and Styled using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

Click a Code to Copy it.

JavaScript periodic table examples

1. By Dylan

Made by Dylan. Periodic Table made using flexbox and JavaScript, its also interactive. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

<style>
@import url(https://fonts.googleapis.com/css?family=Muli);
*,
*:before,
*:after {
  box-sizing: border-box;
  color: #071108;
}

body {
  background-color: #F2EFE9;
  font-family: "Muli", sans-serif;
}

.top {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.title {
  display: none;
}

.group-label {
  display: none;
  transition: 75ms ease-out;
}

.full-table {
  margin: 0 auto 20vh;
  width: 100vw;
  position: relative;
}

.main-table {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding: 2vw;
}

.group {
  display: flex;
  flex-direction: column;
}

.element, .holder {
  display: flex;
  justify-content: center;
  position: relative;
  width: 5vw;
  height: 5vw;
  margin: 1px;
  border-radius: 2px;
  transition: 0.2s linear;
}

.number {
  position: absolute;
  top: 8%;
  right: 8%;
  font-size: 1.2vw;
  transition: inherit;
}

.symbol {
  position: absolute;
  bottom: 8%;
  left: 8%;
  font-size: 2.1vw;
  transition: inherit;
}

.name {
  display: flex;
  align-self: flex-end;
  margin-bottom: 8%;
  font-size: 1.4vw;
  transition: 250ms linear;
  opacity: 0;
}

.element__expanded {
  height: calc(5vw * 1.97);
  width: calc(5vw * 1.97);
}
.element__expanded .number {
  font-size: 1.7vw;
}
.element__expanded .symbol {
  left: 8%;
  bottom: 26%;
  font-size: 3.2vw;
}
.element__expanded .name {
  opacity: 1;
}

.holder {
  border: 2px dotted #ccc;
}

.f-block {
  position: absolute;
  display: flex;
  flex-direction: column;
  padding-left: calc((2 * 5vw) + 2vw + 6px);
}

.series {
  display: flex;
  flex-direction: row;
}

@media (min-width: 761px) {
  .group-label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 6vw;
    width: 42%;
    font-size: 3.5vw;
    border-radius: 3vw;
  }

  .title {
    display: inline;
    font-size: 6vw;
    margin: 3vh 0 2vh;
    color: #071108;
  }

  .element:hover, .holder:hover {
    transition-delay: 30ms;
    cursor: pointer;
    height: calc(5vw * 1.97);
    width: calc(5vw * 1.97);
  }
  .element:hover .symbol, .holder:hover .symbol {
    font-size: 3.2vw;
    bottom: 26%;
  }
  .element:hover .number, .holder:hover .number {
    font-size: 1.7vw;
  }
  .element:hover .name, .holder:hover .name {
    opacity: 1;
  }

  .holder:hover {
    transition-delay: 0;
    cursor: pointer;
    height: 5vw;
    width: 5vw;
  }
}
.other-non-metal {
  background-color: #1AFF00;
}

.alkali-metal {
  background-color: #FF0C00;
}

.alkaline-earth-metal {
  background-color: #FF6700;
}

.transition-metal {
  background-color: #FF54A4;
}

.metalloid {
  background-color: #FFB800;
}

.post-transition-metal {
  background-color: #FF762E;
}

.halogen {
  background-color: #00EEFF;
}

.noble-gas {
  background-color: #0E94FF;
}

.rare-earth {
  background-color: #FF006A;
}

.actinoid {
  background-color: #FF00C6;
}
</style>
</head>
<body>
  <div class="top">
      <h1 class="title">Periodic Table of the Elements</h1>
      <div class="group-label"></div>
    </div>
    <div class="full-table">
      <div class="main-table">
        <div class="group">
          <div class="element other-non-metal">
            <p class="number">1</p>
            <h1 class="symbol">H</h1>
          </div>
          <div class="element alkali-metal">
            <p class="number">3</p>
            <h1 class="symbol">Li</h1>
          </div>
          <div class="element alkali-metal">
            <p class="number">11</p>
            <h1 class="symbol">Na</h1>
          </div>
          <div class="element alkali-metal">
            <p class="number">19</p>
            <h1 class="symbol">K</h1>
          </div>
          <div class="element alkali-metal">
            <p class="number">37</p>
            <h1 class="symbol">Rb</h1>
          </div>
          <div class="element alkali-metal">
            <p class="number">55</p>
            <h1 class="symbol">Cs</h1>
          </div>
          <div class="element alkali-metal">
            <p class="number">87</p>
            <h1 class="symbol">Fr</h1>
          </div>
        </div>
        <div class="group">
          <div class="element alkaline-earth-metal">
            <p class="number">4</p>
            <h1 class="symbol">Be</h1>
          </div>
          <div class="element alkaline-earth-metal">
            <p class="number">12</p>
            <h1 class="symbol">Mg</h1>
          </div>
          <div class="element alkaline-earth-metal">
            <p class="number">20</p>
            <h1 class="symbol">Ca</h1>
          </div>
          <div class="element alkaline-earth-metal">
            <p class="number">38</p>
            <h1 class="symbol">Sr</h1>
          </div>
          <div class="element alkaline-earth-metal">
            <p class="number">56</p>
            <h1 class="symbol">Ba</h1>
          </div>
          <div class="element alkaline-earth-metal">
            <p class="number">88</p>
            <h1 class="symbol">Ra</h1>
          </div>
        </div>
        <div class="group">
          <div class="element transition-metal">
            <p class="number">21</p>
            <h1 class="symbol">Sc</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">39</p>
            <h1 class="symbol">Y</h1>
          </div>
          <a id="lanthanoids-holder" class="holder" title="Lanthanoids" href="https://www.dylanbyars.com"></a>
          <a id="actinoids-holder" class="holder" title="Actinoids" href="https://github.com/dbyars">
          </a>
        </div>
        <div class="group">
          <div class="element transition-metal">
            <p class="number">22</p>
            <h1 class="symbol">Ti</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">40</p>
            <h1 class="symbol">Zr</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">72</p>
            <h1 class="symbol">Hf</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">104</p>
            <h1 class="symbol">Rf</h1>
          </div>
        </div>
        <div class="group">
          <div class="element transition-metal">
            <p class="number">23</p>
            <h1 class="symbol">V</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">41</p>
            <h1 class="symbol">Nb</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">73</p>
            <h1 class="symbol">Ta</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">105</p>
            <h1 class="symbol">Db</h1>
          </div>
        </div>
        <div class="group">
          <div class="element transition-metal">
            <p class="number">24</p>
            <h1 class="symbol">Cr</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">42</p>
            <h1 class="symbol">Mo</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">74</p>
            <h1 class="symbol">W</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">106</p>
            <h1 class="symbol">Sg</h1>
          </div>
        </div>
        <div class="group">
          <div class="element transition-metal">
            <p class="number">25</p>
            <h1 class="symbol">Mn</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">43</p>
            <h1 class="symbol">Tc</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">75</p>
            <h1 class="symbol">Re</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">107</p>
            <h1 class="symbol">Bh</h1>
          </div>
        </div>
        <div class="group">
          <div class="element transition-metal">
            <p class="number">26</p>
            <h1 class="symbol">Fe</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">44</p>
            <h1 class="symbol">Ru</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">76</p>
            <h1 class="symbol">Os</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">108</p>
            <h1 class="symbol">Hs</h1>
          </div>
        </div>
        <div class="group">
          <div class="element transition-metal">
            <p class="number">27</p>
            <h1 class="symbol">Co</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">45</p>
            <h1 class="symbol">Rh</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">77</p>
            <h1 class="symbol">Ir</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">109</p>
            <h1 class="symbol">Mt</h1>
          </div>
        </div>
        <div class="group">
          <div class="element transition-metal">
            <p class="number">28</p>
            <h1 class="symbol">Ni</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">46</p>
            <h1 class="symbol">Pd</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">78</p>
            <h1 class="symbol">Pt</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">110</p>
            <h1 class="symbol">Ds</h1>
          </div>
        </div>
        <div class="group">
          <div class="element transition-metal">
            <p class="number">29</p>
            <h1 class="symbol">Cu</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">47</p>
            <h1 class="symbol">Ag</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">79</p>
            <h1 class="symbol">Au</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">111</p>
            <h1 class="symbol">Rg</h1>
          </div>
        </div>
        <div class="group">
          <div class="element transition-metal">
            <p class="number">30</p>
            <h1 class="symbol">Zn</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">48</p>
            <h1 class="symbol">Cd</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">80</p>
            <h1 class="symbol">Hg</h1>
          </div>
          <div class="element transition-metal">
            <p class="number">112</p>
            <h1 class="symbol">Cn</h1>
          </div>
        </div>
        <div class="group">
          <div class="element metalloid">
            <p class="number">5</p>
            <h1 class="symbol">B</h1>
          </div>
          <div class="element post-transition-metal">
            <p class="number">13</p>
            <h1 class="symbol">Al</h1>
          </div>
          <div class="element post-transition-metal">
            <p class="number">31</p>
            <h1 class="symbol">Ga</h1>
          </div>
          <div class="element post-transition-metal">
            <p class="number">49</p>
            <h1 class="symbol">In</h1>
          </div>
          <div class="element post-transition-metal">
            <p class="number">81</p>
            <h1 class="symbol">Tl</h1>
          </div>
          <div class="element post-transition-metal">
            <p class="number">113</p>
            <h1 class="symbol">Nh</h1>
          </div>
        </div>
        <div class="group">
          <div class="element other-non-metal">
            <p class="number">6</p>
            <h1 class="symbol">C</h1>
          </div>
          <div class="element metalloid">
            <p class="number">14</p>
            <h1 class="symbol">Si</h1>
          </div>
          <div class="element metalloid">
            <p class="number">32</p>
            <h1 class="symbol">Ge</h1>
          </div>
          <div class="element post-transition-metal">
            <p class="number">50</p>
            <h1 class="symbol">Sn</h1>
          </div>
          <div class="element post-transition-metal">
            <p class="number">82</p>
            <h1 class="symbol">Pb</h1>
          </div>
          <div class="element post-transition-metal">
            <p class="number">114</p>
            <h1 class="symbol">Fl</h1>
          </div>
        </div>
        <div class="group">
          <div class="element other-non-metal">
            <p class="number">7</p>
            <h1 class="symbol">N</h1>
          </div>
          <div class="element other-non-metal">
            <p class="number">15</p>
            <h1 class="symbol">P</h1>
          </div>
          <div class="element metalloid">
            <p class="number">33</p>
            <h1 class="symbol">As</h1>
          </div>
          <div class="element metalloid">
            <p class="number">51</p>
            <h1 class="symbol">Sb</h1>
          </div>
          <div class="element post-transition-metal">
            <p class="number">83</p>
            <h1 class="symbol">Bi</h1>
          </div>
          <div class="element post-transition-metal">
            <p class="number">115</p>
            <h1 class="symbol">Mc</h1>
          </div>
        </div>
        <div class="group">
          <div class="element other-non-metal">
            <p class="number">8</p>
            <h1 class="symbol">O</h1>
          </div>
          <div class="element other-non-metal">
            <p class="number">16</p>
            <h1 class="symbol">S</h1>
          </div>
          <div class="element other-non-metal">
            <p class="number">34</p>
            <h1 class="symbol">Se</h1>
          </div>
          <div class="element metalloid">
            <p class="number">52</p>
            <h1 class="symbol">Te</h1>
          </div>
          <div class="element metalloid">
            <p class="number">84</p>
            <h1 class="symbol">Po</h1>
          </div>
          <div class="element post-transition-metal">
            <p class="number">116</p>
            <h1 class="symbol">Lv</h1>
          </div>
        </div>
        <div class="group">
          <div class="element halogen">
            <p class="number">9</p>
            <h1 class="symbol">F</h1>
          </div>
          <div class="element halogen">
            <p class="number">17</p>
            <h1 class="symbol">Cl</h1>
          </div>
          <div class="element halogen">
            <p class="number">35</p>
            <h1 class="symbol">Br</h1>
          </div>
          <div class="element halogen">
            <p class="number">53</p>
            <h1 class="symbol">I</h1>
          </div>
          <div class="element halogen">
            <p class="number">85</p>
            <h1 class="symbol">At</h1>
          </div>
          <div class="element halogen">
            <p class="number">117</p>
            <h1 class="symbol">Ts</h1>
          </div>
        </div>
        <div class="group">
          <div class="element noble-gas">
            <p class="number">2</p>
            <h1 class="symbol">He</h1>
          </div>
          <div class="element noble-gas">
            <p class="number">10</p>
            <h1 class="symbol">Ne</h1>
          </div>
          <div class="element noble-gas">
            <p class="number">18</p>
            <h1 class="symbol">Ar</h1>
          </div>
          <div class="element noble-gas">
            <p class="number">36</p>
            <h1 class="symbol">Kr</h1>
          </div>
          <div class="element noble-gas">
            <p class="number">54</p>
            <h1 class="symbol">Xe</h1>
          </div>
          <div class="element noble-gas">
            <p class="number">86</p>
            <h1 class="symbol">Rn</h1>
          </div>
          <div class="element noble-gas">
            <p class="number">118</p>
            <h1 class="symbol">Og</h1>
          </div>
        </div>
      </div>
      <div class="f-block">
        <div id="lanthanoids" class="series">
          <div class="element rare-earth">
            <p class="number">57</p>
            <h1 class="symbol">La</h1>
          </div>
          <div class="element rare-earth">
            <p class="number">58</p>
            <h1 class="symbol">Ce</h1>
          </div>
          <div class="element rare-earth">
            <p class="number">59</p>
            <h1 class="symbol">Pr</h1>
          </div>
          <div class="element rare-earth">
            <p class="number">60</p>
            <h1 class="symbol">Nd</h1>
          </div>
          <div class="element rare-earth">
            <p class="number">61</p>
            <h1 class="symbol">Pm</h1>
          </div>
          <div class="element rare-earth">
            <p class="number">62</p>
            <h1 class="symbol">Sm</h1>
          </div>
          <div class="element rare-earth">
            <p class="number">63</p>
            <h1 class="symbol">Eu</h1>
          </div>
          <div class="element rare-earth">
            <p class="number">64</p>
            <h1 class="symbol">Gd</h1>
          </div>
          <div class="element rare-earth">
            <p class="number">65</p>
            <h1 class="symbol">Tb</h1>
          </div>
          <div class="element rare-earth">
            <p class="number">66</p>
            <h1 class="symbol">Dy</h1>
          </div>
          <div class="element rare-earth">
            <p class="number">67</p>
            <h1 class="symbol">Ho</h1>
          </div>
          <div class="element rare-earth">
            <p class="number">68</p>
            <h1 class="symbol">Er</h1>
          </div>
          <div class="element rare-earth">
            <p class="number">69</p>
            <h1 class="symbol">Tb</h1>
          </div>
          <div class="element rare-earth">
            <p class="number">70</p>
            <h1 class="symbol">Yb</h1>
          </div>
          <div class="element rare-earth">
            <p class="number">71</p>
            <h1 class="symbol">Lu</h1>
          </div>
        </div>
        <div id="actinoids" class="series">
          <div class="element actinoid">
            <p class="number">89</p>
            <h1 class="symbol">Ac</h1>
          </div>
          <div class="element actinoid">
            <p class="number">90</p>
            <h1 class="symbol">Th</h1>
          </div>
          <div class="element actinoid">
            <p class="number">91</p>
            <h1 class="symbol">Pa</h1>
          </div>
          <div class="element actinoid">
            <p class="number">92</p>
            <h1 class="symbol">U</h1>
          </div>
          <div class="element actinoid">
            <p class="number">93</p>
            <h1 class="symbol">Np</h1>
          </div>
          <div class="element actinoid">
            <p class="number">94</p>
            <h1 class="symbol">Pu</h1>
          </div>
          <div class="element actinoid">
            <p class="number">95</p>
            <h1 class="symbol">Am</h1>
          </div>
          <div class="element actinoid">
            <p class="number">96</p>
            <h1 class="symbol">Cm</h1>
          </div>
          <div class="element actinoid">
            <p class="number">97</p>
            <h1 class="symbol">Bk</h1>
          </div>
          <div class="element actinoid">
            <p class="number">98</p>
            <h1 class="symbol">Cf</h1>
          </div>
          <div class="element actinoid">
            <p class="number">99</p>
            <h1 class="symbol">Es</h1>
          </div>
          <div class="element actinoid">
            <p class="number">100</p>
            <h1 class="symbol">Fm</h1>
          </div>
          <div class="element actinoid">
            <p class="number">101</p>
            <h1 class="symbol">Md</h1>
          </div>
          <div class="element actinoid">
            <p class="number">102</p>
            <h1 class="symbol">No</h1>
          </div>
          <div class="element actinoid">
            <p class="number">103</p>
            <h1 class="symbol">Lr</h1>
          </div>
        </div>
      </div>
    </div>
<!--     <div id="screen-width"></div> -->
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
      <script>
const elementInfo = {
  H: {
    name: "Hydrogen",
    radioactive: false,
    category: "Non-metal"
    // date discovered
    // discoverer
    // unexpected symbol
    // interesting facts
  },
  He: {
    name: "Helium",
    radioactive: false,
    category: "Noble Gas" },

  Li: {
    name: "Lithium",
    radioactive: false,
    category: "Alkali Metal" },

  Be: {
    name: "Berylium",
    radioactive: false,
    category: "Alkaline Earth Metal" },

  B: {
    name: "Boron",
    radioactive: false,
    category: "Metalloid" },

  C: {
    name: "Carbon",
    radioactive: false,
    category: "Non-metal" },

  N: {
    name: "Nitrogen",
    radioactive: false,
    category: "Non-metal" },

  O: {
    name: "Oxygen",
    radioactive: false,
    category: "Non-metal" },

  F: {
    name: "Flourine",
    radioactive: false,
    category: "Halogen" },

  Ne: {
    name: "Neon",
    radioactive: false,
    category: "Noble Gas" },

  Na: {
    name: "Sodium",
    radioactive: false,
    category: "Alkali Metal" },

  Mg: {
    name: "Magnesium",
    radioactive: false,
    category: "Alkaline Earth Metal" },

  Al: {
    name: "Aluminium",
    radioactive: false,
    category: "Post-transition Metal" },

  Si: {
    name: "Silicon",
    radioactive: false,
    category: "Metalloid" },

  P: {
    name: "Phosphorous",
    radioactive: false,
    category: "Non-metal" },

  S: {
    name: "Sulfur",
    radioactive: false,
    category: "Non-metal" },

  Cl: {
    name: "Chlorine",
    radioactive: false,
    category: "Halogen" },

  Ar: {
    name: "Argon",
    radioactive: false,
    category: "Noble Gas" },

  K: {
    name: "Potassium",
    radioactive: false,
    category: "Alkali Metal" },

  Ca: {
    name: "Calcium",
    radioactive: false,
    category: "Alkaline Earth Metal" },

  Sc: {
    name: "Scandium",
    radioactive: false,
    category: "Transition Metal" },

  Ti: {
    name: "Titanium",
    radioactive: false,
    category: "Transition Metal" },

  V: {
    name: "Vanadium",
    radioactive: false,
    category: "Transition Metal" },

  Cr: {
    name: "Chromium",
    radioactive: false,
    category: "Transition Metal" },

  Mn: {
    name: "Manganese",
    radioactive: false,
    category: "Transition Metal" },

  Fe: {
    name: "Iron",
    radioactive: false,
    category: "Transition Metal" },

  Co: {
    name: "Cobalt",
    radioactive: false,
    category: "Transition Metal" },

  Ni: {
    name: "Nickel",
    radioactive: false,
    category: "Transition Metal" },

  Cu: {
    name: "Copper",
    radioactive: false,
    category: "Transition Metal" },

  Zn: {
    name: "Zinc",
    radioactive: false,
    category: "Transition Metal" },

  Ga: {
    name: "Gallium",
    radioactive: false,
    category: "Post-transition Metal" },

  Ge: {
    name: "Germanium",
    radioactive: false,
    category: "Metalloid" },

  As: {
    name: "Arsenic",
    radioactive: false,
    category: "Metalloid" },

  Se: {
    name: "Selenium",
    radioactive: false,
    category: "Non-metal" },

  Br: {
    name: "Bromine",
    radioactive: false,
    category: "Halogen" },

  Kr: {
    name: "Krypton",
    radioactive: false,
    category: "Noble Gas" },

  Rb: {
    name: "Rubidium",
    radioactive: false,
    category: "Alkali Metal" },

  Sr: {
    name: "Strontium",
    radioactive: false,
    category: "Alkaline Earth Metal" },

  Y: {
    name: "Yttrium",
    radioactive: false,
    category: "Transition Metal" },

  Zr: {
    name: "Zirconium",
    radioactive: false,
    category: "Transition Metal" },

  Nb: {
    name: "Niobium",
    radioactive: false,
    category: "Transition Metal" },

  Mo: {
    name: "Molybdenum",
    radioactive: false,
    category: "Transition Metal" },

  Tc: {
    name: "Technetium",
    radioactive: true,
    category: "Transition Metal" },

  Ru: {
    name: "Ruthenium",
    radioactive: false,
    category: "Transition Metal" },

  Rh: {
    name: "Rhodium",
    radioactive: false,
    category: "Transition Metal" },

  Pd: {
    name: "Palladium",
    radioactive: false,
    category: "Transition Metal" },

  Ag: {
    name: "Silver",
    radioactive: false,
    category: "Transition Metal" },

  Cd: {
    name: "Cadmium",
    radioactive: false,
    category: "Transition Metal" },

  In: {
    name: "Indium",
    radioactive: false,
    category: "Post-transition Metal" },

  Sn: {
    name: "Tin",
    radioactive: false,
    category: "Post-transition Metal" },

  Sb: {
    name: "Antimony",
    radioactive: false,
    category: "Metalloid" },

  Te: {
    name: "Tellurium",
    radioactive: false,
    category: "Metalloid" },

  I: {
    name: "Iodine",
    radioactive: false,
    category: "Halogen" },

  Xe: {
    name: "Xenon",
    radioactive: false,
    category: "Noble Gas" },

  Cs: {
    name: "Cesium",
    radioactive: false,
    category: "Alkali Metal" },

  Ba: {
    name: "Barium",
    radioactive: false,
    category: "Alkaline Earth Metal" },

  La: {
    name: "Lanthanum",
    radioactive: false,
    category: "Lanthanoid" },

  Ce: {
    name: "Cerium",
    radioactive: false,
    category: "Lanthanoid" },

  Pr: {
    name: "Praseodymium",
    radioactive: false,
    category: "Lanthanoid" },

  Nd: {
    name: "Neodymium",
    radioactive: false,
    category: "Lanthanoid" },

  Pm: {
    name: "Promethium",
    radioactive: true,
    category: "Lanthanoid" },

  Sm: {
    name: "Samarium",
    radioactive: false,
    category: "Lanthanoid" },

  Eu: {
    name: "Europium",
    radioactive: false,
    category: "Lanthanoid" },

  Gd: {
    name: "Gadolinium",
    radioactive: false,
    category: "Lanthanoid" },

  Tb: {
    name: "Terbium",
    radioactive: false,
    category: "Lanthanoid" },

  Dy: {
    name: "Dysprosium",
    radioactive: false,
    category: "Lanthanoid" },

  Ho: {
    name: "Holmium",
    radioactive: false,
    category: "Lanthanoid" },

  Er: {
    name: "Erbium",
    radioactive: false,
    category: "Lanthanoid" },

  Tm: {
    name: "Thulium",
    radioactive: false,
    category: "Lanthanoid" },

  Yb: {
    name: "Ytterbium",
    radioactive: false,
    category: "Lanthanoid" },

  Lu: {
    name: "Lutetium",
    radioactive: false,
    category: "Lanthanoid" },

  Hf: {
    name: "Hafnium",
    radioactive: false,
    category: "Transition Metal" },

  Ta: {
    name: "Tantalum",
    radioactive: false,
    category: "Transition Metal" },

  W: {
    name: "Tungsten",
    radioactive: false,
    category: "Transition Metal" },

  Re: {
    name: "Rhenium",
    radioactive: false,
    category: "Transition Metal" },

  Os: {
    name: "Osmium",
    radioactive: false,
    category: "Transition Metal" },

  Ir: {
    name: "Iridium",
    radioactive: false,
    category: "Transition Metal" },

  Pt: {
    name: "Platinum",
    radioactive: false,
    category: "Transition Metal" },

  Au: {
    name: "Gold",
    radioactive: false,
    category: "Transition Metal" },

  Hg: {
    name: "Mercury",
    radioactive: false,
    category: "Transition Metal" },

  Tl: {
    name: "Thallium",
    radioactive: false,
    category: "Post-transition Metal" },

  Pb: {
    name: "Lead",
    radioactive: false,
    category: "Post-transition Metal" },

  Bi: {
    name: "Bismuth",
    radioactive: false,
    category: "Post-transition Metal" },

  Po: {
    name: "Polonium",
    radioactive: true,
    category: "Metalloid" },

  At: {
    name: "Astatine",
    radioactive: true,
    category: "Halogen" },

  Rn: {
    name: "Radon",
    radioactive: true,
    category: "Noble Gas" },

  Fr: {
    name: "Francium",
    radioactive: true,
    category: "Alkali Metal" },

  Ra: {
    name: "Radium",
    radioactive: true,
    category: "Alkaline Earth Metal" },

  Ac: {
    name: "Actinium",
    radioactive: true,
    category: "Actinoid" },

  Th: {
    name: "Thorium",
    radioactive: true,
    category: "Actinoid" },

  Pa: {
    name: "Protactinium",
    radioactive: true,
    category: "Actinoid" },

  U: {
    name: "Uranium",
    radioactive: true,
    category: "Actinoid" },

  Np: {
    name: "Neptunium",
    radioactive: true,
    category: "Actinoid" },

  Pu: {
    name: "Plutonium",
    radioactive: true,
    category: "Actinoid" },

  Am: {
    name: "Americium",
    radioactive: true,
    category: "Actinoid" },

  Cm: {
    name: "Curium",
    radioactive: true,
    category: "Actinoid" },

  Bk: {
    name: "Berylium",
    radioactive: true,
    category: "Actinoid" },

  Cf: {
    name: "Californium",
    radioactive: true,
    category: "Actinoid" },

  Es: {
    name: "Einsteinium",
    radioactive: true,
    category: "Actinoid" },

  Fm: {
    name: "Fermium",
    radioactive: true,
    category: "Actinoid" },

  Md: {
    name: "Mendelevium",
    radioactive: true,
    category: "Actinoid" },

  No: {
    name: "Nobelium",
    radioactive: true,
    category: "Actinoid" },

  Lr: {
    name: "Lawrencium",
    radioactive: true,
    category: "Actinoid" },

  Rf: {
    name: "Rutherfordium",
    radioactive: true,
    category: "Transition Metal" },

  Db: {
    name: "Dubnium",
    radioactive: true,
    category: "Transition Metal" },

  Sg: {
    name: "Seaborgium",
    radioactive: true,
    category: "Transition Metal" },

  Bh: {
    name: "Bohrium",
    radioactive: true,
    category: "Transition Metal" },

  Hs: {
    name: "Hassium",
    radioactive: true,
    category: "Transition Metal" },

  Mt: {
    name: "Meitnerium",
    radioactive: true,
    category: "Transition Metal" },

  Ds: {
    name: "Darmstadtium",
    radioactive: true,
    category: "Transition Metal" },

  Rg: {
    name: "Roentgenium",
    radioactive: true,
    category: "Transition Metal" },

  Cn: {
    name: "Copernicium",
    radioactive: true,
    category: "Transition Metal" },

  Nh: {
    name: "Nihonium",
    radioactive: true,
    category: "Post-transition Metal" },

  Fl: {
    name: "Flerovium",
    radioactive: true,
    category: "Post-transition Metal" },

  Mc: {
    name: "Moscovium",
    radioactive: true,
    category: "Post-transition Metal" },

  Lv: {
    name: "Livermorium",
    radioactive: true,
    category: "Post-transition Metal" },

  Ts: {
    name: "Tennessine",
    radioactive: false,
    category: "Halogen" },

  Og: {
    name: "Oganesson",
    radioactive: true,
    category: "Noble Gas" } };



// Color palette
const colors = {
  'background': '#F2EFE9',
  'other-non-metal': '#1AFF00',
  'alkali-metal': '#FF0C00',
  'alkaline-earth-metal': '#FF6700',
  'transition-metal': '#FF54A4',
  'metalloid': '#FFB800',
  'post-transition-metal': '#FF762E',
  'halogen': '#00EEFF',
  'noble-gas': '#0E94FF',
  'rare-earth': '#FF006A',
  'actinoid': '#FF00C6' };


// Viewport width
const viewportSize = $('.full-table').width();

$('#screen-width').text(viewportSize);

// For every element...
$('.element').each(function () {
  // Append an h3 to the element with its name
  const elementSymbol = $(this).children('.symbol').text();
  const elementName = elementInfo[elementSymbol]['name'];
  $(this).append(`<h3 class="name">${elementName}</h3>`);
});

// Events for mobile screen sizes
if (viewportSize <= 760) {
  $('.element').on('click', function () {
    // Check that the element clicked isn't already expanded
    if ($(this).hasClass('element__expanded')) {
      $(this).removeClass('element__expanded');
    } else {
      // Remove the expanded classes from whatever element has them currently (previously clicked element)
      $('.element').removeClass('element__expanded');
      // Add the expanded classes to the currently selected element
      $(this).addClass('element__expanded');
    }
    // Show the selected element's category type in hovered mode
    // const elementSymbol = $(this).children('.symbol').text()
    // const elementCategory = elementInfo[elementSymbol]['category']
    // $(this).append(`<h3 class="category">${elementCategory}</h3>`)
  });
}

// Events for larger screen size
if (viewportSize > 760) {
  $('.element').removeClass('element__expanded');
  // Helpful tip on what the corner number is for large screens
  $('.number').attr('title', 'Atomic Number');

  // Hover effects only large screens can enjoy
  $('.element').hover(
  function () {
    const elementSymbol = $(this).children('.symbol').text();
    const elementName = elementInfo[elementSymbol]['name'];
    const elementCategory = elementInfo[elementSymbol]['category'];
    const categoryColorSelector = $(this).attr('class').replace(/element /, '');
    const groupLabelColor = colors[categoryColorSelector];
    const isRadioactive = elementInfo[elementSymbol]['radioactive'];
    // Display hovered element's category name under the title
    $('.group-label').text(elementCategory);
    // Make the background of the category label box the color of the hovered category
    $('.group-label').css('background-color', groupLabelColor);
    //   // Add some attributes to the element to be used later
    // $(this).attr({
    //   "title": elementName,
    //   "data-isRadioactive": isRadioactive
    // })
  },
  // When moved from hovering this element...
  function () {
    // Remove the group label box and set its background color back to the page's background color
    $('.group-label').text('');
    $('.group-label').css('background-color', colors['background']);
  });

}

// When an element is clicked...
$('.element').on('click', function () {
  const elementNumber = $(this).children('.number').text();
  const elementName = $(this).attr("title");

  // // Check to see if the clicked element is radioactive
  if ($(this).attr("data-isRadioactive") === "true") {
    alert(`Watch out! ${elementName} is radioactive, yo!`);
  }
  // Make the Periodic Videos URL
  const videoUrl = () => {
    let urlNumber = [...elementNumber];
    while (urlNumber.length < 3) {if (window.CP.shouldStopExecution(0)) break;
      urlNumber.unshift('0');
    }window.CP.exitedLoop(0);
    return `http://periodicvideos.com/videos/${urlNumber.join('')}.htm`;
  };
  // Open the video for this element in a new tab if you want to watch it
  if (confirm(`${elementName} video?`)) {
    window.open(videoUrl());
  }
});
    </script>
</body>
</html>

2. By Florian

Made by Florian. Interactive Periodic Table with CSS Grid Layout and JavaScript. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
  
<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 4rem 2rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: linear-gradient(to right, #031444, #564961);
  font-family: Open Sans;
}

main, .info {
  padding: 1rem;
}

main {
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-gap: 0.5rem;
}
main h1 {
  height: 100%;
  width: 100%;
  margin: 0;
  grid-row: 1/span 2;
  grid-column: 4/span 8;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #59656F;
  color: white;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}
main abbr {
  width: 2.5rem;
  height: 2.5rem;
  grid-row: 1;
  grid-column: 2;
  padding: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 4px solid white;
  box-shadow: 0 9px 5px -4px rgba(0, 0, 0, 0.3);
  font-weight: bold;
  transition: 0.1s all ease;
  cursor: default;
  background: #59656F;
  color: white;
}
main abbr:hover, main abbr.focus {
  transform: scale(1.25);
  box-shadow: 0 19px 15px rgba(0, 0, 0, 0.7);
}
main abbr.metal {
  border-color: #C2CC8B;
}
main abbr.metalloid {
  border-color: #9CC4B2;
}
main abbr.transition {
  border-color: #E1B07E;
}
main abbr.noble {
  border-color: #ECDCB0;
}
main abbr.nonmetal {
  border-color: #7CE577;
}
main abbr.alkali {
  border-color: #A0CCDA;
}
main abbr.alkaline {
  border-color: #B9E28C;
}
main abbr.lanthanide {
  border-color: #CC8B8C;
}
main abbr.actinide {
  border-color: #F1C8DB;
}

.info {
  margin-top: 1rem;
  width: 55rem;
  height: auto;
  display: grid;
  grid-template-rows: 2rem auto;
  grid-template-columns: 8fr 5fr;
  grid-column-gap: 2rem;
  background: #59656F;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
  color: white;
  font-weight: 300;
  transition: 0.5s height ease-in-out;
}
.info p {
  grid-row: 2/span 1;
  grid-column: 1/span 1;
  line-height: 1.3;
}
.info ul {
  grid-row: 2/span 1;
  grid-column: 2/span 1;
  line-height: 1.3;
  list-style: none;
}
.info ul li {
  display: flex;
  justify-content: space-between;
}
.info ul li span {
  text-align: right;
  min-width: 120px;
}
.info ul li span.bold {
  font-weight: bold;
  text-align: left;
}
.info a:link,
.info a:visited,
.info a:hover,
.info a:active {
  color: inherit;
  text-decoration: none;
}
</style>
</head>
<body>
  <main>
  <h1>Periodic Table</h1>
</main>
<article class="info">
  <h2><a href="#" id="name"></a></h2>
  <p id="summary"></p>
  <ul>
    <li><span class="bold">Discovered by:  </span><span id="discovered-by"></span></li>
    <li><span class="bold">Named by:</span><span id="name-given-by"></span></li>
    <li><span class="bold">Atomic mass:</span><span id="atomic-mass"></span></li>
    <li><span class="bold">Density:</span><span id="density"></span></li>
  </ul>
</article>
      <script>
const main = document.querySelector('main');
const categories = ['metal', 'metalloid', 'nonmetal', 'noble', 'alkali', 'alkaline', 'transition', 'lanthanide', 'actinide'];
let activeElement = null;

loadElements().then(outputElements);

// Load the elements of the periodic table
// JSON data is provided by the Periodic Table JSON GitHub Repo
// https://github.com/Bowserinator/Periodic-Table-JSON
function loadElements() {
  return new Promise((resolve, reject) => {
    let req = new XMLHttpRequest();
    let url = 'https://tyrandus.github.io/static/periodic-table/data.json';
    req.open('GET', url);
    req.onload = function () {
      console.log(JSON.parse(req.response));
      resolve(JSON.parse(req.response).elements);
    };
    req.send();
  });
}

// Output one <abbr> per element
function outputElements(elements) {
  let abbreviations = [];

  elements.forEach(elem => {
    let abbr = document.createElement('abbr');
    abbr.textContent = elem.symbol;
    abbr.style.gridColumn = elem.xpos;
    abbr.style.gridRow = elem.ypos;

    abbr.classList.add(elem.category.
    split(/[ ,]/).
    filter(c => {
      let ind = categories.indexOf(c);
      return ind >= 0;
    })[0]);

    abbr.addEventListener('click', () => {
      if (activeElement) activeElement.classList.remove('focus');
      abbr.classList.add('focus');
      activeElement = abbr;
      showInfo(elem);
    });
    main.appendChild(abbr);
    abbreviations.push(abbr);
  });

  let i = Math.floor(Math.random() * abbreviations.length);
  abbreviations[i].click();
}

const elName = document.getElementById('name');
const elSummary = document.getElementById('summary');
const elDiscoveredBy = document.getElementById('discovered-by');
const elNameGivenBy = document.getElementById('name-given-by');
const elAtomicMass = document.getElementById('atomic-mass');
const elDensity = document.getElementById('density');

// Show detailed information regarding one element
function showInfo(element) {
  elName.textContent = element.number + ' ' + element.name;
  elName.href = element.source;

  elSummary.textContent = element.summary;
  elDiscoveredBy.textContent = u(element.discovered_by);
  elNameGivenBy.textContent = u(element.named_by);
  elAtomicMass.textContent = u(element.atomic_mass) + ' u';
  elDensity.textContent = u(element.density) + ' g/L';

  // Replace null by "Unknown"
  function u(s) {
    return s ? s : 'Unknown';
  }
}
    </script>
</body>
</html>

3. By Lennart Hase

Made by Lennart Hase. Simple Periodic table. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
body{
  margin: 0;
  padding: 0;
  background: #212121;
}

.pt{
  position: absolute;
  top: -150px;
  left: -230px;
  min-width: 2510px;
  width: 100%;
  height: 1430px;
  transform: scale(0.8);
}

.element{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100px;
  height: 100px;
  background: rgba(225, 89, 75, 1);
  border-radius: 5px;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,0.6), 0 0 8px rgba(0,0,0,0.4);
  cursor: pointer;
}

.element:hover{
  box-shadow: inset 0 5px 0 rgba(0,0,0,0.6), inset 1px 1px 6px rgba(0,0,0,1);
}

.element canvas{
  border-radius: 5px;
  width: 100px;
  height: 100px;
}

.element .title{
  position: absolute;
  top: 18px;
  left: 0px;
  width: 100px;
  height: 50px;
  font-family: Helvetica;
  color: #fff;
  font-size: 43px;
  text-shadow: 0px -2px 0 rgba(50,50,50,0.1);
  text-align: center;
}

.element .no{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100px;
  height: 20px;
  font-family: Helvetica;
  color: #fff;
  font-size: 10px;
  text-align: left;
  padding-left: 5px;
  padding-top: 5px;
}

.element .name{
  position: absolute;
  top: 61px;
  left: 0px;
  width: 100px;
  height: 20px;
  font-family: Helvetica;
  color: #fff;
  font-size: 10px;
  text-align: center;
  line-height: 14px;
}

.pt .box{
  position: absolute;
  top: 1120px;
  left: 470px;
  width: 1960px;
  height: 260px;
  background: #161616;
  border-radius: 5px;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.7);
}

.pt .box2{
  position: absolute;
  top: 730px;
  left: 340px;
  width: 140px;
  height: 650px;
  background: #161616;
  border-radius: 5px;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.7);
}

.pt .box2:after{
  content: '';
  background: rgba(22, 22, 22, 1);
  width: 20px;
  height: 252px;
  position: absolute;
  bottom: 4px;
  right: -10px;
}

.pt .periodic{
  font-family: Helvetica;
  font-size: 50px;
  color: #fff;
  position: absolute;
  top: 110px;
  left: 610px;
}

.pt .table{
  font-family: Helvetica;
  font-size: 50px;
  color: #fff;
  position: absolute;
  top: 240px;
  left: 740px;
}
</style>
</head>
<body>
  <div class='pt'>
  <div class='box'></div>
  <div class='box2'></div>
  <div class='periodic'>eriodic</div>
  <div class='table'>ble</div>
</div>
  <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
var elements = {
  0: {
    symbol: "H",
    element: "Hydrogen",
    atomicNumber: 1,
    mass: "1.008",
    pos: {
      top: "100px",
      left: "100px" },

    color: "rgba(114, 216, 94, 1)",
    shapeColors: {
      r: 0,
      g: 255,
      b: 150 } },


  1: {
    symbol: "He",
    element: "Helium",
    atomicNumber: 2,
    mass: "4.002",
    pos: {
      top: "100px",
      left: "2310px" },

    color: "rgba(88, 176, 222, 1)",
    shapeColors: {
      r: 0,
      g: 155,
      b: 255 } },


  2: {
    symbol: "Li",
    element: "Lithium",
    atomicNumber: 3,
    mass: "6.94",
    pos: {
      top: "230px",
      left: "100px" },

    color: "rgba(224, 84, 75, 1)",
    shapeColors: {
      r: 255,
      g: 0,
      b: 155 } },


  3: {
    symbol: "Be",
    element: "Beryllium",
    atomicNumber: 4,
    mass: "9.012",
    pos: {
      top: "230px",
      left: "230px" },

    color: "rgba(255, 229, 79, 1)",
    shapeColors: {
      r: 255,
      g: 255,
      b: 50 } },


  4: {
    symbol: "B",
    element: "Boron",
    atomicNumber: 5,
    mass: "10.81",
    pos: {
      top: "230px",
      left: "1660px" },

    color: "rgba(177, 221, 103, 1)",
    shapeColors: {
      r: 170,
      g: 230,
      b: 100 } },


  5: {
    symbol: "C",
    element: "Carbon",
    atomicNumber: 6,
    mass: "12.011",
    pos: {
      top: "230px",
      left: "1790px" },

    color: "rgba(114, 216, 94, 1)",
    shapeColors: {
      r: 0,
      g: 255,
      b: 150 } },


  6: {
    symbol: "N",
    element: "Nitrogen",
    atomicNumber: 7,
    mass: "14.007",
    pos: {
      top: "230px",
      left: "1920px" },

    color: "rgba(114, 216, 94, 1)",
    shapeColors: {
      r: 0,
      g: 255,
      b: 150 } },


  7: {
    symbol: "O",
    element: "Oxygen",
    atomicNumber: 8,
    mass: "15.999",
    pos: {
      top: "230px",
      left: "2050px" },

    color: "rgba(114, 216, 94, 1)",
    shapeColors: {
      r: 0,
      g: 255,
      b: 150 } },


  8: {
    symbol: "F",
    element: "Flourine",
    atomicNumber: 9,
    mass: "18.998",
    pos: {
      top: "230px",
      left: "2180px" },

    color: "rgba(88, 210, 190, 1)",
    shapeColors: {
      r: 0,
      g: 255,
      b: 200 } },


  9: {
    symbol: "Ne",
    element: "Neon",
    atomicNumber: 10,
    mass: "20.172",
    pos: {
      top: "230px",
      left: "2310px" },

    color: "rgba(88, 176, 222, 1)",
    shapeColors: {
      r: 0,
      g: 155,
      b: 255 } },


  10: {
    symbol: "Na",
    element: "Sodium",
    atomicNumber: 11,
    mass: "22.989",
    pos: {
      top: "360px",
      left: "100px" },

    color: "rgba(224, 84, 75, 1)",
    shapeColors: {
      r: 255,
      g: 0,
      b: 155 } },


  11: {
    symbol: "Mg",
    element: "Magnesium",
    atomicNumber: 12,
    mass: "24.305",
    pos: {
      top: "360px",
      left: "230px" },

    color: "rgba(255, 229, 79, 1)",
    shapeColors: {
      r: 255,
      g: 255,
      b: 50 } },


  12: {
    symbol: "Al",
    element: "Aluminium",
    atomicNumber: 13,
    mass: "26.981",
    pos: {
      top: "360px",
      left: "1660px" },

    color: "rgba(84, 217, 149, 1)",
    shapeColors: {
      r: 90,
      g: 220,
      b: 150 } },


  13: {
    symbol: "Si",
    element: "Silicon",
    atomicNumber: 14,
    mass: "28.085",
    pos: {
      top: "360px",
      left: "1790px" },

    color: "rgba(177, 221, 103, 1)",
    shapeColors: {
      r: 170,
      g: 230,
      b: 100 } },


  14: {
    symbol: "P",
    element: "Phosphorus",
    atomicNumber: 15,
    mass: "30.973",
    pos: {
      top: "360px",
      left: "1920px" },

    color: "rgba(114, 216, 94, 1)",
    shapeColors: {
      r: 0,
      g: 255,
      b: 150 } },


  15: {
    symbol: "S",
    element: "Sulfur",
    atomicNumber: 16,
    mass: "32.06",
    pos: {
      top: "360px",
      left: "2050px" },

    color: "rgba(114, 216, 94, 1)",
    shapeColors: {
      r: 0,
      g: 255,
      b: 150 } },


  16: {
    symbol: "Cl",
    element: "Chlorine",
    atomicNumber: 17,
    mass: "35.45",
    pos: {
      top: "360px",
      left: "2180px" },

    color: "rgba(88, 210, 190, 1)",
    shapeColors: {
      r: 0,
      g: 255,
      b: 200 } },


  17: {
    symbol: "Ar",
    element: "Argon",
    atomicNumber: 18,
    mass: "39.948",
    pos: {
      top: "360px",
      left: "2310px" },

    color: "rgba(88, 176, 222, 1)",
    shapeColors: {
      r: 0,
      g: 155,
      b: 255 } },


  18: {
    symbol: "K",
    element: "Potassium",
    atomicNumber: 19,
    mass: "39.098",
    pos: {
      top: "490px",
      left: "100px" },

    color: "rgba(224, 84, 75, 1)",
    shapeColors: {
      r: 255,
      g: 0,
      b: 155 } },


  19: {
    symbol: "Ca",
    element: "Calcium",
    atomicNumber: 20,
    mass: "40.078",
    pos: {
      top: "490px",
      left: "230px" },

    color: "rgba(255, 229, 79, 1)",
    shapeColors: {
      r: 255,
      g: 255,
      b: 50 } },


  20: {
    symbol: "Sc",
    element: "Scandium",
    atomicNumber: 21,
    mass: "44.955",
    pos: {
      top: "490px",
      left: "360px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  21: {
    symbol: "Ti",
    element: "Titanium",
    atomicNumber: 22,
    mass: "47.867",
    pos: {
      top: "490px",
      left: "490px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  22: {
    symbol: "V",
    element: "Vanadium",
    atomicNumber: 23,
    mass: "50.942",
    pos: {
      top: "490px",
      left: "620px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  23: {
    symbol: "Cr",
    element: "Chromium",
    atomicNumber: 24,
    mass: "51.996",
    pos: {
      top: "490px",
      left: "750px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  24: {
    symbol: "Mn",
    element: "Manganese",
    atomicNumber: 25,
    mass: "54.938",
    pos: {
      top: "490px",
      left: "880px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  25: {
    symbol: "Fe",
    element: "Iron",
    atomicNumber: 26,
    mass: "55.845",
    pos: {
      top: "490px",
      left: "1010px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  26: {
    symbol: "Co",
    element: "Cobalt",
    atomicNumber: 27,
    mass: "58.933",
    pos: {
      top: "490px",
      left: "1140px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  27: {
    symbol: "Ni",
    element: "Nickel",
    atomicNumber: 28,
    mass: "58.693",
    pos: {
      top: "490px",
      left: "1270px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  28: {
    symbol: "Cu",
    element: "Copper",
    atomicNumber: 29,
    mass: "63.546",
    pos: {
      top: "490px",
      left: "1400px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  29: {
    symbol: "Zn",
    element: "Zinc",
    atomicNumber: 30,
    mass: "65.38",
    pos: {
      top: "490px",
      left: "1530px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  30: {
    symbol: "Ga",
    element: "Gallium",
    atomicNumber: 31,
    mass: "69.723",
    pos: {
      top: "490px",
      left: "1660px" },

    color: "rgba(84, 217, 149, 1)",
    shapeColors: {
      r: 90,
      g: 220,
      b: 150 } },


  31: {
    symbol: "Ge",
    element: "Germanium",
    atomicNumber: 32,
    mass: "72.63",
    pos: {
      top: "490px",
      left: "1790px" },

    color: "rgba(177, 221, 103, 1)",
    shapeColors: {
      r: 170,
      g: 230,
      b: 100 } },


  32: {
    symbol: "As",
    element: "Arsenic",
    atomicNumber: 33,
    mass: "74.921",
    pos: {
      top: "490px",
      left: "1920px" },

    color: "rgba(177, 221, 103, 1)",
    shapeColors: {
      r: 170,
      g: 230,
      b: 100 } },


  33: {
    symbol: "Se",
    element: "Selenium",
    atomicNumber: 34,
    mass: "78.971",
    pos: {
      top: "490px",
      left: "2050px" },

    color: "rgba(114, 216, 94, 1)",
    shapeColors: {
      r: 0,
      g: 255,
      b: 150 } },


  34: {
    symbol: "Br",
    element: "Bromine",
    atomicNumber: 35,
    mass: "79.904",
    pos: {
      top: "490px",
      left: "2180px" },

    color: "rgba(88, 210, 190, 1)",
    shapeColors: {
      r: 0,
      g: 255,
      b: 200 } },


  35: {
    symbol: "Kr",
    element: "Krypton",
    atomicNumber: 36,
    mass: "83.798",
    pos: {
      top: "490px",
      left: "2310px" },

    color: "rgba(88, 176, 222, 1)",
    shapeColors: {
      r: 0,
      g: 155,
      b: 255 } },


  36: {
    symbol: "Rb",
    element: "Rubidium",
    atomicNumber: 37,
    mass: "85.468",
    pos: {
      top: "620px",
      left: "100px" },

    color: "rgba(224, 84, 75, 1)",
    shapeColors: {
      r: 255,
      g: 0,
      b: 155 } },


  37: {
    symbol: "Sr",
    element: "Strontium",
    atomicNumber: 38,
    mass: "87.62",
    pos: {
      top: "620px",
      left: "230px" },

    color: "rgba(255, 229, 79, 1)",
    shapeColors: {
      r: 255,
      g: 255,
      b: 50 } },


  38: {
    symbol: "Y",
    element: "Yttrium",
    atomicNumber: 39,
    mass: "88.906",
    pos: {
      top: "620px",
      left: "360px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  39: {
    symbol: "Zr",
    element: "Zirconium",
    atomicNumber: 40,
    mass: "91.224",
    pos: {
      top: "620px",
      left: "490px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  40: {
    symbol: "Nb",
    element: "Niobium",
    atomicNumber: 41,
    mass: "92.906",
    pos: {
      top: "620px",
      left: "620px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  41: {
    symbol: "Mo",
    element: "Molybdenur",
    atomicNumber: 42,
    mass: "95.95",
    pos: {
      top: "620px",
      left: "750px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  42: {
    symbol: "Tc",
    element: "Technetium",
    atomicNumber: 43,
    mass: "(98)",
    pos: {
      top: "620px",
      left: "880px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  43: {
    symbol: "Ru",
    element: "Ruthenium",
    atomicNumber: 44,
    mass: "101.07",
    pos: {
      top: "620px",
      left: "1010px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  44: {
    symbol: "Rh",
    element: "Rhodium",
    atomicNumber: 45,
    mass: "102.90",
    pos: {
      top: "620px",
      left: "1140px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  45: {
    symbol: "Pd",
    element: "Palladium",
    atomicNumber: 46,
    mass: "106.42",
    pos: {
      top: "620px",
      left: "1270px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  46: {
    symbol: "Ag",
    element: "Silver",
    atomicNumber: 47,
    mass: "107.87",
    pos: {
      top: "620px",
      left: "1400px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  47: {
    symbol: "Cd",
    element: "Cadmium",
    atomicNumber: 48,
    mass: "112.41",
    pos: {
      top: "620px",
      left: "1530px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  48: {
    symbol: "In",
    element: "Indium",
    atomicNumber: 49,
    mass: "114.81",
    pos: {
      top: "620px",
      left: "1660px" },

    color: "rgba(84, 217, 149, 1)",
    shapeColors: {
      r: 90,
      g: 220,
      b: 150 } },


  49: {
    symbol: "Sn",
    element: "Tin",
    atomicNumber: 50,
    mass: "118.71",
    pos: {
      top: "620px",
      left: "1790px" },

    color: "rgba(84, 217, 149, 1)",
    shapeColors: {
      r: 90,
      g: 220,
      b: 150 } },


  50: {
    symbol: "Sb",
    element: "Antimony",
    atomicNumber: 51,
    mass: "121.76",
    pos: {
      top: "620px",
      left: "1920px" },

    color: "rgba(177, 221, 103, 1)",
    shapeColors: {
      r: 170,
      g: 230,
      b: 100 } },


  51: {
    symbol: "Te",
    element: "Tellurium",
    atomicNumber: 52,
    mass: "127.60",
    pos: {
      top: "620px",
      left: "2050px" },

    color: "rgba(177, 221, 103, 1)",
    shapeColors: {
      r: 170,
      g: 230,
      b: 100 } },


  52: {
    symbol: "I",
    element: "Iodine",
    atomicNumber: 53,
    mass: "126.90",
    pos: {
      top: "620px",
      left: "2180px" },

    color: "rgba(88, 210, 190, 1)",
    shapeColors: {
      r: 0,
      g: 255,
      b: 200 } },


  53: {
    symbol: "Xe",
    element: "Xenon",
    atomicNumber: 54,
    mass: "131.29",
    pos: {
      top: "620px",
      left: "2310px" },

    color: "rgba(88, 176, 222, 1)",
    shapeColors: {
      r: 0,
      g: 155,
      b: 255 } },


  54: {
    symbol: "Cs",
    element: "Caesium",
    atomicNumber: 55,
    mass: "132.90",
    pos: {
      top: "750px",
      left: "100px" },

    color: "rgba(224, 84, 75, 1)",
    shapeColors: {
      r: 255,
      g: 0,
      b: 155 } },


  55: {
    symbol: "Ba",
    element: "Barium",
    atomicNumber: 56,
    mass: "137.327",
    pos: {
      top: "750px",
      left: "230px" },

    color: "rgba(255, 229, 79, 1)",
    shapeColors: {
      r: 255,
      g: 255,
      b: 50 } },


  56: {
    symbol: "",
    element: "57-71",
    atomicNumber: "",
    mass: "",
    pos: {
      top: "750px",
      left: "360px" },

    color: "rgba(124, 80, 230, 1)",
    shapeColors: {
      r: 135,
      g: 80,
      b: 240 } },


  57: {
    symbol: "Hf",
    element: "Hafnium",
    atomicNumber: 72,
    mass: "178.49",
    pos: {
      top: "750px",
      left: "490px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  58: {
    symbol: "Ta",
    element: "Tantalum",
    atomicNumber: 73,
    mass: "180.94",
    pos: {
      top: "750px",
      left: "620px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  59: {
    symbol: "W",
    element: "Tungsten",
    atomicNumber: 74,
    mass: "183.84",
    pos: {
      top: "750px",
      left: "750px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  60: {
    symbol: "Re",
    element: "Rhenium",
    atomicNumber: 75,
    mass: "186.21",
    pos: {
      top: "750px",
      left: "880px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  61: {
    symbol: "Os",
    element: "Osmium",
    atomicNumber: 76,
    mass: "190.23",
    pos: {
      top: "750px",
      left: "1010px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  62: {
    symbol: "Ir",
    element: "Iridium",
    atomicNumber: 77,
    mass: "192.22",
    pos: {
      top: "750px",
      left: "1140px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  63: {
    symbol: "Pt",
    element: "Platinum",
    atomicNumber: 78,
    mass: "195.08",
    pos: {
      top: "750px",
      left: "1270px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  64: {
    symbol: "Au",
    element: "Gold",
    atomicNumber: 79,
    mass: "196.96",
    pos: {
      top: "750px",
      left: "1400px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  65: {
    symbol: "Hg",
    element: "Mercury",
    atomicNumber: 80,
    mass: "200.59",
    pos: {
      top: "750px",
      left: "1530px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  66: {
    symbol: "Tl",
    element: "Thallium",
    atomicNumber: 81,
    mass: "204.38",
    pos: {
      top: "750px",
      left: "1660px" },

    color: "rgba(84, 217, 149, 1)",
    shapeColors: {
      r: 90,
      g: 220,
      b: 150 } },


  67: {
    symbol: "Pb",
    element: "Lead",
    atomicNumber: 82,
    mass: "207.2",
    pos: {
      top: "750px",
      left: "1790px" },

    color: "rgba(84, 217, 149, 1)",
    shapeColors: {
      r: 90,
      g: 220,
      b: 150 } },


  68: {
    symbol: "Bi",
    element: "Bismuth",
    atomicNumber: 83,
    mass: "208.98",
    pos: {
      top: "750px",
      left: "1920px" },

    color: "rgba(84, 217, 149, 1)",
    shapeColors: {
      r: 90,
      g: 220,
      b: 150 } },


  69: {
    symbol: "Po",
    element: "Polonium",
    atomicNumber: 84,
    mass: "(209)",
    pos: {
      top: "750px",
      left: "2050px" },

    color: "rgba(177, 221, 103, 1)",
    shapeColors: {
      r: 170,
      g: 230,
      b: 100 } },


  70: {
    symbol: "At",
    element: "Astatine",
    atomicNumber: 85,
    mass: "(210)",
    pos: {
      top: "750px",
      left: "2180px" },

    color: "rgba(88, 210, 190, 1)",
    shapeColors: {
      r: 0,
      g: 255,
      b: 200 } },


  71: {
    symbol: "Rn",
    element: "Radon",
    atomicNumber: 86,
    mass: "(222)",
    pos: {
      top: "750px",
      left: "2310px" },

    color: "rgba(88, 176, 222, 1)",
    shapeColors: {
      r: 0,
      g: 155,
      b: 255 } },


  72: {
    symbol: "Fr",
    element: "Francium",
    atomicNumber: 87,
    mass: "(223)",
    pos: {
      top: "880px",
      left: "100px" },

    color: "rgba(224, 84, 75, 1)",
    shapeColors: {
      r: 255,
      g: 0,
      b: 155 } },


  73: {
    symbol: "Ra",
    element: "Radium",
    atomicNumber: 56,
    mass: "(226)",
    pos: {
      top: "880px",
      left: "230px" },

    color: "rgba(255, 229, 79, 1)",
    shapeColors: {
      r: 255,
      g: 255,
      b: 50 } },


  74: {
    symbol: "",
    element: "89-103",
    atomicNumber: "",
    mass: "",
    pos: {
      top: "880px",
      left: "360px" },

    color: "rgba(234, 87, 126, 1)",
    shapeColors: {
      r: 235,
      g: 90,
      b: 130 } },


  75: {
    symbol: "Rf",
    element: "Rutherfordium",
    atomicNumber: "104",
    mass: "(267)",
    pos: {
      top: "880px",
      left: "490px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  76: {
    symbol: "Db",
    element: "Dubnium",
    atomicNumber: "105",
    mass: "(268)",
    pos: {
      top: "880px",
      left: "620px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  77: {
    symbol: "Sg",
    element: "Seaborgium",
    atomicNumber: "106",
    mass: "(271)",
    pos: {
      top: "880px",
      left: "750px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  78: {
    symbol: "Bh",
    element: "Bohrium",
    atomicNumber: "107",
    mass: "(272)",
    pos: {
      top: "880px",
      left: "880px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  79: {
    symbol: "Hs",
    element: "Hassium",
    atomicNumber: "108",
    mass: "(270)",
    pos: {
      top: "880px",
      left: "1010px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  80: {
    symbol: "Mt",
    element: "Meitnerium",
    atomicNumber: "109",
    mass: "(276)",
    pos: {
      top: "880px",
      left: "1140px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  81: {
    symbol: "Ds",
    element: "Damstadtium",
    atomicNumber: "110",
    mass: "(281)",
    pos: {
      top: "880px",
      left: "1270px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  82: {
    symbol: "Rg",
    element: "Roentgenium",
    atomicNumber: "111",
    mass: "(280)",
    pos: {
      top: "880px",
      left: "1400px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  83: {
    symbol: "Cn",
    element: "Copernicium",
    atomicNumber: "111",
    mass: "(280)",
    pos: {
      top: "880px",
      left: "1530px" },

    color: "rgba(231, 77, 53, 1)",
    shapeColors: {
      r: 235,
      g: 80,
      b: 55 } },


  84: {
    symbol: "Uut",
    element: "Ununtrium",
    atomicNumber: 113,
    mass: "(284)",
    pos: {
      top: "880px",
      left: "1660px" },

    color: "rgba(84, 217, 149, 1)",
    shapeColors: {
      r: 90,
      g: 220,
      b: 150 } },


  85: {
    symbol: "Fl",
    element: "Flerovium",
    atomicNumber: 114,
    mass: "(289)",
    pos: {
      top: "880px",
      left: "1790px" },

    color: "rgba(84, 217, 149, 1)",
    shapeColors: {
      r: 90,
      g: 220,
      b: 150 } },


  86: {
    symbol: "Uup",
    element: "Ununpentium",
    atomicNumber: 115,
    mass: "(288)",
    pos: {
      top: "880px",
      left: "1920px" },

    color: "rgba(84, 217, 149, 1)",
    shapeColors: {
      r: 90,
      g: 220,
      b: 150 } },


  88: {
    symbol: "Lv",
    element: "Livermorium",
    atomicNumber: 116,
    mass: "(293)",
    pos: {
      top: "880px",
      left: "2050px" },

    color: "rgba(84, 217, 149, 1)",
    shapeColors: {
      r: 90,
      g: 220,
      b: 150 } },


  89: {
    symbol: "Uus",
    element: "Ununseptium",
    atomicNumber: 117,
    mass: "(294)",
    pos: {
      top: "880px",
      left: "2180px" },

    color: "rgba(88, 210, 190, 1)",
    shapeColors: {
      r: 0,
      g: 255,
      b: 200 } },


  90: {
    symbol: "Uuo",
    element: "Ununoctium",
    atomicNumber: 118,
    mass: "(294)",
    pos: {
      top: "880px",
      left: "2310px" },

    color: "rgba(88, 176, 222, 1)",
    shapeColors: {
      r: 0,
      g: 155,
      b: 255 } },


  91: {
    symbol: "La",
    element: "Lanthanum",
    atomicNumber: "57",
    mass: "138.90",
    pos: {
      top: "1140px",
      left: "490px" },

    color: "rgba(124, 80, 230, 1)",
    shapeColors: {
      r: 135,
      g: 80,
      b: 240 } },


  92: {
    symbol: "Ce",
    element: "Cerium",
    atomicNumber: "58",
    mass: "140.12",
    pos: {
      top: "1140px",
      left: "620px" },

    color: "rgba(124, 80, 230, 1)",
    shapeColors: {
      r: 135,
      g: 80,
      b: 240 } },


  93: {
    symbol: "Pr",
    element: "Praseodymi",
    atomicNumber: "59",
    mass: "140.90",
    pos: {
      top: "1140px",
      left: "750px" },

    color: "rgba(124, 80, 230, 1)",
    shapeColors: {
      r: 135,
      g: 80,
      b: 240 } },


  94: {
    symbol: "Nd",
    element: "Neodymium",
    atomicNumber: "60",
    mass: "144.24",
    pos: {
      top: "1140px",
      left: "880px" },

    color: "rgba(124, 80, 230, 1)",
    shapeColors: {
      r: 135,
      g: 80,
      b: 240 } },


  95: {
    symbol: "Pm",
    element: "Promethium",
    atomicNumber: "61",
    mass: "(145)",
    pos: {
      top: "1140px",
      left: "1010px" },

    color: "rgba(124, 80, 230, 1)",
    shapeColors: {
      r: 135,
      g: 80,
      b: 240 } },


  96: {
    symbol: "Sm",
    element: "Samarium",
    atomicNumber: "62",
    mass: "150.36",
    pos: {
      top: "1140px",
      left: "1140px" },

    color: "rgba(124, 80, 230, 1)",
    shapeColors: {
      r: 135,
      g: 80,
      b: 240 } },


  97: {
    symbol: "Eu",
    element: "Europium",
    atomicNumber: "63",
    mass: "151.96",
    pos: {
      top: "1140px",
      left: "1270px" },

    color: "rgba(124, 80, 230, 1)",
    shapeColors: {
      r: 135,
      g: 80,
      b: 240 } },


  98: {
    symbol: "Gd",
    element: "Gadolinium",
    atomicNumber: "64",
    mass: "157.25",
    pos: {
      top: "1140px",
      left: "1400px" },

    color: "rgba(124, 80, 230, 1)",
    shapeColors: {
      r: 135,
      g: 80,
      b: 240 } },


  99: {
    symbol: "Tb",
    element: "Terbium",
    atomicNumber: "65",
    mass: "158.92",
    pos: {
      top: "1140px",
      left: "1530px" },

    color: "rgba(124, 80, 230, 1)",
    shapeColors: {
      r: 135,
      g: 80,
      b: 240 } },


  100: {
    symbol: "Dy",
    element: "Dysprosium",
    atomicNumber: "66",
    mass: "162.50",
    pos: {
      top: "1140px",
      left: "1660px" },

    color: "rgba(124, 80, 230, 1)",
    shapeColors: {
      r: 135,
      g: 80,
      b: 240 } },


  101: {
    symbol: "Ho",
    element: "Holmium",
    atomicNumber: "67",
    mass: "164.93",
    pos: {
      top: "1140px",
      left: "1790px" },

    color: "rgba(124, 80, 230, 1)",
    shapeColors: {
      r: 135,
      g: 80,
      b: 240 } },


  102: {
    symbol: "Er",
    element: "Erbium",
    atomicNumber: "68",
    mass: "167.26",
    pos: {
      top: "1140px",
      left: "1920px" },

    color: "rgba(124, 80, 230, 1)",
    shapeColors: {
      r: 135,
      g: 80,
      b: 240 } },


  103: {
    symbol: "Tm",
    element: "Thulium",
    atomicNumber: "69",
    mass: "168.93",
    pos: {
      top: "1140px",
      left: "2050px" },

    color: "rgba(124, 80, 230, 1)",
    shapeColors: {
      r: 135,
      g: 80,
      b: 240 } },


  104: {
    symbol: "Yb",
    element: "Ytterbium",
    atomicNumber: "70",
    mass: "173.05",
    pos: {
      top: "1140px",
      left: "2180px" },

    color: "rgba(124, 80, 230, 1)",
    shapeColors: {
      r: 135,
      g: 80,
      b: 240 } },


  105: {
    symbol: "Lu",
    element: "Lutetium",
    atomicNumber: "71",
    mass: "174.97",
    pos: {
      top: "1140px",
      left: "2310px" },

    color: "rgba(124, 80, 230, 1)",
    shapeColors: {
      r: 135,
      g: 80,
      b: 240 } },


  106: {
    symbol: "Ac",
    element: "Actinium",
    atomicNumber: "89",
    mass: "(227)",
    pos: {
      top: "1270px",
      left: "490px" },

    color: "rgba(234, 87, 126, 1)",
    shapeColors: {
      r: 235,
      g: 90,
      b: 130 } },


  107: {
    symbol: "Th",
    element: "Thorium",
    atomicNumber: "90",
    mass: "232.04",
    pos: {
      top: "1270px",
      left: "620px" },

    color: "rgba(234, 87, 126, 1)",
    shapeColors: {
      r: 235,
      g: 90,
      b: 130 } },


  108: {
    symbol: "Pa",
    element: "Protactinium",
    atomicNumber: "91",
    mass: "231.03",
    pos: {
      top: "1270px",
      left: "750px" },

    color: "rgba(234, 87, 126, 1)",
    shapeColors: {
      r: 235,
      g: 90,
      b: 130 } },


  109: {
    symbol: "U",
    element: "Uranium",
    atomicNumber: "92",
    mass: "238.02",
    pos: {
      top: "1270px",
      left: "880px" },

    color: "rgba(234, 87, 126, 1)",
    shapeColors: {
      r: 235,
      g: 90,
      b: 130 } },


  110: {
    symbol: "Np",
    element: "Neptunium",
    atomicNumber: "93",
    mass: "(237)",
    pos: {
      top: "1270px",
      left: "1010px" },

    color: "rgba(234, 87, 126, 1)",
    shapeColors: {
      r: 235,
      g: 90,
      b: 130 } },


  111: {
    symbol: "Pu",
    element: "Plutonium",
    atomicNumber: "94",
    mass: "(244)",
    pos: {
      top: "1270px",
      left: "1140px" },

    color: "rgba(234, 87, 126, 1)",
    shapeColors: {
      r: 235,
      g: 90,
      b: 130 } },


  112: {
    symbol: "Am",
    element: "Americium",
    atomicNumber: "95",
    mass: "(243)",
    pos: {
      top: "1270px",
      left: "1270px" },

    color: "rgba(234, 87, 126, 1)",
    shapeColors: {
      r: 235,
      g: 90,
      b: 130 } },


  113: {
    symbol: "Cm",
    element: "Curium",
    atomicNumber: "96",
    mass: "(247)",
    pos: {
      top: "1270px",
      left: "1400px" },

    color: "rgba(234, 87, 126, 1)",
    shapeColors: {
      r: 235,
      g: 90,
      b: 130 } },


  114: {
    symbol: "Bk",
    element: "Berkelium",
    atomicNumber: "97",
    mass: "(247)",
    pos: {
      top: "1270px",
      left: "1530px" },

    color: "rgba(234, 87, 126, 1)",
    shapeColors: {
      r: 235,
      g: 90,
      b: 130 } },


  115: {
    symbol: "Cf",
    element: "Californium",
    atomicNumber: "98",
    mass: "(251)",
    pos: {
      top: "1270px",
      left: "1660px" },

    color: "rgba(234, 87, 126, 1)",
    shapeColors: {
      r: 235,
      g: 90,
      b: 130 } },


  116: {
    symbol: "Es",
    element: "Einsteinium",
    atomicNumber: "99",
    mass: "(252)",
    pos: {
      top: "1270px",
      left: "1790px" },

    color: "rgba(234, 87, 126, 1)",
    shapeColors: {
      r: 235,
      g: 90,
      b: 130 } },


  117: {
    symbol: "Fm",
    element: "Fermium",
    atomicNumber: "100",
    mass: "(257)",
    pos: {
      top: "1270px",
      left: "1920px" },

    color: "rgba(234, 87, 126, 1)",
    shapeColors: {
      r: 235,
      g: 90,
      b: 130 } },


  118: {
    symbol: "Md",
    element: "Mendelevium",
    atomicNumber: "101",
    mass: "(258)",
    pos: {
      top: "1270px",
      left: "2050px" },

    color: "rgba(234, 87, 126, 1)",
    shapeColors: {
      r: 235,
      g: 90,
      b: 130 } },


  119: {
    symbol: "No",
    element: "Nobelium",
    atomicNumber: "102",
    mass: "(259)",
    pos: {
      top: "1270px",
      left: "2180px" },

    color: "rgba(234, 87, 126, 1)",
    shapeColors: {
      r: 235,
      g: 90,
      b: 130 } },


  120: {
    symbol: "Lr",
    element: "Lawrencium",
    atomicNumber: "103",
    mass: "(262)",
    pos: {
      top: "1270px",
      left: "2310px" },

    color: "rgba(234, 87, 126, 1)",
    shapeColors: {
      r: 235,
      g: 90,
      b: 130 } } };




$(document).ready(function () {
  placeElements();
});

function placeElements() {
  var i = 0;
  for (element in elements) {
    var e = elements[element];
    $(".pt").append("<div class='element' style='top: " + e.pos.top + "; left:" + e.pos.left + "; background: " + e.color + "'><canvas></canvas><div class='title'>" + e.symbol + "</div><div class='no'>" + e.atomicNumber + "</div><div class='name'>" + e.element + "<br>[" + e.mass + "]</div></div>");draw(i, e.shapeColors.r, e.shapeColors.g, e.shapeColors.b);
    i++;
  }

  var e = elements[14];
  $(".pt").append("<div class='element' style='top: 100px; left:490px; background: " + e.color + "'><canvas></canvas><div class='title'>" + e.symbol + "</div><div class='no'>" + e.atomicNumber + "</div><div class='name'>" + e.element + "<br>[" + e.mass + "]</div></div>");draw(i, e.shapeColors.r, e.shapeColors.g, e.shapeColors.b);
  i++;

  var e = elements[58];
  $(".pt").append("<div class='element' style='top: 230px; left:620px; background: " + e.color + "'><canvas></canvas><div class='title'>" + e.symbol + "</div><div class='no'>" + e.atomicNumber + "</div><div class='name'>" + e.element + "<br>[" + e.mass + "]</div></div>");draw(i, e.shapeColors.r, e.shapeColors.g, e.shapeColors.b);
}

function draw(k, r, g, b) {
  var c = document.getElementsByTagName('canvas')[k];
  var ctx = c.getContext("2d");

  c.width = 100;
  c.height = 100;

  c.width = c.width;

  var x = Math.random() * 100 - 180;
  var y = Math.random() * 100 - 180;
  for (var i = 0; i < 7; i++) {if (window.CP.shouldStopExecution(0)) break;
    x = Math.random() * 100;
    y = Math.random() * 100;
    ctx.moveTo(x, y);
    ctx.lineTo(Math.random() * 100 + x * 5, Math.random() * 100 + y * 5);
    ctx.lineTo(Math.random() * 100 - x * 5, Math.random() * 100 - y * 5);
    ctx.lineTo(x, y);
    ctx.fillStyle = "rgba(" + Math.round(Math.random() * r) + "," + Math.round(Math.random() * g) + "," + Math.round(Math.random() * b) + "," + Math.random() * 0.1 + ")";
    ctx.fill();
  }window.CP.exitedLoop(0);
}
    </script>
</body>
</html>

4. By Katarzyna Marcinkiewicz

Made by Katarzyna Marcinkiewicz. Periodic table animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #4DB6AC;
}

svg {
  width: 90%;
  max-height: 90%;
}
</style>
</head>
<body>
  <about><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script><script>  (() => {    const element = document.querySelector('about')    if (!element) return        const fontLink = document.createElement('link')    fontLink.href = "https://fonts.googleapis.com/css?family=Atma:600"    fontLink.rel = "stylesheet"    document.head.appendChild(fontLink)    element.innerHTML = `      <style>        about a {          display: flex;          flex-direction: column;          align-items: center;          position: fixed;          z-index: 999;          bottom: 2em;          left: 2em;          padding: 2em;          font: 10px / 1.4 Montserrat, sans-serif;          text-decoration: none;          color: #777;          fill: currentColor;          background-color: rgba(0, 0, 0, .95);          border-radius: 1em;        }        about[light] {          color: #999;          background-color: #eee;        }        about svg { width: 10em }        about p { margin: 1.3em 0 0 }      </style>      <a href="https://saijogeorge.com/css-puns/" target="_blank">        <svg viewBox="0 0 381.3 97">          <mask id="logo-mask">            <rect fill="#444" width="100%" height="100%" />            <g class="js-letter-paths" fill="none" stroke="#fff" stroke-width="18">              <path d="M51.8,39.5c0,0-1.4-16.8-12.1-19.5s-23.3,16.2-23,34.2c0.3,18.5,6.7,25.5,15.7,27.2c9,1.7,18.3-8,19.6-22.1"/>              <path d="M105.8,30c-1.1-6.5-7.5-19.5-20.1-16.4c-12.1,3-17.7,17.6,2.3,32.1c20.3,14.8,14.9,29.6,5.9,33.3s-19.7,3.8-26.5-20"/>              <path d="M155.7,30c-1.1-6.5-7.5-19.5-20.1-16.4c-12.1,3-17.7,17.6,2.3,32.1c20.3,14.8,14.9,29.6,5.9,33.3s-19.7,3.8-26.5-20"/>              <path d="M202,55.7c8.2-0.1,26.2-11.2,25.1-27.7c-1.1-16.5-30-16.9-31.6-8.6c-2.5,13.1-2.8,41.4-0.1,70.3"/>              <path d="M249.5,30.2c0,0-12.1,45.7,8,47S270.2,34,270.2,34"/>              <path stroke-width="25" d="M293.7,85.2c0,0-5.2-34-0.3-43.6c4.3-8.3,18.9-12.5,27-2.5c5.4,6.6-1.3,31-2.5,41.1"/>              <path d="M368.2,45.1c-2.5-12.6-16.8-19.5-23.6-7.4c-9.9,17.4,30.6,19.7,17.2,39.6c-7.2,10.6-21,0.4-22.7-10.1"/>            </g>          </mask>          <g font-family="Atma" font-weight="600" font-size="94.8568px">            <text x="4.3218" y="81.3303" fill="#000" opacity=".3">CSS Puns</text>            <text mask="url(#logo-mask)" x="4.3218" y="81.3303" fill="#fff">CSS Puns</text>          </g>        </svg>        <p>Check out CSS Puns website!</p>      </a>    `    var paths = document.querySelectorAll('.js-letter-paths path');    var letters = [];    Array.from(paths).forEach(function (path) {      var length = path.getTotalLength();      path.style.strokeDasharray = length + ' ' + length;      path.style.strokeDashoffset = length;      letters.push({ path: path, length: length });    });    var tl = new TimelineMax({ repeat: -1 });    tl.staggerTo(paths, 1, {      strokeDashoffset: 0,      ease: Power1.easeInOut    }, .5);    letters.forEach(function (letter) {      tl.to(letter.path, .2, {        strokeDashoffset: -letter.length,        ease: Power1.easeInOut      }, '-=.1');    });  })()</script></about>
<svg viewBox="0 0 600 600">
  <defs>
    <path id="SVGID_1_" d="M600 300c0 165.69-134.31 300-300 300S0 465.69 0 300 134.31 0 300 0s300 134.31 300 300"/>
  </defs>
  <clipPath id="SVGID_2_">
    <use xlink:href="#SVGID_1_" overflow="visible"/>
  </clipPath>
  <g clip-path="url(#SVGID_2_)">
    <path d="M600 300c0 165.69-134.31 300-300 300S0 465.69 0 300 134.31 0 300 0s300 134.31 300 300" fill="#80CBC4"/>
    <g id="periodic-table-group">
      <path d="M160.18 410.95h-26.46v-26.13h26.46v26.13z" fill="#EC407A"/>
      <path d="M189.58 410.95h-26.46v-26.13h26.46v26.13z" fill="#EC407A"/>
      <path d="M218.55 410.95h-26.46v-26.13h26.46v26.13z" fill="#EC407A"/>
      <path d="M247.08 410.95h-26.46v-26.13h26.46v26.13z" fill="#EC407A"/>
      <path d="M276.04 410.95h-26.46v-26.13h26.46v26.13z" fill="#EC407A"/>
      <path d="M304.9 410.95h-26.46v-26.13h26.46v26.13z" fill="#EC407A"/>
      <path d="M333.65 410.95h-26.46v-26.13h26.46v26.13z" fill="#EC407A"/>
      <path d="M362.07 410.95h-26.46v-26.13h26.46v26.13z" fill="#EC407A"/>
      <path d="M391.8 410.95h-26.46v-26.13h26.46v26.13z" fill="#EC407A"/>
      <path d="M420.54 410.95h-26.46v-26.13h26.46v26.13z" fill="#EC407A"/>
      <path d="M449.29 410.95h-26.46v-26.13h26.46v26.13z" fill="#EC407A"/>
      <path d="M477.71 410.95h-26.46v-26.13h26.46v26.13z" fill="#EC407A"/>
      <path d="M506.79 410.95h-26.46v-26.13h26.46v26.13z" fill="#EC407A"/>
      <path d="M535.53 410.95h-26.46v-26.13h26.46v26.13z" fill="#EC407A"/>
      <path d="M160.18 439.7h-26.46v-26.13h26.46v26.13z" fill="#F06292"/>
      <path d="M189.58 439.7h-26.46v-26.13h26.46v26.13z" fill="#F06292"/>
      <path d="M218.55 439.7h-26.46v-26.13h26.46v26.13z" fill="#F06292"/>
      <path d="M247.4 439.7h-26.46v-26.13h26.46v26.13z" fill="#F06292"/>
      <path d="M276.15 439.7h-26.46v-26.13h26.46v26.13z" fill="#F06292"/>
      <path d="M304.9 439.7h-26.46v-26.13h26.46v26.13z" fill="#F06292"/>
      <path d="M333.65 439.7h-26.46v-26.13h26.46v26.13z" fill="#F06292"/>
      <path d="M362.07 439.7h-26.46v-26.13h26.46v26.13z" fill="#F06292"/>
      <path d="M391.8 439.7h-26.46v-26.13h26.46v26.13z" fill="#F06292"/>
      <path d="M420.54 439.7h-26.46v-26.13h26.46v26.13z" fill="#F06292"/>
      <path d="M449.29 439.7h-26.46v-26.13h26.46v26.13z" fill="#F06292"/>
      <path d="M477.71 439.7h-26.46v-26.13h26.46v26.13z" fill="#F06292"/>
      <path d="M506.79 439.7h-26.46v-26.13h26.46v26.13z" fill="#F06292"/>
      <path d="M535.53 439.7h-26.46v-26.13h26.46v26.13z" fill="#F06292"/>
    </g>
    <g id="periodic-table-elements">
      <path d="M62.18 369.79H35.72v-26.13h26.46v26.13z" fill="#C62828"/>
      <path d="M62.18 340.39H35.72v-26.13h26.46v26.13z" fill="#C62828"/>
      <path d="M62.18 311.64H35.72V285.5h26.46v26.14z" fill="#C62828"/>
      <path d="M62.18 282.89H35.72v-26.13h26.46v26.13z" fill="#C62828"/>
      <path d="M62.18 254.14H35.72v-26.13h26.46v26.13z" fill="#C62828"/>
      <path d="M61.53 225.4H35.06v-26.13h26.46v26.13z" fill="#C62828"/>
      <path d="M61.53 195.99H35.06v-26.13h26.46v26.13z" fill="#3949AB"/>
      <path d="M90.6 369.79H64.14v-26.13H90.6v26.13z" fill="#F57F17"/>
      <path d="M90.6 340.39H64.14v-26.13H90.6v26.13z" fill="#F57F17"/>
      <path d="M90.6 311.64H64.14V285.5H90.6v26.14z" fill="#F57F17"/>
      <path d="M90.6 282.89H64.14v-26.13H90.6v26.13z" fill="#F57F17"/>
      <path d="M90.6 254.14H64.14v-26.13H90.6v26.13z" fill="#F57F17"/>
      <path d="M90.6 225.4H64.14v-26.13H90.6v26.13z" fill="#F57F17"/>
      <path d="M119.35 369.79H92.89v-26.13h26.46v26.13z" fill="#F06292"/>
      <path d="M119.35 340.39H92.89v-26.13h26.46v26.13z" fill="#EC407A"/>
      <path d="M119.35 311.64H92.89V285.5h26.46v26.14z" fill="#FFEE58"/>
      <path d="M119.35 282.89H92.89v-26.13h26.46v26.13z" fill="#FFEE58"/>
      <path d="M160.18 369.79h-26.46v-26.13h26.46v26.13z" fill="#FFEE58"/>
      <path d="M160.18 340.39h-26.46v-26.13h26.46v26.13z" fill="#FFEE58"/>
      <path d="M160.18 311.64h-26.46V285.5h26.46v26.14z" fill="#FFEE58"/>
      <path d="M160.18 282.89h-26.46v-26.13h26.46v26.13z" fill="#FFEE58"/>
      <path d="M188.93 369.79h-26.46v-26.13h26.46v26.13z" fill="#FFEE58"/>
      <path d="M188.93 340.39h-26.46v-26.13h26.46v26.13z" fill="#FFEE58"/>
      <path d="M188.93 311.64h-26.46V285.5h26.46v26.14z" fill="#FFEE58"/>
      <path d="M188.93 282.89h-26.46v-26.13h26.46v26.13z" fill="#FFEE58"/>
      <path d="M218 369.79h-26.46v-26.13H218v26.13z" fill="#FFEE58"/>
      <path d="M218 340.39h-26.46v-26.13H218v26.13z" fill="#FFEE58"/>
      <path d="M218 311.64h-26.46V285.5H218v26.14z" fill="#FFEE58"/>
      <path d="M218 282.89h-26.46v-26.13H218v26.13z" fill="#FFEE58"/>
      <path d="M247.4 369.79h-26.46v-26.13h26.46v26.13z" fill="#FFEE58"/>
      <path d="M247.4 340.39h-26.46v-26.13h26.46v26.13z" fill="#FFEE58"/>
      <path d="M247.4 311.64h-26.46V285.5h26.46v26.14z" fill="#FFEE58"/>
      <path d="M247.4 282.89h-26.46v-26.13h26.46v26.13z" fill="#FFEE58"/>
      <path d="M276.15 369.79h-26.46v-26.13h26.46v26.13z" fill="#FFEE58"/>
      <path d="M276.15 340.39h-26.46v-26.13h26.46v26.13z" fill="#FFEE58"/>
      <path d="M276.15 311.64h-26.46V285.5h26.46v26.14z" fill="#FFEE58"/>
      <path d="M276.15 282.89h-26.46v-26.13h26.46v26.13z" fill="#FFEE58"/>
      <path d="M304.9 369.79h-26.46v-26.13h26.46v26.13z" fill="#FFEE58"/>
      <path d="M304.9 340.39h-26.46v-26.13h26.46v26.13z" fill="#FFEE58"/>
      <path d="M304.9 311.64h-26.46V285.5h26.46v26.14z" fill="#FFEE58"/>
      <path d="M304.9 282.89h-26.46v-26.13h26.46v26.13z" fill="#FFEE58"/>
      <path d="M333.65 369.79h-26.46v-26.13h26.46v26.13z" fill="#FFEE58"/>
      <path d="M333.65 340.39h-26.46v-26.13h26.46v26.13z" fill="#FFEE58"/>
      <path d="M333.65 311.64h-26.46V285.5h26.46v26.14z" fill="#FFEE58"/>
      <path d="M333.65 282.89h-26.46v-26.13h26.46v26.13z" fill="#FFEE58"/>
      <path d="M362.07 369.79h-26.46v-26.13h26.46v26.13z" fill="#FFEE58"/>
      <path d="M362.07 340.39h-26.46v-26.13h26.46v26.13z" fill="#FFEE58"/>
      <path d="M362.07 311.64h-26.46V285.5h26.46v26.14z" fill="#FFEE58"/>
      <path d="M362.07 282.89h-26.46v-26.13h26.46v26.13z" fill="#FFEE58"/>
      <path d="M391.8 369.79h-26.46v-26.13h26.46v26.13z" fill="#FFEE58"/>
      <path d="M391.8 340.39h-26.46v-26.13h26.46v26.13z" fill="#FFEE58"/>
      <path d="M391.8 311.64h-26.46V285.5h26.46v26.14z" fill="#FFEE58"/>
      <path d="M391.8 282.89h-26.46v-26.13h26.46v26.13z" fill="#FFEE58"/>
      <path d="M420.54 369.79h-26.46v-26.13h26.46v26.13z" fill="#7CB342"/>
      <path d="M420.54 340.39h-26.46v-26.13h26.46v26.13z" fill="#7CB342"/>
      <path d="M420.54 311.64h-26.46V285.5h26.46v26.14z" fill="#7CB342"/>
      <path d="M420.54 282.89h-26.46v-26.13h26.46v26.13z" fill="#7CB342"/>
      <path d="M420.54 253.16h-26.46v-26.13h26.46v26.13z" fill="#7CB342"/>
      <path d="M420.54 224.74h-26.46v-26.13h26.46v26.13z" fill="#AB47BC"/>
      <path d="M449.29 369.79h-26.46v-26.13h26.46v26.13z" fill="#7CB342"/>
      <path d="M449.29 340.39h-26.46v-26.13h26.46v26.13z" fill="#7CB342"/>
      <path d="M449.29 311.64h-26.46V285.5h26.46v26.14z" fill="#7CB342"/>
      <path d="M449.29 282.89h-26.46v-26.13h26.46v26.13z" fill="#AB47BC"/>
      <path d="M449.29 253.16h-26.46v-26.13h26.46v26.13z" fill="#AB47BC"/>
      <path d="M449.29 224.74h-26.46v-26.13h26.46v26.13z" fill="#3949AB"/>
      <path d="M477.71 369.79h-26.46v-26.13h26.46v26.13z" fill="#7CB342"/>
      <path d="M477.71 340.39h-26.46v-26.13h26.46v26.13z" fill="#7CB342"/>
      <path d="M477.71 311.64h-26.46V285.5h26.46v26.14z" fill="#AB47BC"/>
      <path d="M477.71 282.89h-26.46v-26.13h26.46v26.13z" fill="#AB47BC"/>
      <path d="M477.71 253.16h-26.46v-26.13h26.46v26.13z" fill="#3949AB"/>
      <path d="M477.71 224.74h-26.46v-26.13h26.46v26.13z" fill="#3949AB"/>
      <path d="M506.79 369.79h-26.46v-26.13h26.46v26.13z" fill="#7CB342"/>
      <path d="M506.79 340.39h-26.46v-26.13h26.46v26.13z" fill="#AB47BC"/>
      <path d="M506.79 311.64h-26.46V285.5h26.46v26.14z" fill="#AB47BC"/>
      <path d="M506.79 282.89h-26.46v-26.13h26.46v26.13z" fill="#3949AB"/>
      <path d="M506.79 253.16h-26.46v-26.13h26.46v26.13z" fill="#3949AB"/>
      <path d="M506.79 224.74h-26.46v-26.13h26.46v26.13z" fill="#3949AB"/>
      <path d="M535.53 369.79h-26.46v-26.13h26.46v26.13z" fill="#0097A7"/>
      <path d="M535.53 340.39h-26.46v-26.13h26.46v26.13z" fill="#0097A7"/>
      <path d="M535.53 311.64h-26.46V285.5h26.46v26.14z" fill="#0097A7"/>
      <path d="M535.53 282.89h-26.46v-26.13h26.46v26.13z" fill="#0097A7"/>
      <path d="M535.53 253.16h-26.46v-26.13h26.46v26.13z" fill="#0097A7"/>
      <path d="M535.53 224.74h-26.46v-26.13h26.46v26.13z" fill="#0097A7"/>
      <path d="M564.94 369.79h-26.46v-26.13h26.46v26.13z" fill="#00B0FF"/>
      <path d="M564.94 340.39h-26.46v-26.13h26.46v26.13z" fill="#00B0FF"/>
      <path d="M564.94 311.64h-26.46V285.5h26.46v26.14z" fill="#00B0FF"/>
      <path d="M564.94 282.89h-26.46v-26.13h26.46v26.13z" fill="#00B0FF"/>
      <path d="M564.94 253.16h-26.46v-26.13h26.46v26.13z" fill="#00B0FF"/>
      <path d="M564.94 224.74h-26.46v-26.13h26.46v26.13z" fill="#00B0FF"/>
      <path d="M564.94 195.99h-26.46v-26.13h26.46v26.13z" fill="#00B0FF"/>
    </g>
  </g>
</svg>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script>
      <script>
const elements = document.querySelectorAll('#periodic-table-elements path');
const elementsGroup = document.querySelectorAll('#periodic-table-group path');

const tlElementsOne = new TimelineMax().
staggerFrom(elements, 1, { x: -600 }, .05).
staggerTo(elements, 1, { x: 600, delay: .5 }, .03);

const tlElementsTwo = new TimelineMax().
staggerFrom(elementsGroup, 1, { y: 600 }, .05).
staggerTo(elementsGroup, 1, { y: 600, delay: 4 }, .05);

new TimelineMax({ repeat: -1 }).
add([tlElementsOne, tlElementsTwo]).
timeScale(1.5);
//# sourceURL=pen.js
    </script>
</body>
</html>

5. By Brian

Made by Brian. Click the top options to highlight elements. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
.periodic-table-wrap {
  
}

.periodic-table { 
  margin: 1em auto;
}

.element {
  min-width: 60px;
  width: 60px;
  height: 60px;
  text-align: center;
  vertical-align: center;
  background: mediumseagreen;
  font-weight: bold;
  color: white;
  font-size: 1.5em;
}

.last-element {
  box-shadow: 0 3px 5px -3px black;
}

.element-ext {
  text-align: center;
  vertical-align: center;
  background: transparent;
  font-size: 1em;
  color: mediumseagreen;
  font-weight: bold;
}

.periodic-table tr .period-number {
  color: mediumseagreen;
  background: white;
  font-weight: bold;
  text-align: center;
  font-size: 1.5em;
}

.group-number {
  color: mediumseagreen;
  background: white;
  vertical-align: bottom;
  text-align: center;
  font-weight: bold;
  font-size: 1.5em;
  height: auto;
}

.table-spacer td {
  height: 40px;
}

.periodic-table .down-arrow {
  font-size: 3em;
  font-weight: bold;
  color: mediumseagreen;
  background: white;
  text-align: center;
  vertical-align: middle;
}

/* ELEMENT PREVIEW */

.element-preview {
  margin: 0 auto;
  width: 160px;
  height: 160px;
  background: white;
  color: mediumseagreen;
  border: 3px solid mediumseagreen;
  font-size: 1.25em;
  box-sizing: padding-box;
  padding: 2px;
  display: none;
  flex-direction: column;
  box-shadow: 0 10px 10px -10px black;
}

.element-symbol {
  align-self: center;
  font-size: 4em;
  font-weight: bold;
  text-align: center;
}

.element-name-weight {
  margin-top: auto;
}

/* ELEMENT TYPE SELECTOR */

.element-types-table {
  text-align: center;
  min-width: 410px;
  height: 170px;
  font-size: 1em;
  font-weight: bold;
  background: white;
}

.metals-heading,
.nonmetals-heading {
  font-size: 1.15em;
  box-shadow: 0 5px 5px -5px black;
}

.element-types-table td {
  width: 50%;
}

input[type=radio] {
  display: none;
}

input[name=element-selector]:checked ~ label {
  color: orange;
  font-weight: bold;
}

.nonmetals {
  color: rgb(100,100,100);
}

.metals {
  color: rgb(60,179,113);
}

.element-types-table button {
  background: mediumseagreen;
  border: none;
  color: white;
  padding: 5px 8px;
  box-shadow: 0 5px 5px -5px black;
}

.element-types-table button:active {
  box-shadow: none;
  transform: scale(.95);
}

.element-types-table button:focus {
  outline: none;
}

/* Group Selector */

.group-number label {
  display: block;
}

input[name=group-selector]:checked ~ label {
  color: white;
  background: orange;
  font-weight: bold;
}

/* Period Selector */

.period-number label {
  display: block;
}

input[name=period-selector]:checked ~ label {
  color: white;
  background: orange;
  font-weight: bold;
}

/* Stairstep Element */

.stairstep-element {
  box-shadow: 2px -2px 2px black;
}

/* --------------------------
HOVERS FOR CURSOR POINTER
-------------------------- */

.period-number label:hover,
.group-number label:hover,
.element-types-table label:hover,
.element:hover {
  cursor: pointer;
}
</style>
</head>
<body>
  <div class="periodic-table-wrap">
  <table class="periodic-table">
    <tr class="group-numbers">
      <td></td>
      <td class="group-number group-heading-1">
        <input type="radio" id="group-1" name="group-selector"/>
        <label for="group-1">1</label>
      </td>
      <td class="group-number group-heading-2">
        <input type="radio" id="group-2" name="group-selector"/>
        <label for="group-2">2</label>
      </td>
      <td class="group-number group-heading-3">
        <input type="radio" id="group-3" name="group-selector"/>
        <label for="group-3">3</label>
      </td>
      <td class="group-number group-heading-4">
        <input type="radio" id="group-4" name="group-selector"/>
        <label for="group-4">4</label>
      </td>
      <td class="group-number group-heading-5">
        <input type="radio" id="group-5" name="group-selector"/>
        <label for="group-5">5</label>
      </td>
      <td class="group-number group-heading-6">
        <input type="radio" id="group-6" name="group-selector"/>
        <label for="group-6">6</label>
      </td>
      <td class="group-number group-heading-7">
        <input type="radio" id="group-7" name="group-selector"/>
        <label for="group-7">7</label>
      </td>
      <td class="group-number group-heading-8">
        <input type="radio" id="group-8" name="group-selector"/>
        <label for="group-8">8</label>
      </td>
      <td class="group-number group-heading-9">
        <input type="radio" id="group-9" name="group-selector"/>
        <label for="group-9">9</label>
      </td>
      <td class="group-number group-heading-10">
        <input type="radio" id="group-10" name="group-selector"/>
        <label for="group-10">10</label>
      </td>
      <td class="group-number group-heading-11">
        <input type="radio" id="group-11" name="group-selector"/>
        <label for="group-11">11</label>
      </td>
      <td class="group-number group-heading-12">
        <input type="radio" id="group-12" name="group-selector"/>
        <label for="group-12">12</label>
      </td>
      <td class="group-number group-heading-13">
        <input type="radio" id="group-13" name="group-selector"/>
        <label for="group-13">13</label>
      </td>
      <td class="group-number group-heading-14">
        <input type="radio" id="group-14" name="group-selector"/>
        <label for="group-14">14</label>
      </td>
      <td class="group-number group-heading-15">
        <input type="radio" id="group-15" name="group-selector"/>
        <label for="group-15">15</label>
      </td>
      <td class="group-number group-heading-16">
        <input type="radio" id="group-16" name="group-selector"/>
        <label for="group-16">16</label>
      </td>
      <td class="group-number group-heading-17">
        <input type="radio" id="group-17" name="group-selector"/>
        <label for="group-17">17</label>
      </td>
      <td class="group-number group-heading-18">
        <input type="radio" id="group-18" name="group-selector"/>
        <label for="group-18">18</label>
      </td>
    </tr>
    <tr class="period period-1">
      <td class="period-number period-heading-1">
        <input type="radio" id="period-1" name="period-selector"/>
        <label for="period-1">1</label>
      </td>
      <td class="element group-1 period-1 nonmetal other-nonmetal">H</td>
      <td style="background:white;"></td>
      <td style="background:white;" rowspan="3" colspan="3">
        <div class="element-preview">
          <div class="element-atomic-number">1</div>
          <div class="element-symbol">H</div>
          <div class="element-name-weight">Hydrogen<br>1.008</div>
        </div>
      </td>
      <td rowspan="3" colspan="7" style="background:white;">
        <table class="element-types-table">
          <tr>
            <th class="nonmetals nonmetals-heading">
              <input type="radio" id="nonmetals" name="element-selector"/>
              <label for="nonmetals">Nonmetals</label>
            </th>
            <th class="metals metals-heading">
              <input type="radio" id="metals" name="element-selector"/>
              <label for="metals">Metals</label>
            </th>
          </tr>
          <tr>
            <td class="nonmetals other-nonmetals-heading">
              <input type="radio" id="other-nonmetals" name="element-selector"/>
              <label for="other-nonmetals">Other Nonmetals</label>
            </td>
            <td class="metals alkali-metals-heading">
              <input type="radio" id="alkali-metals" name="element-selector"/>
              <label for="alkali-metals">Alkali Metals</label>
            </td>
          </tr>
          <tr>
            <td class="nonmetals halogens-heading">
              <input type="radio" id="halogens" name="element-selector"/>
              <label for="halogens">Halogens</label>
            </td>
            <td class="metals alkaline-metals-heading">
              <input type="radio" id="alkaline-metals" name="element-selector"/>
              <label for="alkaline-metals">Alkaline Earth Metals</label>
            </td>
          </tr>
          <tr>
            <td class="nonmetals noble-gases-heading">
              <input type="radio" id="noble-gases" name="element-selector"/>
              <label for="noble-gases">Noble Gases</label>
            </td>
            <td class="metals lanthanides-heading">
              <input type="radio" id="lanthanides" name="element-selector"/>
              <label for="lanthanides">Lanthanides</label>
            </td>
          </tr>
          <tr>
            <td class="metals metalloids-heading" rowspan="2">
              <input type="radio" id="metalloids" name="element-selector"/>
              <label for="metalloids">Metalloids</label>
            </td>
            <td class="metals actinides-heading">
              <input type="radio" id="actinides" name="element-selector"/>
              <label for="actinides">Actinides</label>
            </td>
          </tr>
          <tr>
            <td class="metals transition-metals-heading">
              <input type="radio" id="transition-metals" name="element-selector"/>
              <label for="transition-metals">Transition Metals</label>
            </td>
          </tr>
          <tr>
            <td>
              <button id="reset-selector">Reset Selection</button>
            </td>
            <td class="metals post-transition-metals-heading">
              <input type="radio" id="post-transition-metals" name="element-selector"/>
              <label for="post-transition-metals">Post-Transition Metals</label>
            </td>
          </tr>
        </table>
      </td>
      <td colspan="5" style="background:white;"></td>
      <td class="element group-18 period-1 nonmetal noble-gas">He</td>
    </tr>
    <tr class="period period-2">
      <td class="period-number period-heading-2">
        <input type="radio" id="period-2" name="period-selector"/>
        <label for="period-2">2</label>
      </td>
      <td class="element group-1 period-2 metal alkali-metal">Li</td>
      <td class="element group-2 period-2 metal alkaline-metal">Be</td>
      <td class="element group-13 period-2 metalloid">B</td>
      <td class="element group-14 period-2 nonmetal other-nonmetal">C</td>
      <td class="element group-15 period-2 nonmetal other-nonmetal">N</td>
      <td class="element group-16 period-2 nonmetal other-nonmetal">O</td>
      <td class="element group-17 period-2 nonmetal halogen">F</td>
      <td class="element group-18 period-2 nonmetal noble-gas">Ne</td>
    </tr>
    <tr class="period period-3">
      <td class="period-number period-heading-3">
        <input type="radio" id="period-3" name="period-selector"/>
        <label for="period-3">3</label>
      </td>
      <td class="element group-1 period-3 metal alkali-metal">Na</td>
      <td class="element group-2 period-3 metal alkaline-metal">Mg</td>
      <td class="element group-13 period-3 metal post-transition-metal stairstep-element">Al</td>
      <td class="element group-14 period-3 metalloid">Si</td>
      <td class="element group-15 period-3 nonmetal other-nonmetal">P</td>
      <td class="element group-16 period-3 nonmetal other-nonmetal">S</td>
      <td class="element group-17 period-3 nonmetal halogen">Cl</td>
      <td class="element group-18 period-3 nonmetal noble-gas">Ar</td>
    </tr>
    <tr class="period period-4">
      <td class="period-number period-heading-4">
        <input type="radio" id="period-4" name="period-selector"/>
        <label for="period-4">4</label>
      </td>
      <td class="element group-1 period-4 metal alkali-metal">K</td>
      <td class="element group-2 period-4 metal alkaline-metal">Ca</td>
      <td class="element group-3 period-4 metal transition-metal">Sc</td>
      <td class="element group-4 period-4 metal transition-metal">Ti</td>
      <td class="element group-5 period-4 metal transition-metal">V</td>
      <td class="element group-6 period-4 metal transition-metal">Cr</td>
      <td class="element group-7 period-4 metal transition-metal">Mn</td>
      <td class="element group-8 period-4 metal transition-metal">Fe</td>
      <td class="element group-9 period-4 metal transition-metal">Co</td>
      <td class="element group-10 period-4 metal transition-metal">Ni</td>
      <td class="element group-11 period-4 metal transition-metal">Cu</td>
      <td class="element group-12 period-4 metal transition-metal">Zn</td>
      <td class="element group-13 period-4 metal post-transition-metal">Ga</td>
      <td class="element group-14 period-4 metalloid stairstep-element">Ge</td>
      <td class="element group-15 period-4 metalloid">As</td>
      <td class="element group-16 period-4 nonmetal other-nonmetal">Se</td>
      <td class="element group-17 period-4 nonmetal halogen">Br</td>
      <td class="element group-18 period-4 nonmetal noble-gas">Kr</td>
    </tr>
    <tr class="period period-5">
      <td class="period-number period-heading-5">
        <input type="radio" id="period-5" name="period-selector"/>
        <label for="period-5">5</label>
      </td>
      <td class="element group-1 period-5 metal alkali-metal">Rb</td>
      <td class="element group-2 period-5 metal alkaline-metal">Sr</td>
      <td class="element group-3 period-5 metal last-element transition-metal">Y</td>
      <td class="element group-4 period-5 metal transition-metal">Zr</td>
      <td class="element group-5 period-5 metal transition-metal">Nb</td>
      <td class="element group-6 period-5 metal transition-metal">Mo</td>
      <td class="element group-7 period-5 metal transition-metal">Tc</td>
      <td class="element group-8 period-5 metal transition-metal">Ru</td>
      <td class="element group-9 period-5 metal transition-metal">Rh</td>
      <td class="element group-10 period-5 metal transition-metal">Pd</td>
      <td class="element group-11 period-5 metal transition-metal">Ag</td>
      <td class="element group-12 period-5 metal transition-metal">Cd</td>
      <td class="element group-13 period-5 metal post-transition-metal">In</td>
      <td class="element group-14 period-5 metal post-transition-metal">Sn</td>
      <td class="element group-15 period-5 metalloid stairstep-element">Sb</td>
      <td class="element group-16 period-5 metalloid">Te</td>
      <td class="element group-17 period-5 nonmetal halogen">I</td>
      <td class="element group-18 period-5 nonmetal noble-gas">Xe</td>
    </tr>
    <tr class="period period-6">
      <td class="period-number period-heading-6">
        <input type="radio" id="period-6" name="period-selector"/>
        <label for="period-6">6</label>
      </td>
      <td class="element group-1 period-6 metal alkali-metal">Cs</td>
      <td class="element group-2 period-6 metal alkaline-metal">Ba</td>
      <td class="element-ext" style="background:white;">57-71</td>
      <td class="element group-4 period-6 metal transition-metal">Hf</td>
      <td class="element group-5 period-6 metal transition-metal">Ta</td>
      <td class="element group-6 period-6 metal transition-metal">W</td>
      <td class="element group-7 period-6 metal transition-metal">Re</td>
      <td class="element group-8 period-6 metal transition-metal">Os</td>
      <td class="element group-9 period-6 metal transition-metal">Ir</td>
      <td class="element group-10 period-6 metal transition-metal">Pt</td>
      <td class="element group-11 period-6 metal transition-metal">Au</td>
      <td class="element group-12 period-6 metal transition-metal">Hg</td>
      <td class="element group-13 period-6 metal post-transition-metal">Tl</td>
      <td class="element group-14 period-6 metal post-transition-metal">Pb</td>
      <td class="element group-15 period-6 metal post-transition-metal">Bi</td>
      <td class="element group-16 period-6 metalloid stairstep-element">Po</td>
      <td class="element group-17 period-6 nonmetal halogen">At</td>
      <td class="element group-18 period-6 nonmetal noble-gas">Rn</td>
    </tr>
    <tr class="period period-7">
      <td class="period-number period-heading-7">
        <input type="radio" id="period-7" name="period-selector"/>
        <label for="period-7">7</label>
      </td>
      <td class="element group-1 period-7 last-element metal alkali-metal">Fr</td>
      <td class="element group-2 period-7 last-element metal alkaline-metal">Ra</td>
      <td class="element-ext" style="background:white;">89-103</td>
      <td class="element group-4 period-7 last-element metal transition-metal">Rf</td>
      <td class="element group-5 period-7 last-element metal transition-metal">Db</td>
      <td class="element group-6 period-7 last-element metal transition-metal">Sg</td>
      <td class="element group-7 period-7 last-element metal transition-metal">Bh</td>
      <td class="element group-8 period-7 last-element metal transition-metal">Hs</td>
      <td class="element group-9 period-7 last-element metal transition-metal">Mt</td>
      <td class="element group-10 period-7 last-element metal transition-metal">Ds</td>
      <td class="element group-11 period-7 last-element metal transition-metal">Rg</td>
      <td class="element group-12 period-7 last-element metal transition-metal">Cn</td>
      <td class="element group-13 period-7 last-element metal post-transition-metal">Uut</td>
      <td class="element group-14 period-7 last-element metal post-transition-metal">Fl</td>
      <td class="element group-15 period-7 last-element metal post-transition-metal">Uup</td>
      <td class="element group-16 period-7 last-element metal post-transition-metal">Lv</td>
      <td class="element group-17 period-7 last-element nonmetal halogen">Uus</td>
      <td class="element group-18 period-7 last-element nonmetal noble-gas">Uuo</td>
    </tr>
    <tr class="period table-spacer">
      <td colspan="3" style="background:transparent;"></td>
      <td class="down-arrow">&darr;</td>
    </tr>
    <tr class="period lanthanides">
      <td colspan="3" style="background:white;"></td>
      <td class="element group-3 period-6 metal lanthanide">La</td>
      <td class="element group-3 period-6 metal lanthanide">Ce</td>
      <td class="element group-3 period-6 metal lanthanide">Pr</td>
      <td class="element group-3 period-6 metal lanthanide">Nd</td>
      <td class="element group-3 period-6 metal lanthanide">Pm</td>
      <td class="element group-3 period-6 metal lanthanide">Sm</td>
      <td class="element group-3 period-6 metal lanthanide">Eu</td>
      <td class="element group-3 period-6 metal lanthanide">Gd</td>
      <td class="element group-3 period-6 metal lanthanide">Tb</td>
      <td class="element group-3 period-6 metal lanthanide">Dy</td>
      <td class="element group-3 period-6 metal lanthanide">Ho</td>
      <td class="element group-3 period-6 metal lanthanide">Er</td>
      <td class="element group-3 period-6 metal lanthanide">Tm</td>
      <td class="element group-3 period-6 metal lanthanide">Yb</td>
      <td class="element group-3 period-6 metal lanthanide">Lu</td>
    </tr>
    <tr class="period actinides">
      <td colspan="3" style="background:white;"></td>
      <td class="element group-3 period-7 last-element metal actinide">Ac</td>
      <td class="element group-3 period-7 last-element metal actinide">Th</td>
      <td class="element group-3 period-7 last-element metal actinide">Pa</td>
      <td class="element group-3 period-7 last-element metal actinide">U</td>
      <td class="element group-3 period-7 last-element metal actinide">Np</td>
      <td class="element group-3 period-7 last-element metal actinide">Pu</td>
      <td class="element group-3 period-7 last-element metal actinide">Am</td>
      <td class="element group-3 period-7 last-element metal actinide">Cm</td>
      <td class="element group-3 period-7 last-element metal actinide">Bk</td>
      <td class="element group-3 period-7 last-element metal actinide">Cf</td>
      <td class="element group-3 period-7 last-element metal actinide">Es</td>
      <td class="element group-3 period-7 last-element metal actinide">Fm</td>
      <td class="element group-3 period-7 last-element metal actinide">Md</td>
      <td class="element group-3 period-7 last-element metal actinide">No</td>
      <td class="element group-3 period-7 last-element metal actinide">Lr</td>
    </tr>
  </table>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
      <script>
$(function () {

  // Element Hover Function
  $(".element").mouseenter(function () {
    $(".element-preview").show();
    if ($(this).css("background-color") == "rgb(60, 179, 113)") {
      $(this).css({
        "background": "white",
        "color": "mediumseagreen" });

    } else if ($(this).css("background-color") == "rgb(255, 165, 0)") {
      $(this).css({
        "background": "white",
        "color": "orange" });

    }
  });
  $(".element").mouseleave(function () {
    $(".element-preview").hide();
    if ($(this).css("color") == "rgb(255, 165, 0)") {
      $(this).css({
        "background": "orange",
        "color": "white" });

    } else {
      $(this).css({
        "background": "mediumseagreen",
        "color": "white" });

    }
  });

  // Group & Period Number Functions
  $(".group-number").mouseenter(function () {
    $(this).queue($(this).css({
      "background": "orange",
      "color": "white" }));

  });
  $(".group-number").mouseleave(function () {
    $(this).queue($(this).css({
      "background": "white",
      "color": "mediumseagreen" }));

  });
  $(".period-number").mouseenter(function () {
    $(this).queue($(this).css({
      "background": "orange",
      "color": "white" }));

  });
  $(".period-number").mouseleave(function () {
    $(this).queue($(this).css({
      "background": "white",
      "color": "mediumseagreen" }));

  });

  ///// Element Preview /////
  $(".element").change(function () {
    if ($(".element").css("background-color") == "rgb(0, 0, 0)") {
      $(".element-preview").show();
    }
  });

  ///// Selecting Element Types /////
  // Reset Type Selection Button
  $('#reset-selector').on('click', function () {
    $('input[name$=selector]').prop('checked', function () {
      return this.getAttribute('checked') == 'checked';
    });
    $(".element").css("background", "mediumseagreen");
  });
  // Nonmetals
  $(".nonmetals-heading").change(function () {
    if ($(this).is(':checked')) {
      $(".nonmetal").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".nonmetal").css("background", "orange");
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Metals
  $(".metals-heading").change(function () {
    if ($(this).is(':checked')) {
      $(".metal").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".metal").css("background", "orange");
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Other Nonmetals
  $(".other-nonmetals-heading").change(function () {
    if ($(this).is(':checked')) {
      $(".other-nonmetal").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".other-nonmetal").css("background", "orange");
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Halogens
  $(".halogens-heading").change(function () {
    if ($(this).is(':checked')) {
      $(".halogen").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".halogen").css("background", "orange");
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Noble Gases
  $(".noble-gases-heading").change(function () {
    if ($(this).is(':checked')) {
      $(".noble-gas").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".noble-gas").css("background", "orange");
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Metalloids
  $(".metalloids-heading").change(function () {
    if ($(this).is(':checked')) {
      $(".metalloid").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".metalloid").css("background", "orange");
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Alkali Metals
  $(".alkali-metals-heading").change(function () {
    if ($(this).is(':checked')) {
      $(".alkali-metal").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".alkali-metal").css("background", "orange");
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Alkaline Metals
  $(".alkaline-metals-heading").change(function () {
    if ($(this).is(':checked')) {
      $(".alkaline-metal").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".alkaline-metal").css("background", "orange");
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Lanthanides
  $(".lanthanides-heading").change(function () {
    if ($(this).is(':checked')) {
      $(".lanthanide").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".lanthanide").css("background", "orange");
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Actinides
  $(".actinides-heading").change(function () {
    if ($(this).is(':checked')) {
      $(".actinide").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".actinide").css("background", "orange");
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Transition Metals
  $(".transition-metals-heading").change(function () {
    if ($(this).is(':checked')) {
      $(".transition-metal").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".transition-metal").css("background", "orange");
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Post Transition Metals
  $(".post-transition-metals-heading").change(function () {
    if ($(this).is(':checked')) {
      $(".post-transition-metal").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".post-transition-metal").css("background", "orange");
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });


  ///// Selecting Element Groups /////
  // Group 1 
  $(".group-heading-1").change(function () {
    if ($(this).is(':checked')) {
      $(".group-1").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".group-1").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Group 2 
  $(".group-heading-2").change(function () {
    if ($(this).is(':checked')) {
      $(".group-2").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".group-2").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Group 3 
  $(".group-heading-3").change(function () {
    if ($(this).is(':checked')) {
      $(".group-3").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".group-3").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Group 4 
  $(".group-heading-4").change(function () {
    if ($(this).is(':checked')) {
      $(".group-4").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".group-4").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Group 5 
  $(".group-heading-5").change(function () {
    if ($(this).is(':checked')) {
      $(".group-5").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".group-5").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Group 6 
  $(".group-heading-6").change(function () {
    if ($(this).is(':checked')) {
      $(".group-6").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".group-6").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Group 7 
  $(".group-heading-7").change(function () {
    if ($(this).is(':checked')) {
      $(".group-7").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".group-7").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Group 8 
  $(".group-heading-8").change(function () {
    if ($(this).is(':checked')) {
      $(".group-8").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".group-8").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Group 9 
  $(".group-heading-9").change(function () {
    if ($(this).is(':checked')) {
      $(".group-9").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".group-9").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Group 10 
  $(".group-heading-10").change(function () {
    if ($(this).is(':checked')) {
      $(".group-10").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".group-10").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Group 11 
  $(".group-heading-11").change(function () {
    if ($(this).is(':checked')) {
      $(".group-11").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".group-11").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Group 12 
  $(".group-heading-12").change(function () {
    if ($(this).is(':checked')) {
      $(".group-12").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".group-12").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Group 13 
  $(".group-heading-13").change(function () {
    if ($(this).is(':checked')) {
      $(".group-13").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".group-13").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Group 14 
  $(".group-heading-14").change(function () {
    if ($(this).is(':checked')) {
      $(".group-14").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".group-14").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Group 15 
  $(".group-heading-15").change(function () {
    if ($(this).is(':checked')) {
      $(".group-15").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".group-15").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Group 16 
  $(".group-heading-16").change(function () {
    if ($(this).is(':checked')) {
      $(".group-16").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".group-16").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Group 17 
  $(".group-heading-17").change(function () {
    if ($(this).is(':checked')) {
      $(".group-17").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".group-17").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Group 18 
  $(".group-heading-18").change(function () {
    if ($(this).is(':checked')) {
      $(".group-18").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".group-18").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=period-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });

  ///// Selecting Element Periods /////
  // Period 1 
  $(".period-heading-1").change(function () {
    if ($(this).is(':checked')) {
      $(".period-1").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".period-1").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Period 2 
  $(".period-heading-2").change(function () {
    if ($(this).is(':checked')) {
      $(".period-2").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".period-2").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Period 3 
  $(".period-heading-3").change(function () {
    if ($(this).is(':checked')) {
      $(".period-3").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".period-3").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Period 4 
  $(".period-heading-4").change(function () {
    if ($(this).is(':checked')) {
      $(".period-4").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".period-4").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Period 5 
  $(".period-heading-5").change(function () {
    if ($(this).is(':checked')) {
      $(".period-5").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".period-5").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Period 6 
  $(".period-heading-6").change(function () {
    if ($(this).is(':checked')) {
      $(".period-6").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".period-6").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });
  // Period 7 
  $(".period-heading-7").change(function () {
    if ($(this).is(':checked')) {
      $(".period-7").css("background", "mediumseagreen");
    } else {
      $(".element").css("background", "mediumseagreen");
      $(".period-7").css("background", "orange");
      $('input[name=element-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
      $('input[name=group-selector]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';
      });
    }
  });

});
    </script>
</body>
</html>

6. By Tommy Hodgins

Made by Tommy Hodgins. Simple JavaScript periodic table. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>
  </title>
</head>
<body>
  <meta charset=utf-8>
<body id=b>
<center>
<canvas id=a width=1090 height=700>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

      <script>
c = a.getContext("2d");
a.style.maxWidth = "99%";
/*** entry ***/
// ================= //
//     JS1k'16       //
//                   //
//  PERIOD1K TABLE   //
//                   //
//        by         //
//  Maxime Euzière   //
//   Tommy Hodgins   //
// Anton Khlynovskiy //
// ================= //
// --------------
//  Introduction
// --------------
// This demo draws a periodic table of chemical elements on a 1090*700 px canvas, including as much useful information as possible, in 1kb.
// It is drawn from top-left to bottom-right using a single loop and two variables:
// i represents the current atomic number (values: 1-56,71-88,103-118-57-70,89-102).
// j represents the current cell of the periodic table (including "gaps", values: 0-178).
// The cells measure 58*58px and are separated by 2px gutters.
// The page's background is colored in black using the ancestral hack "b.bgColor=0" (b is the page's <body>).
// The coordinates of an element are computed from j: horizontally "j%18*60", vertically "~~(j/18)*60".
// These coordinates are repeated many times in the source code, instead of being set in variables like x and y, to optimize RegPack compression.
for (i = j = b.bgColor = 0; j < 178;) {if (window.CP.shouldStopExecution(0)) break;
  // --------------------
  //  1: Element's group
  // --------------------
  // The periodic table represents the element groups as a background color for each element.
  // According to https://en.wikipedia.org/wiki/Names_for_sets_of_chemical_elements ,
  // There are a ton of different and overlapping element groups, and all periodic tables are a little different because of that.
  // Here's our classification:

  // 0: Alkali metals – Li, Na, K, Rb, Cs, Fr.
  // 1: Alkaline earth metals – Be, Mg, Ca, Sr, Ba, Ra.
  // 2: Halogens – F, Cl, Br, I, At.
  // 3: Noble gases – He, Ne, Ar, Kr, Xe, Rn.
  // 4: Lanthanoids – La, Ce, Pr, Nd, Pm, Sm, Eu, Gd, Tb, Dy, Ho, Er, Tm, Yb, Lu.
  // 5: Actinoids – Ac, Th, Pa, U, Np, Pu, Am, Cm, Bk, Cf, Es, Fm, Md, No, Lr.
  // 6: Transition metals – Elements in groups 3 to 12.
  // 7: poor metals: Al, Ga, In, Sn, Tl, Pb, Bi, Po.
  // 8: Metalloids – B, Si, Ge, As, Sb, Te, At (too).
  // 9: non-metals: H, C, N, O, P, S, Se.
  // These sets are numbered from 0 to 9 and placed in a 118-char string (1 char per element).
  // Each element's char is multiplied by 35 (thanks to duck-typing) to define the hue of the hsl background color.
  // Then the rectangle is drawn

  c.fillStyle = "hsl(" + "9301899923017899230166666666667889230166666666667788230144444444444444466666666677772301555555555555555666666666777723"[i] * 35 + ",48%,48%)";
  c.fillRect(j % 18 * 60, ~~(j / 18) * 60 + 30, 58, 58);
  // -------------------
  //  2. Element's name 
  // -------------------
  // The 118 elements' abbreviated names are drawn in the middle of each cell with a little shadow effect.
  // These names were concatenated in a long string like that:
  // 
  // ["H","He","Li","Be","B","C","N","O","F","Ne","Na","Mg","Al","Si","P","S","Cl","Ar","K","Ca","Sc","Ti",
  // "V","Cr","Mn","Fe","Co","Ni","Cu","Zn","Ga","Ge","As","Se","Br","Kr","Rb","Sr","Y","Zr","Nb","Mo","Tc",
  // "Ru","Rh","Pd","Ag","Cd","In","Sn","Sb","Te","I","Xe","Cs","Ba","La","Ce","Pr","Nd","Pm","Sm","Eu","Gd",
  // "Tb","Dy","Ho","Er","Tm","Yb","Lu","Hf","Ta","W","Re","Os","Ir","Pt","Au","Hg","Tl","Pb","Bi","Po","At",
  // "Rn","Fr","Ra","Ac","Th","Pa","U","Np","Pu","Am","Cm","Bk","Cf","Es","Fm","Md","No","Lr","Rf","Db","Sg",
  // "Bh","Hs","Mt","Ds","Rg","Cn","Uut","Fl","Uup","Lv","Uus","Uuo].join();
  //
  // The resulting string, used in the code below, is split before each uppercase letter to retrieve the array above.
  // The name is drawn two times (in gray and in white) with a small offset to make a text-shadow effect.
  // The two long fillText() statements are repeated on purpose, to optimize RegPack compression.

  // Set font size, centering, shadow color

  c.font = "bold 15pt arial";
  c.textAlign = "center";
  c.fillStyle = "#444";

  // Draw text shadow

  c.fillText("HHeLiBeBCNOFNeNaMgAlSiPSClArKCaScTiVCrMnFeCoNiCuZnGaGeAsSeBrKrRbSrYZrNbMoTcRuRhPdAgCdInSnSbTeIXeCsBaLaCePrNdPmSmEuGdTbDyHoErTmYbLuHfTaWReOsIrPtAuHgTlPbBiPoAtRnFrRaAcThPaUNpPuAmCmBkCfEsFmMdNoLrRfDbSgBhHsMtDsRgCnUutFlUupLvUusUuo".split(/(?=[A-Z])/)[i], j % 18 * 60 + 32, ~~(j / 18) * 60 + 68);

  // Set text color

  c.fillStyle = "#fff";

  // Draw text

  c.fillText("HHeLiBeBCNOFNeNaMgAlSiPSClArKCaScTiVCrMnFeCoNiCuZnGaGeAsSeBrKrRbSrYZrNbMoTcRuRhPdAgCdInSnSbTeIXeCsBaLaCePrNdPmSmEuGdTbDyHoErTmYbLuHfTaWReOsIrPtAuHgTlPbBiPoAtRnFrRaAcThPaUNpPuAmCmBkCfEsFmMdNoLrRfDbSgBhHsMtDsRgCnUutFlUupLvUusUuo".split(/(?=[A-Z])/)[i], j % 18 * 60 + 30, ~~(j / 18) * 60 + 66);
  // Set a smaller font size for the other texts

  c.font = "9pt arial";

  // -------------------------------------------------
  //  3. Element's relative atomic mass and stability
  // -------------------------------------------------
  // The relative atomic mass of an element is the average weight of the element and its isotopes,
  // pondered by their abundance, and compared to 1/12th of the mass of a carbon-12 element. 
  // More information here: https://en.wikipedia.org/wiki/Relative_atomic_mass
  // Atomic masses are rounded to 2 decimals.
  // Each atomic mass is multiplied by 100 to get rid of the decimal part, and placed in this array:

  //  m=[100,400,694,901,1081,1201,1401,1600,1900,2018,2299,2431,2698,2809,3097,3206,3545,3995,3910,4008,
  //  4496,4787,5094,5200,5494,5585,5893,5869,6355,6538,6972,7263,7492,7897,7990,8380,8547,8762,8891,9122,
  //  9291,9595,9791,10107,10291,10642,10787,11241,11482,11871,12176,12760,12690,13129,13291,13733,13891,
  //  14012,14091,14424,14491,15036,15196,15725,15893,16250,16493,16726,16893,17305,17497,17849,18095,
  //  18384,18621,19023,19222,19508,19697,20059,20438,20720,20898,20898,20999,22202,22302,22603,22703,
  //  23204,23104,23803,23705,24406,24306,24707,24707,25108,25208,25710,25810,25910,26612,26712,26813,
  //  27113,27013,27715,27816,28117,28217,28518,28619,28919,28919,29320,29421,29421];

  // Each number of the array is converted into 2 ASCII chars using this JS (ES6) code:
  //   m=m.map((v,i)=>v-i*256+(i>68?570:1100)).map(v=>v.toString(36)).join('');
  // Which leads to:
  //   m="xcykzmy9w5sdqtp8qgmmnbjvk6g5h1cyf9knb66sd8e7fmbgci7x9d1l7z5yawbvb4f9aqegbzau7b6m475j3v5j3j66338l86bvd\
  //      8mcdaidfrkxi7eg9jbo6fegbsjdgxjqjdiqg95v436r6h7e6vax9ca68bb9eofed8641ts4nsp1kprihmtxk3wgmkqljhnij6q0lo\
  //      hctqpel3mbcfotkilrhfioedfl8hci8713"
  // The decoding looks like this, for the i-th element:
  //   mass=parseInt(m.substr(i*2,2),36)+i*256-(i>68?570:1100);

  // The resulting mass is converted to a string and split two chars before the end to make an array separating entire part and decimal part:

  //   mass=(parseInt(m.substr(i*2,2),36)+i*256-(i>68?570:1100)+"").split(/(?=..$)/);

  // This array (eg. ["294",21"]) will be coerted to a string (eg. "294,21") when fillText will try to draw it on the canvas.
  // Uncoment the .join(".") snippets to have points instead of commas. 
  // This approach allows to keep all trailing zeroes in the relative atomic masses.
  // If g was just a floating-point number, it would appear as "16" for Oxygen (element 8) instead of "16,00", or "126.9" for Iodine (element 53) instead of "126,90"
  // The code below uses this techniques, with a lot of repetitions to optimize for RegPack.

  // Stable elements are elements that have at least one stable isotope.
  // "Unstable" elements have isotopes with half-lives between a few minutes and a few million years.
  // Elements 43, 61 and higher than 85 are unstable.
  // Their relative atomic masses are drawn between parenthesis.
  // More information here: https://commons.wikimedia.org/wiki/File:Periodic_Table_Stability_%26_Radioactivity.png
  // And here: https://en.wikipedia.org/wiki/Radioactive_decay
  // Elements 1 to 4 also get an extra decimal (respectively 8, 3, 1 and 2), because their mass is lower than 10 and there was enough room for that.
  c.fillText(

  // Stable elements masses

  i != 42 ^ i != 60 ^ i < 83 ?



  (parseInt('xcykzmy9w5sdqtp8qgmmnbjvk6g5h1cyf9knb66sd8e7fmbgci7x9d1l7z5yawbvb4f9aqegbzau7b6m475j3v5j3j66338l86bvd8mcdaidfrkxi7eg9jbo6fegbsjdgxjqjdiqg95v436r6h7e6vax9ca68bb9eofed8641ts4nsp1kprihmtxk3wgmkqljhnij6q0lohctqpel3mbcfotkilrhfioedfl8hci8713'.substr(i * 2, 2), 36) + i * 256 - (i > 68 ? 570 : 1100) + "").split(/(?=..$)/) /*.join(".")*/

  // Extra decimal for elements 1, 2, 3, 4.
  +
  ["8312"[i]] :



  // Unstable elements masses between parenthesis

  "(" + (parseInt('xcykzmy9w5sdqtp8qgmmnbjvk6g5h1cyf9knb66sd8e7fmbgci7x9d1l7z5yawbvb4f9aqegbzau7b6m475j3v5j3j66338l86bvd8mcdaidfrkxi7eg9jbo6fegbsjdgxjqjdiqg95v436r6h7e6vax9ca68bb9eofed8641ts4nsp1kprihmtxk3wgmkqljhnij6q0lohctqpel3mbcfotkilrhfioedfl8hci8713'.substr(i * 2, 2), 36) + i * 256 - (i > 68 ? 570 : 1100) + "").split(/(?=..$)/) /*.join(".")*/ + ")",
  j % 18 * 60 + 30,
  ~~(j / 18) * 60 + 83);


  // ------------------
  //  4. Atomic number
  // ------------------
  // The atomic number (written on top of each cell) represents the number of protons in the current element.
  // More information: https://en.wikipedia.org/wiki/Atomic_number

  c.fillText(i + 1, j % 18 * 60 + 30, ~~(j / 18) * 60 + 45);

  // ----------
  //  5. next!
  // ----------
  // j offsets:
  // This operation adds the "gaps" in the table.
  // i.e. 17 gaps after element 0, 11 gaps after element 3, etc.
  // If there's no gap, j is just incremented by 1.
  j += { 117: 21, 0: 17, 3: 11, 11: 11, 69: 5 }[i] | 1;
  // i offsets:
  // This operation adds the "jumps" in the atomic numbers.
  // i.e: 15 jumps after element 55, etc.
  // If there's no jump, i is just incremented by 1.
  i += { 117: -61, 87: 15, 69: 18, 55: 15 }[i] | 1;

  // The values are shuffled a little to optimize RegPack compression (note the repetition of "+={117:" and "5}[i]|1")

}
// -------
//  Title
// -------
// Draw the title "PERIOD1K" on top of the canvas, to fill the remaining bytes.
window.CP.exitedLoop(0);c.font = "bold 15pt arial";
c.fillText("PERIOD1K", 545, 50);
// --------------------------
//  Minification and packing
// --------------------------
// - Pass this code through closure compiler, advanced mode (https://closure-compiler.appspot.com).
// - Remove the line breaks and the trailing semicolon generated by closure compiler.
// - Paste the result in RegPack (https://siorki.github.io/regPack.html). Pack with the following setup: 10 / 0 / 1 / "Longest string first"
// - Result: 1024b.
// - Yay!
/*** end of entry ***/
//# sourceURL=pen.js
    </script>
</body>
</html>