<?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);
});
This Pen doesn't use any external CSS resources.