Canvas draw

/*Downloaded from https://www.codeseek.co/mfilippovsky/canvas-draw-JNXPVW */
/* /*
 *  Commons
 */
html,
body {
  height: 100%;
}
.page__wrapper {
  min-height: 100%;
  margin-bottom: -50px;
}
* html .page__wrapper {
  height: 100%;
}
.page__buffer {
  height: 50px;
}
body {
  margin: 0;
  font-family: 'Segoe UI', 'Arial', sans-serif;
  font-size: 18px;
  font-weight: 300;
  color: #2f2e2e;
}
html,
body,
#app,
.page {
  height: 100%;
}
.page {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}
html.ReactModal__Html--open,
body.ReactModal__Body--open {
  overflow: hidden;
}
a[href*='.pdf'] {
  padding-left: 35px;
  position: relative;
  color: #208ebc;
}
a[href*='.pdf']:before {
  content: '';
  width: 26px;
  height: 30px;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -14px;
}
button,
input,
optgroup,
select,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
}
/*
 *  Variables
 */
body {
  overflow-x: hidden;
  background: #565656;
}
/*
 *  Mixins
 */
.offers-text__tablets {
  width: 90%;
  text-align: justify;
  margin: 0 auto;
  float: none;
}
.about-learn-more-container {
  padding: 70px 0 10px;
  text-align: center;
}
.about-learn-more-button.about-learn-more-button {
  display: inline-block;
  width: auto;
  padding-right: 30px;
  padding-left: 30px;
  text-decoration: none;
}
.about-learn-more-button.about-learn-more-button:before {
  display: none;
}
.canvas-wrapper {
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 800px) {
  .canvas-wrapper {
    display: none;
  }
}
.infotext {
  position: absolute;
  width: 250px;
  font-size: 18px;
  line-height: 1.4;
  text-align: center;
  color: #fff;
}
.infotext span {
  color: #1de2f9;
}
.team {
  position: relative;
  padding-top: 70px;
  background: #000 url('../img/content/systemz-back.png') no-repeat;
  background-size: cover;
}
@media screen and (max-width: 800px) {
  .team {
    padding-bottom: 70px;
  }
}
.team__cup {
  font-weight: 200;
  line-height: 18px;
  text-align: center;
  color: #fff;
  padding-top: 150px;
  position: absolute;
  top: calc(50% - 75px);
  left: 50px;
}
.team__cup:before {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  content: '';
  top: 0;
  background-image: url('../img/content/cup.png');
  width: 120px;
  height: 125px;
}
@media screen and (max-width: 1200px) {
  .team__cup {
    display: none;
  }
}
.team__desc {
  max-width: 1000px;
  margin: 0 auto -105px;
  padding: 0 20px;
  line-height: 1.7;
  text-align: center;
  color: #fff;
}
@media screen and (max-width: 800px) {
  .team__desc {
    text-align: left;
    margin-bottom: 0;
  }
}
.team-plus {
  display: none;
  margin: 60px 0 0;
}
@media screen and (max-width: 800px) {
  .team-plus {
    display: block;
  }
}
.team-plus__item {
  padding: 0;
  margin-bottom: 15px;
  line-height: 1.6;
  color: #fff;
}
.team-plus__item em {
  color: #1de2f9;
  font-style: normal;
}
.addresses .container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding-top: 60px;
  padding-bottom: 60px;
}
.address {
  margin: 0 30px;
  max-width: 400px;
  text-align: center;
}
@media screen and (max-width: 800px) {
  .address {
    max-width: 100%;
    margin-bottom: 30px;
  }
  .address:last-child {
    margin-bottom: 0;
  }
}
.address__title,
.address__address,
.address__contact {
  margin: 0;
}
.address__title {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
}
.address__address {
  margin: 20px 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  color: #545454;
}
.address__contact {
  margin-bottom: 10px;
}
.address__contact a {
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  color: inherit;
}

/*Downloaded from https://www.codeseek.co/mfilippovsky/canvas-draw-JNXPVW */
var canvas = document.getElementById("infografix");
var context = canvas.getContext("2d");

const stickHeights = [130, 42, 130, 113, 80, 40];
const infoBlockHeights = [0, 40, 0, 40, 0, 70];
const ballRadius = 9;
let   marginLeft = 150;
const marginRight = 100;
const circleRadius = 46;
const orbitHeight = 14;
const textVerticalMargin = 25;
const infoBlockWidth = 250;

let w, h, horizon, lineWidth, step;

function initVars() {
  w = window.innerWidth;
  h = canvas.offsetHeight;

  if (w < 1200) {
    marginLeft = 75;

    if (w < 800) {
      w = 800;
    }
  } else {
    marginLeft = Math.floor(w * 0.3) + 60;
  }

  horizon = Math.floor(h / 2);
  lineWidth = w - marginLeft - marginRight - (2 * circleRadius) - (2 * orbitHeight);

  if (lineWidth < 525) {
    lineWidth = 525;
  }
  step = Math.floor(lineWidth / 5);
}

function drawCircle(top, left, radius, idx) {
      context.beginPath();
      context.arc(left, top, radius, 0, 2 * Math.PI, false);
      context.fill();
      context.stroke();

      context.beginPath();
      if (idx % 2) {
        context.arc(left, top, radius + orbitHeight, Math.PI * 3 / 2, Math.PI * 2, false);
      } else {
        context.arc(left, top, radius + orbitHeight, Math.PI / 2, Math.PI, false);
      }
      context.stroke();
      const vDirection = idx % 2 ? 1 : -1;
      const stickEndY = top - (vDirection * (stickHeights[idx] + ballRadius + circleRadius));

      context.beginPath();
      context.moveTo(left, top);
      context.lineTo(left, stickEndY);
      context.stroke();

      context.beginPath();
      context.arc(left, stickEndY, ballRadius, 0, 2 * Math.PI, false);
      context.fill();
      context.stroke();

      const icon = new Image();
      icon.src = infotext[idx].url;
      icon.onload = () => context.drawImage(icon, left - (icon.width / 2), horizon - (icon.height / 2));

    }

function drawItAll() {
      initVars();
      canvas.width = w;
      canvas.height = h;
      canvas.style.width = `${w}px`;
      canvas.style.height = `${h}px`;

      context.clearRect(0, 0, canvas.width, canvas.height);

      context.beginPath();
      context.strokeStyle = 'white';
      context.fillStyle = 'white';
      context.lineWidth = 1;
      context.moveTo(marginLeft, horizon);
      context.lineTo(marginLeft + orbitHeight + circleRadius + (step * 5) + orbitHeight + circleRadius, horizon);
      context.stroke();

      for (let i = 0; i < 6; i++) {
        const centerLeft = marginLeft + orbitHeight + circleRadius + (step * i);
        drawCircle.call(this, horizon, centerLeft, circleRadius, i);
      }
    }

    drawItAll.call(this);

var infotext = [
    {
      number: '15',
      text: 'years in IT business',
      url: icon1,
    },
    {
      number: '170+',
      text: 'experienced engineers',
      url: icon2,
    },
    {
      number: '300+',
      text: 'completed projects in Italy, Portugal, Russia, Kazakhstan and Ukraine',
      url: icon3,
    },
    {
      number: '',
      text: 'Sales office in Melbourne, Australia',
      url: icon4,
    },
    {
      number: '',
      text: 'Project offices and development centers in Russia, Ukraine and Kazakhstan',
      url: icon5,
    },
    {
      number: '12',
      text: 'partners in Russia, Kazakhstan, Ukraine, Poland, Saudi Arabia',
      url: icon6,
    },
  ]