Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                .pt
  .box
  .box2
  .periodic eriodic
  .table ble
              
            
!

CSS

              
                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;
}
              
            
!

JS

              
                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++){
    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();
  }
}
              
            
!
999px

Console