<div class="container">
<canvas id="c" width="1200" height="1200"></canvas>
  </div>

$(function() {
  var canvas = this.__canvas = new fabric.Canvas('c');
  canvas.selection = false;
  canvas.forEachObject(function(o) {
    o.selectable = false;
  });
  canvas.setHeight(1000);
  canvas.preserveObjectStacking = true;
  fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';
  fabric.Object.prototype.transparentCorners = false;
  fabric.Object.prototype.objectCaching = true;
  fabric.Object.prototype.hasControls = fabric.Object.prototype.hasBorders = false;
  fabric.Object.prototype.lockMovementX = fabric.Object.prototype.lockMovementY = true;
  fabric.Object.prototype.toObject = (function(toObject) {
    return function() {
      return fabric.util.object.extend(toObject.call(this), {
        name: this.name
      });
    };
  })(fabric.Object.prototype.toObject);

  fabric.loadSVGFromURL('https://wp.inturbo.ru/vent.svg', function(objects, options) {
    var obj = fabric.util.groupSVGElements(objects, options);
    obj.scale(0.3);

    // load shapes
    for (var i = 1; i < 3; i++) {
      obj.clone(function(i) {
        return function(clone) {
          clone.set({
            left: i * 830 - 630,
            top: 325
          });
          clone.name = "vent";
          canvas.add(clone);
          clone.moveTo(-1);
          animate(clone);
        };
      }(i));
    }
  });
  fabric.loadSVGFromURL('https://wp.inturbo.ru/radiator.svg', function(objects, options) {
    var obj = fabric.util.groupSVGElements(objects, options);
    obj.scale(2.15);

    obj.set({
      left: 255,
      top: 327.5,
      direction: 0,
      shadow: new fabric.Shadow({
        color: 'rgba(0,83,255,1)',
        blur: 15 //60,103,193
      }) /*{ color: 'rgba(60,103,193,0.43)' }*/
    });
    obj.name = "radiator";
    canvas.add(obj);
    obj.bringToFront();
    animate(obj);
  });
  fabric.loadSVGFromURL('https://wp.inturbo.ru/radiator_r.svg', function(objects, options) {
    var obj = fabric.util.groupSVGElements(objects, options);
    obj.scale(2.2);

    obj.set({
      left: 980,
      top: 325,
      direction: 0,
      shadow: new fabric.Shadow({
        color: 'rgba(255,83,0,1)',
        blur: 5 //60,103,193
      }) /*{ color: 'rgba(60,103,193,0.43)' }*/
    });
    obj.name = "radiator";
    canvas.add(obj);
    obj.bringToFront();
    obj.moveTo(100);
    animate(obj);
  });
  fabric.loadSVGFromURL('https://wp.inturbo.ru/left_bulb.svg', function(objects, options) {
    var obj = fabric.util.groupSVGElements(objects, options);
    obj.scale(2.25);

    obj.set({
      left: 475,
      top: 320
    });
    obj.name = "left_bulb";
    canvas.add(obj);
    obj.bringToFront();
  });
  fabric.loadSVGFromURL('https://wp.inturbo.ru/left_bulb_el.svg', function(objects, options) {
    var obj = fabric.util.groupSVGElements(objects, options);
    obj.scale(2.2);

    obj.set({
      left: 405,
      top: 245
    });
    obj.name = "left_bulb_el";
    canvas.add(obj);
    obj.moveTo(100);
  });
  fabric.loadSVGFromURL('https://wp.inturbo.ru/right_bulb.svg', function(objects, options) {
    var obj = fabric.util.groupSVGElements(objects, options);
    obj.scale(2.2);

    obj.set({
      left: 750,
      top: 265
    });
    obj.name = "left_bulb";
    canvas.add(obj);
    obj.bringToFront();
  });
  fabric.loadSVGFromURL('https://wp.inturbo.ru/right_bulb_el.svg', function(objects, options) {
    var obj = fabric.util.groupSVGElements(objects, options);
    obj.scale(2.2);

    obj.set({
      left: 835,
      top: 325
    });
    obj.name = "left_bulb_el";
    canvas.add(obj);
    obj.bringToFront();
    obj.moveTo(101);
  });
  fabric.loadSVGFromURL('https://wp.inturbo.ru/topbulb.svg', function(objects, options) {
    var obj = fabric.util.groupSVGElements(objects, options);
    obj.scale(2.4);

    obj.set({
      left: 630,
      top: 153
    });
    obj.name = "left_bulb_el";
    canvas.add(obj);
    obj.moveTo(-1000);
  });
  fabric.loadSVGFromURL('https://wp.inturbo.ru/man_pump.svg', function(objects, options) {
    var obj = fabric.util.groupSVGElements(objects, options);
    obj.scale(0.034);

    obj.set({
      left: 630,
      top: 192    
    });
    obj.name = "man_pump";
    canvas.add(obj);
    obj.moveTo(200);
  });
  
  fabric.loadSVGFromURL('https://wp.inturbo.ru/platform.svg', function(objects, options) {
    var obj = fabric.util.groupSVGElements(objects, options);
    obj.scale(2.36);

    obj.set({
      left: 555,
      top: 280,
      direction: 0
    });
    obj.name = "platform";
    canvas.add(obj);
    obj.moveTo(100);
    animate(obj);
  });
  
  for (i = 25; i >= 0; i--) {
        dot = new fabric.Circle({
            left:   fabric.util.getRandomInt(600, 660),
            top:    fabric.util.getRandomInt(100, 140),
            radius: 3,
            fill:   "#d35040",
            objectCaching: false
        });
        dot.name="dot_platform"
        canvas.add(dot);
        dot.bringToFront();
        dot.moveTo(12500);
        animate(dot);
    }

  function animate(obj) {
    if (obj.name == "vent") {
      obj.rotate(0).animate({
        angle: 360
      }, {
        duration: 3000,
        onComplete: function() {
          animate(obj)
        },
        easing: function(t, b, c, d) {
          return c * t / d + b
        }
      });
    } else if (obj.name == "platform") {
      obj.animate({
        top: obj.direction?280:250
      }, {
        duration: 4000,
        onComplete: function() {
            obj.direction = !obj.direction;
          animate(obj)
        },
        easing: fabric.util.ease.easeInOutQuad
      });
    } else if (obj.name == "dot_platform") {
        var randomPos;
        do {
            randomPos = obj.left + fabric.util.getRandomInt(-20,20);
        } while (randomPos>660||randomPos<600);
        var randomH;
        //do {
            randomH = obj.direction?obj.top+30+obj.top*0.2:obj.top-30-obj.top*0.2;
        //} while (randomH<80||randomH>140);
      obj.animate({
        top: randomH,
        left: randomPos
      }, {
        duration: 4000,
        onComplete: function() {
            obj.direction = !obj.direction;
          animate(obj)
        },
        easing: fabric.util.ease.easeInOutQuad
      });
    } else if (obj.name == "radiator") {
      obj.animate({
        'shadow.blur': obj.direction ? 12 : 0.1
      }, fabric.util.object.extend({
        onChange: canvas.renderAndResetBound,
        onComplete: function() {
          obj.direction = !obj.direction;
          animate(obj);
        }
      }, {
        easing: fabric.util.ease.easeInOutQuint,
        duration: 3000
      }));
    }
  }

  (function render() {
    canvas.renderAll();
    fabric.util.requestAnimFrame(render);

  })();
});