Snap svg animated rectangle

by rchod

HTML

<script src="//cdn.jsdelivr.net/snap.svg/0.1.0/snap.svg-min.js"></script>

CSS

* {
  box-sizing: border-box;
}

html {
  font-family: Roboto, sans-serif;
}

body {
  background: #f4f4f4;
  color: #ccc;
  margin: 0px;
}

canvas,
img,
svg {
  vertical-align: middle;
}

label {
  cursor: pointer;
  display: block;
}
label > input[type="radio"],
label > input[type="checkbox"] {
  margin-right: 5px;
  position: relative;
  top: -2px;
}

form {
  margin-bottom: 20px;
}

textarea {
  resize: vertical;
}

svg {
  vertical-align: middle;
}

.sidebar {
  background-color: #222;
  float: left;
  height: 100vh;
  overflow-y: auto;
  padding: 20px;
  position: relative;
  width: 0px;
  z-index: 1;
}

.container {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-left: 0px;
  overflow: auto;
}

.container.dark {
  background-color: #444;
}

.field + .field {
  margin-top: 20px;
}

.field > label {
  margin-bottom: 5px;
}

.input {
  background-color: #444;
  border: 0;
  border-radius: 4px;
  color: #fff;
  display: block;
  font-size: inherit;
  outline: 0;
  padding: 10px 14px;
  width: 100%;
}

JavaScript

var s = Snap(500, 200);
const cos30 = Math.sqrt(3)/2;

var Polygon = function(Sx,Sy,r){

	this.a = {x: Sx - cos30*r, y: Sy - r/2};
  this.b = {x: Sx , y: Sy - r};
  this.c = {x: Sx + cos30*r, y: Sy - r/2};
  this.d = {x: Sx + cos30*r, y: Sy + r/2};
  this.e = {x: Sx , y: Sy + r};
  this.f = {x: Sx - cos30*r, y: Sy + r/2};
  
  
}

Polygon.prototype.getPoints = function(){
	return [this.c.x, this.c.y, this.d.x, this.d.y, this.e.x, this.e.y, this.f.x, this.f.y, this.a.x, this.a.y, this.b.x, this.b.y]
}

var Arena = function(Sx, Sy, r, roof, lines){console.log("Arena");
	this.polygons = [];
  for(var i = 0; i < lines; i++){
  	for(var j = 0; j < roof; j++){
    	var pg = new Polygon(Sx + r*j*2, Sy + 3*i*r/2, r );
  		var p = s.paper.polygon(pg.getPoints());
      this.polygons.push(p);
  	}
  }
}




var Sx=75, Sy=60, r=60, roof=3, lines=3;

var arena = new Arena(Sx, Sy, r, roof, lines);