ArtExplosion

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,100' rel='stylesheet' type='text/css'>
<style>
body {
    background-color: black;
    font-family: 'Roboto';
    font-weight: 100;
}

</style>
<style type="text/css">

text {
    fill: white;
    letter-spacing: 2em;
}

/*For Image of Red/Dark grey */
/*.st0{clip-path:url(#SVGID_2_);}
.st1{fill:#B0B3AD;}
.st2{fill:#E1E8E6;}
.st3{fill:#9DA19B;}
.st4{fill:#C7CDC9;}
.st5{fill:#19222F;}
.st6{fill:#9D2D26;}*/

/*For Image of Red/Pink Road */
.st0{fill:#E1E9E2;}
.st1{fill:#D6DDD2;}
.st2{fill:#452A29;}
.st3{fill:#784848;}
.st4{fill:#BB4946;}
.st5{fill:#D4928F;}

/*yellow*/
/*.st0{fill:#A8ABB4;}
.st1{fill:#B1B5C0;}
.st2{fill:#9FA2AB;}
.st3{fill:#846A2D;}
.st4{fill:#AD9730;}
.st5{fill:#ABA373;}*/

</style>
</head>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>

var nodes = [],
    links = [],
    width = 1500,
    height = 1500;

var path = d3.geo.path(),
        force = d3.layout.force().size([width, height]);
    //     var svg = d3.select("body").append("svg")
    // .attr("width", width)
    // .attr("height", height);

// var image = "redPink.svg"
var image = "yellow.svg"

d3.xml(image, "image/svg+xml", function(error, xml) {
  if (error) throw error;
  var svgNode = xml
                .getElementsByTagName("svg")[0];

console.log(svgNode);

draw(svgNode);

});

function draw(svgNode) {

var paths = d3.select(svgNode).selectAll("path");

var arrPaths = [];

paths[0].forEach(function(s){
        var me = d3.select(s);
        var feature = {};

arrPaths.push(me.node());
    })

var svg = d3.select("svg").attr("width","3500").attr("height","2000");

svg.append("text")
    .text("Click")
    .attr("x",200)
    .attr("y",20);

var donePaths =  svg.selectAll("path")
                      .data(arrPaths)
                     .enter().append("path")
                      .attr("d",function(d){
                          var me = d3.select(d);
                        //   console.log(d,"rawD");
                          // console.log(me.attr("d"));
                          return me.attr("d")
                      })
                      .attr("class",function(d){
                          return d.classList[0];

});

features = [];

var flager = 0;
// svg.on("click",click);

function click(){

if(flager <= 10){
            donePaths
               .transition()
               // .ease("elastic-out")
               .ease("cubic-out")
               .delay(function(d,i){return (Math.random() * 400) * 20})
               // .duration(500).attr("transform",function(d){return "translate(0,-1000)" + " scale(" + (Math.random()* (5 - .1) + .1) + ")"});
               // node.transition()
               .duration(5500)
               .attr("transform",function(d){
                   // return "translate(" + (Math.floor(Math.random() * 501) - 500) + ",-2700)" +
                    return "translate(" + (0) + ", 0)" +
                   " scale(" + (Math.random()* (20 - .001) + .001) + ")"
                   // "rotate(-180, " + d[0] + ", " + d[1] + ")";
               });
               flager++;
        }

}
    setTimeout(function(){ click(); }, 1000);

}

function getMyCentroid(bbox) {
    console.log(bbox);
    return [bbox.x + bbox.width/2, bbox.y + bbox.height/2];
}

</script>

https://d3js.org/d3.v3.min.js