Alumar

by maccaroo

HTML

<div id="banner">
  <p id="svg-content">N/A</p>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner {
  background: #fff;
  border-radius: 4px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 10 auto;
  width: 580;
  height: 400;
}

JavaScript

var gImgTransform = {
	targetWidth: 580,
	scale: 1,
  dX: 0,
  dY: 0,
  fontSize: 12
};

var site = {
	name: "Alumar",
  code: "SL",
  centers: [
    {
      name: "Port",
      imgTransform: {
        imgWidth: 966,
        dX: -30,
        dY: -20,
        fontSize: 9
      },
      code: 1,
      buildings: [
      
        {
          name: "Alumina Loading",
          code: 1,
          labels: [
            {text: "Alumina", x: 158, y: 226, rot: -18},
            {text: "Loading", x: 167, y: 243, rot: -18}
          ],
          path: {
            type: "poly",
            points: [
              {x: 114, y: 205},
              {x: 254, y: 159},
              {x: 278, y: 230},
              {x: 138, y: 276}
            ]
          }
        },
        
        {
          name: "Raw Material Unloading",
          code: 2,
          labels: [
            {text: "Raw Material", x: 285, y: 184, rot: -18},
            {text: "Unloading", x: 307, y: 198, rot: -18}
          ],
          path: {
            type: "poly",
            points: [
              {x: 254, y: 159},
              {x: 415, y: 106},
              {x: 438, y: 177},
              {x: 278, y: 230},
            ]
          }
        },
        
        {
          name: "Alumina Conveyors Belt",
          code: 3,
          labels: [
            {text: "Alumina", x: 274, y: 385, rot: 45},
            {text: "Conveyors Belt", x: 234, y: 374, rot: 45}
          ],
          path: {
            type: "poly",
            points: [
              {x: 247, y: 335},
              {x: 378, y: 463},
              {x: 348, y: 493},
              {x: 218, y: 364},
            ]
          }
        },
        
        {
          name: "Unloading Conveyors Belt",
          code: 4,
          labels: [
            {text: "Unloading Conveyors", x: 620, y: 225, rot: 57},
            {text: "Belt", x: 648, y: 304, rot: 57}
          ],
          path: {
            type: "poly",
            points: [
         ...