<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1200 700" style="enable-background:new 0 0 1200 700;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#455FA6;}
	.st1{fill:#FFDE00;}
	.st2{fill:#E73E00;}
	.st3{fill:#009329;}
	.st0 { mix-blend-mode: multiply; }
	.st1 { mix-blend-mode: multiply; }
	.st2 { mix-blend-mode: multiply; }
	.st3 { mix-blend-mode: multiply; }
</style>
<circle id="forma1" class="st0 draggable" cx="933.9" cy="199" r="55"/>
<circle id="forma2" class="st1 draggable" cx="797" cy="200.2" r="55"/>
<path id="forma3" class="st2 draggable" d="M865.4,417.6c46.3,0,83.9-37.6,83.9-83.9h0V299H781.5v34.7h0C781.5,380,819.1,417.6,865.4,417.6z"/>
<path id="forma4" class="st2 draggable" d="M709.9,121.6c-30.4,0-55,24.6-55,55s24.6,55,55,55c0.2,0,0.4,0,0.5,0V121.6
	C710.3,121.6,710.1,121.6,709.9,121.6z"/>
<path id="forma5" class="st2 draggable" d="M1076,176.7c0-30.2-24.4-54.8-54.5-55v110.1C1051.6,231.4,1076,206.9,1076,176.7z"/>
<rect x="845.2" y="-65.4" transform="matrix(6.123234e-17 -1 1 6.123234e-17 778.0427 952.8328)" id="forma6" class="st3 draggable" width="40.4" height="305.5"/>
<circle id="forma7" class="st0 draggable" cx="792.5" cy="601.6" r="85.9"/>
<polygon id="forma8" class="st2 draggable" points="426.3,552.5 291.3,576 347,631.7 402.7,687.4 "/>
<polygon id="forma9" class="st3 draggable" points="323.7,687.4 402.4,575.4 323.7,575.4 244.9,575.4 "/>
<circle id="forma10" class="st2 draggable" cx="678.8" cy="601.6" r="85.9"/>
<circle id="forma11" class="st3 draggable" cx="65.8" cy="439" r="55"/>
<rect x="932.5" y="610.1" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 1905.4119 1297.4757)" id="forma12" class="st2 draggable" width="40.4" height="77.4"/>
<rect x="860.5" y="628.5" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 1547.9196 -213.4923)" id="forma13" class="st3 draggable" width="40.4" height="77.4"/>
<rect x="72.9" y="238.6" id="forma14" class="st3 draggable" width="77.3" height="77.3"/>
<rect x="141.4" y="501.1" transform="matrix(0.7071 0.7071 -0.7071 0.7071 472.9011 14.8159)" id="forma15" class="st1 draggable" width="154.4" height="154.4"/>
<rect x="103.4" y="370.9" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 -62.5304 1022.8123)" id="forma16" class="st0 draggable" width="154.4" height="306.8"/>
<rect x="1027.8" y="638.8" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 1715.1704 -360.2414)" id="forma17" class="st0 draggable" width="19.9" height="77.4"/>
<rect x="1084.8" y="614.4" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -141.1301 965.3421)" id="forma18" class="st1 draggable" width="19.9" height="77.4"/>
<rect x="15.4" y="532.8" id="forma19" class="st2 draggable" width="40.4" height="154.6"/>
<rect x="1099.4" y="541.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -109.4161 972.803)" id="forma20" class="st0 draggable" width="40.4" height="154.6"/>
<rect x="91.4" y="296" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -234.1338 181.251)" id="forma21" class="st1 draggable" width="20.7" height="154.6"/>
<polygon id="forma22" class="st3 draggable" points="539.8,687.4 594.7,687.4 649.6,687.4 539.8,533.2 "/>
<polygon id="forma23" class="st1 draggable" points="530.1,687.4 530.1,632.5 530.1,577.6 375.9,687.4 "/>
<rect x="129.4" y="318.5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 301.7505 -14.2013)" id="forma24" class="st2 draggable" width="77.3" height="77.3"/>
</svg>
body
{
  font-family: 'Open Sans', sans-serif;
  background: #fff;
  text-align: center;
  list-style-position:inside;
}
.draggable{
  cursor: move;
}
svg {
  border: dashed 1px #E53F18;
}
Snap.plugin( function( Snap, Element, Paper, global ) {

    Element.prototype.altDrag = function() {
        this.drag( dragMove, dragStart, dragEnd );
        return this;
    }

    var dragStart = function ( x,y,ev ) {
            this.data('ot', this.transform().local );
    }


    var dragMove = function(dx, dy, ev, x, y) {
            var tdx, tdy;
            var snapInvMatrix = this.transform().diffMatrix.invert();
            snapInvMatrix.e = snapInvMatrix.f = 0;
            tdx = snapInvMatrix.x( dx,dy ); tdy = snapInvMatrix.y( dx,dy );
            this.transform( "t" + [ tdx, tdy ] + this.data('ot')  );

    }

    var dragEnd = function() {
      console.log(Snap(this).getBBox());
    }


});

Snap.plugin( function( Snap, Element, Paper, global ) {
	Element.prototype.addTransform = function( t ) {
		return this.transform( this.transform().localMatrix.toTransformString() + t );
	};
});

  var $forma1 = $('#forma1'),
    $forma2 = $('#forma2'),
    $forma3 = $('#forma3'),
    $forma4 = $('#forma4'),
    $forma5 = $('#forma5'),
    $forma6 = $('#forma6'),
    $forma7 = $('#forma7'),
    $forma8 = $('#forma8'),
    $forma9 = $('#forma9'),
    $forma10 = $('#forma10'),
    $forma11 = $('#forma11'),
    $forma12 = $('#forma12'),
    $forma13 = $('#forma13'),
    $forma14 = $('#forma14'),
    $forma15 = $('#forma15'),
    $forma16 = $('#forma16'),
    $forma17 = $('#forma17'),
    $forma18 = $('#forma18'),
    $forma19 = $('#forma19'),
    $forma20 = $('#forma20'),
    $forma21 = $('#forma21'),
    $forma22 = $('#forma22'),
    $forma23 = $('#forma23'),
    $forma24 = $('#forma24'),
    $forma = $('#forma'),
    $wrap_forma = $('#wrap-forma');

  $wrap_forma.velocity(
  {
   translateY: '-100%',
   translateX: '100%',
   scaleX: '0',
   scaleY: '0'
  },
  {
   duration: 0
  });



Snap("#forma1").altDrag();
Snap("#forma2").altDrag();
Snap("#forma3").altDrag();
Snap("#forma4").altDrag();
Snap("#forma5").altDrag();
Snap("#forma6").altDrag();
Snap("#forma7").altDrag();
Snap("#forma8").altDrag();
Snap("#forma9").altDrag();
Snap("#forma10").altDrag();
Snap("#forma11").altDrag();
Snap("#forma12").altDrag();
Snap("#forma13").altDrag();
Snap("#forma14").altDrag();
Snap("#forma15").altDrag();
Snap("#forma16").altDrag();
Snap("#forma17").altDrag();
Snap("#forma18").altDrag();
Snap("#forma19").altDrag();
Snap("#forma20").altDrag();
Snap("#forma21").altDrag();
Snap("#forma22").altDrag();
Snap("#forma23").altDrag();
Snap("#forma24").altDrag();

// Make blocks rotate 90 deg on each click
        var angle = 22.5;

        $('.draggable').dblclick(function() {

          var shape = Snap(this);
          shape.addTransform('r'+angle);
        });
$('.draggable').dblclick(function() {

          var shape = Snap(this);
          shape.addTransform('r'+angle);
        });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://tandem.blog/wp-content/extern/puzzle.js
  2. https://tandem.blog/wp-content/extern/ui.min.js
  3. https://code.jquery.com/jquery-2.2.4.min.js
  4. https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js
  5. https://cdnjs.cloudflare.com/ajax/libs/velocity/0.7.0/jquery.velocity.min.js