css - How to get glass break effect with text -

i searching script creates glass break effect text using css didn't find anything.

i used

// triangulation using https://github.com/ironwallaby/delaunay    // more check out zachsaucier.com    const two_pi = math.pi * 2;    var images = [],    imageindex = 0;    var image,    imagewidth = 50,    imageheight = 50;    var vertices = [],    indices = [],    prevfrag = [],    fragments = [];    var margin = 50;    var container = document.getelementbyid('container');    var clickposition = [imagewidth * 0.5, imageheight * 0.5];    window.onload = function() {    tweenmax.set(container, {      perspective: 500    });      // images http://www.hdwallpapers.in    var urls = [        'http://i.imgur.com/qddsepk.jpg',        'http://i.imgur.com/oedykah.jpg',        'http://i.imgur.com/llhspcj.jpg',        'http://i.imgur.com/tcz9gqs.jpg'      ],      image,      loaded = 0;    // quick , dirty hack load , display first image asap    images[0] = image = new image();    image.onload = function() {      if (++loaded === 1) {          (var = 1; < 4; i++) {          images[i] = image = new image();            image.src = urls[i];        }        placeimage();      }    };    image.src = urls[0];  };    function placeimage(transitionin) {    image = images[imageindex];      if (++imageindex === images.length) imageindex = 0;      var num = math.random();    if (num < .25) {      image.direction = "left";    } else if (num < .5) {      image.direction = "top";    } else if (num < .75) {      image.direction = "bottom";    } else {      image.direction = "right";    }      container.appendchild(image);    image.style.opacity = 0;      if (transitionin !== false) {      triangulatein();    }  }    function triangulatein(event) {    var box = image.getboundingclientrect(),      top = box.top,      left = box.left;      if (image.direction == "left") {      clickposition[0] = 0;      clickposition[1] = imageheight / 2;    } else if (image.direction == "top") {      clickposition[0] = imagewidth / 2;      clickposition[1] = 0;    } else if (image.direction == "bottom") {      clickposition[0] = imagewidth / 2;      clickposition[1] = imageheight;    } else if (image.direction == "right") {      clickposition[0] = imagewidth;      clickposition[1] = imageheight / 2;    }        triangulate();    build();  }    function triangulate() {    (var = 0; < 40; i++) {      x = -margin + math.random() * (imagewidth + margin * 2);      y = -margin + math.random() * (imageheight + margin * 2);      vertices.push([x, y]);    }    vertices.push([0, 0]);    vertices.push([imagewidth, 0]);    vertices.push([imagewidth, imageheight]);    vertices.push([0, imageheight]);      vertices.foreach(function(v) {      v[0] = clamp(v[0], 0, imagewidth);      v[1] = clamp(v[1], 0, imageheight);    });      indices = delaunay.triangulate(vertices);  }    function build() {    var p0, p1, p2,      fragment;      var tl0 = new timelinemax({      oncomplete: buildcompletehandler    });      (var = 0; < indices.length; += 3) {      p0 = vertices[indices[i + 0]];      p1 = vertices[indices[i + 1]];      p2 = vertices[indices[i + 2]];        fragment = new fragment(p0, p1, p2);        var dx = fragment.centroid[0] - clickposition[0],        dy = fragment.centroid[1] - clickposition[1],        d = math.sqrt(dx * dx + dy * dy),        rx = 30 * sign(dy),        ry = 90 * -sign(dx),        delay = d * 0.003 * randomrange(0.9, 1.1);      fragment.canvas.style.zindex = math.floor(d).tostring();        var tl1 = new timelinemax();        if (image.direction == "left") {        rx = math.abs(rx);        ry = 0;      } else if (image.direction == "top") {        rx = 0;        ry = math.abs(ry);      } else if (image.direction == "bottom") {        rx = 0;        ry = -math.abs(ry);      } else if (image.direction == "right") {        rx = -math.abs(rx);        ry = 0;      }        tl1.from(fragment.canvas, 1, {        z: -50,        rotationx: rx,        rotationy: ry,        scalex: 0,        scaley: 0,        ease: cubic.easein      });      tl1.from(fragment.canvas, 0.4, {        alpha: 0      }, 0.6);        tl0.insert(tl1, delay);        fragments.push(fragment);      container.appendchild(fragment.canvas);    }  }    function buildcompletehandler() {    // add pooling?    image.style.opacity = 1;    image.addeventlistener('transitionend', function catchtrans() {      fragments.foreach(function(f) {        container.removechild(f.canvas);      });        fragments.length = 0;      vertices.length = 0;      indices.length = 0;        placeimage();      this.removeeventlistener('transitionend', catchtrans, false);    }, false);    }    //////////////  // math utils  //////////////    function randomrange(min, max) {    return min + (max - min) * math.random();  }    function clamp(x, min, max) {    return x < min ? min : (x > max ? max : x);  }    function sign(x) {      return x < 0 ? -1 : 1;    } < script >      //////////////    // fragment    //////////////      fragment = function(v0, v1, v2) {      this.v0 = v0;      this.v1 = v1;      this.v2 = v2;        this.computeboundingbox();      this.computecentroid();      this.createcanvas();      this.clip();    };  fragment.prototype = {    computeboundingbox: function() {      var xmin = math.min(this.v0[0], this.v1[0], this.v2[0]),        xmax = math.max(this.v0[0], this.v1[0], this.v2[0]),        ymin = math.min(this.v0[1], this.v1[1], this.v2[1]),        ymax = math.max(this.v0[1], this.v1[1], this.v2[1]);        this.box = {        x: math.round(xmin),        y: math.round(ymin),        w: math.round(xmax - xmin),        h: math.round(ymax - ymin)      };      },    computecentroid: function() {      var x = (this.v0[0] + this.v1[0] + this.v2[0]) / 3,        y = (this.v0[1] + this.v1[1] + this.v2[1]) / 3;        this.centroid = [x, y];    },    createcanvas: function() {      this.canvas = document.createelement('canvas');      this.canvas.width = this.box.w;      this.canvas.height = this.box.h;      this.canvas.style.width = this.box.w + 'px';      this.canvas.style.height = this.box.h + 'px';      this.canvas.style.left = this.box.x + 'px';      this.canvas.style.top = this.box.y + 'px';      this.ctx = this.canvas.getcontext('2d');    },    clip: function() {      this.ctx.save();      this.ctx.translate(-this.box.x, -this.box.y);      this.ctx.beginpath();      this.ctx.moveto(this.v0[0], this.v0[1]);      this.ctx.lineto(this.v1[0], this.v1[1]);      this.ctx.lineto(this.v2[0], this.v2[1]);      this.ctx.closepath();      this.ctx.clip();      this.ctx.drawimage(image, 0, 0);      this.ctx.restore();    }  };

body {    background-color: #000;    margin: 0;    overflow: hidden;  }  canvas {    position: absolute;    backface-visibility: hidden;    -webkit-backface-visibility: hidden;    -moz-backface-visibility: hidden;    -ms-backface-visibility: hidden;  }  img {    position: absolute;    -webkit-transition: opacity .3s;    transition: opacity .3s;  }  #container {    position: absolute;    width: 25px;    height: 25px;    left: 0;    right: 0;    top: 0;    bottom: 0;    margin: auto;  }

<div id="container"></div>

main code here want glassbreak using css

so while don't have specific example of glass breaking css3, recommend kind of effect work glass breaking:

http://www.species-in-pieces.com/

as notice use css3 polygons render out shapes of animals. here's example snip site:

-webkit-clip-path: polygon(44.65% 39.571%, 35.85% 59.429%, 52.85% 50.857%); -webkit-transition-duration: .8s; -moz-transition-duration: .8s;  transition-duration: .8s; 

essentially you'd define webkit transforms through each defined polygon effect. drawbacks of using feature it's supported in webkit browsers, @ same time kind of animation affect pretty hard cross browser support in css.

if have time i'll come around , quick glass breaking fiddle tomorrow