CSS Motion Typography: Exploding Text (hover)

HTML
<figure class="svg-container"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 475.7 162.3" id="heavy" preserveAspectRatio="xMinYMin meet"> <g> <path d="M72,134.1v0.9h30.5v-8.8C92,127.2,81.9,130.4,72,134.1z"/> <path d="M102.6,113c-10.1,1.5-20.3,2.2-30.5,2.7v18.4c9.9-3.7,20-6.9,30.5-7.8V113z"/> <path d="M57.5,116.3c-10.2,0.4-20.4,1-30.5,2.1V135h30.5V116.3z"/> <path d="M57.5,36.9C47.2,33.6,37,30,26.9,26.2v36.5c10.2-1.3,20.4-2.1,30.5-2.7V36.9z"/> <path d="M102.6,78.7V50.7c-10.2-2.9-20.4-5.9-30.5-9v19.6c7.2,6.5,15.1,11.9,23.5,16.6C97.9,78.1,100.2,78.4,102.6,78.7z"/> <path d="M72,61.2v1.2H57.5V60c-10.2,0.5-20.4,1.4-30.5,2.7v7c23.1,2.6,45.9,5.2,68.6,8.2C87.1,73.1,79.2,67.7,72,61.2z"/> <path d="M102.6,95.6c-10.2,1.1-20.4,2.1-30.5,3.1v16.9c10.2-0.5,20.5-1.2,30.5-2.7V95.6z"/> <path d="M102.6,78.7c-2.3-0.3-4.7-0.6-7-0.9c2.3,1.3,4.7,2.5,7,3.7V78.7z"/> <path d="M95.5,77.8c-22.7-3-45.5-5.6-68.6-8.2v14.1c9.6,4.1,20.3,5.8,30.5,7.9v-2.2H72V91c10.5-3.3,21-4.3,30.5-9.1v-0.4 C100.2,80.3,97.8,79.1,95.5,77.8z"/> <path d="M72,98.8c10.2-1,20.3-2,30.5-3.1V81.9C93,86.7,82.6,87.7,72,91V98.8z"/> <path d="M26.9,103.3c10.2-1.1,20.4-2.1,30.5-3.1v-8.5c-10.2-2.1-20.9-3.9-30.5-7.9V103.3z"/> <path d="M57.5,100.2c-10.2,1-20.4,2-30.5,3.1v15.1c10.1-1.2,20.3-1.7,30.5-2.1V100.2z"/> <path d="M57.5,21.9H26.9v4.3C37,30,47.2,33.6,57.5,36.9V21.9z"/> <path d="M102.6,21.9H72v19.7c10.1,3.2,20.3,6.2,30.5,9V21.9z"/> <path d="M175.2,21.9h-13.1c4.3,4,8.6,7.9,13.1,11.7V21.9z"/> <path d="M162.1,21.9h-43.7v3.3c17.1,8,34.2,16.3,51.8,23.8h5V33.6C170.7,29.8,166.3,25.9,162.1,21.9z"/> <path d="M118.4,55c10.2,2.8,20.3,5.5,30.5,8.1V49h21.2c-17.5-7.6-34.7-15.8-51.8-23.8V55z"/> <path d="M172.4,86.1V69.3c-7.5-1.9-15-3.9-22.5-5.8h-1v-0.3c-10.2-2.7-20.4-5.4-30.5-8.1v25.9c14.4,2.1,28.8,4.3,43.3,6.8 c1.4-0.2,2.9-0.5,4.3-0.7C168.1,86.7,170.3,86.4,172.4,86.1z"/> <path d="M172.4,86.1c-2.1,0.3-4.3,0.5-6.4,0.9c-1.4,0.2-2.9,0.5-4.3,0.7c3.6,0.6,7.2,1.2,10.7,1.9V86.1z"/> <path d="M118.4,80.9v12.9c14.4-1.7,28.8-3.7,43.3-6.1C147.2,85.2,132.8,83,118.4,80.9z"/> <path d="M148.9,90.5h23.5v-0.9c-3.6-0.7-7.2-1.3-10.7-1.9c-14.5,2.4-28.9,4.4-43.3,6.1v16.1c5.3-1.3,10.5-2.9,15.6-4.9 c4.9-1.9,9.9-3.6,14.9-5.1V90.5z"/> <path d="M148.9,107.9v-8c-5,1.5-10,3.2-14.9,5.1c-5.1,2-10.4,3.6-15.6,4.9V129c1.2-0.7,2.4-1.3,3.6-2c13.5-6.7,27.1-13.5,41.2-19.1 H148.9z"/> <path d="M175.2,135v-27.1h-4.6c-7.1,8.4-13,17.6-18.4,27.1H175.2z"/> <path d="M122,127c-1.2,0.7-2.4,1.3-3.6,2v6h33.7c5.5-9.5,11.4-18.7,18.4-27.1h-7.3C149.1,113.5,135.5,120.3,122,127z"/> <path d="M172.4,63.4H150c7.5,2,15,3.9,22.5,5.8V63.4z"/> <path d="M221.8,82.4C221.8,82.4,221.8,82.4,221.8,82.4C221.8,82.4,221.8,82.4,221.8,82.4L221.8,82.4z"/> <path d="M222.3,79.5c-7.1-15.6-10.9-32.4-16.2-48.5l-10.7,44.4c8.8,2.3,17.5,4.7,26.3,7.1c0,0,0,0,0,0L222.3,79.5z"/> <path d="M208.3,21.9l-2.2,9c5.3,16.2,9.1,32.9,16.2,48.5l0.1-0.4l2.1-13.7c0-0.2,0.1-1,0.3-2.1s0.4-3.3,0.7-6.3 c0.2-1.5,0.4-2.9,0.5-4.2c0.2-1.3,0.3-2.4,0.4-3.4l0.4,4.4c0.8-10.6,1.5-21.3,1.9-31.9H208.3z"/> <path d="M245.7,21.9h-16.9c-0.4,10.6-1.1,21.3-1.9,31.9l0.6,6.3c0.2,2.2,0.4,4,0.6,5.5c0.1,1.4,0.3,2.6,0.4,3.4 c0.3,2.2,0.5,4.1,0.7,5.8c5.2-15,11.8-29.3,18.6-43.4L245.7,21.9z"/> <path d="M230.2,83.7l0.4,2.7c0.9-0.3,1.8-0.6,2.7-0.9c7.5-5.1,15-10.3,22.4-15.6l-8.1-38.4c-6.8,14.1-13.3,28.4-18.6,43.4 c0.5,3.9,0.8,6.2,0.8,7C230.1,82.9,230.2,83.6,230.2,83.7z"/> <path d="M255.8,69.8c-7.4,5.3-14.9,10.5-22.4,15.6c8-2.8,16-5.5,24-8.2L255.8,69.8z"/> <path d="M231.8,96.8c11.2,5.6,22.3,11.3,33.4,17.1l-3.7-17.5c-10-1.9-19.8-3.7-30.2-5.6l0.9,6.1H231.8z"/> <path d="M261.5,96.4l-1.7-8.2c-9.6-0.1-19.2-0.1-28.8-0.2l0.4,2.8C241.7,92.6,251.4,94.5,261.5,96.4z"/> <path d="M259.7,88.2l-2.3-11c-8,2.7-16,5.4-24,8.2c-0.9,0.6-1.7,1.2-2.6,1.8l0.1,0.9C240.5,88,250.1,88.1,259.7,88.2z"/> <path d="M233.4,85.4c-0.9,0.3-1.8,0.6-2.7,0.9l0.1,0.8C231.6,86.6,232.5,86,233.4,85.4z"/> <path d="M195.5,75.3l-2.2,9c9.5-0.6,19-1.1,28.4-1.9C213,80,204.3,77.6,195.5,75.3z"/> <path d="M220.5,89.9l1.3-7.5c0,0,0,0,0,0c-9.5,0.8-19,1.3-28.4,1.9l-1.7,6.9C201.2,90.2,210.8,89.8,220.5,89.9z"/> <path d="M218,91c-0.7,1.2-1.3,2.3-2,3.5c1.3-0.1,2.5-0.2,3.8-0.3l0.7-4.3c-9.7-0.2-19.3,0.2-28.8,1.3l-1.9,7.8 c8.5-2.2,17.2-3.8,26.2-4.6C216.7,93.3,217.3,92.2,218,91z"/> <path d="M265.2,113.9c-11.1-5.7-22.2-11.5-33.4-17.1h-0.2c3.4,8.7,6.6,17.5,10.2,26c9.3,2.5,18.3,5.9,27.3,9.3L265.2,113.9z"/> <path d="M241.7,122.8c1.8,4.1,3.6,8.2,5.6,12.2h22.3l-0.6-2.9C260.1,128.7,251.1,125.3,241.7,122.8z"/> <path d="M231.5,96.8h-10.5c-4.8,12.1-7.5,25.1-9.4,38.2h1l2.5-14.4h20.6l0.1,0.8c2,0.4,3.9,0.9,5.8,1.4 C238.1,114.3,234.9,105.6,231.5,96.8z"/> <path d="M235.9,121.4l2.1,13.6h9.3c-2-4-3.8-8.1-5.6-12.2C239.8,122.3,237.9,121.8,235.9,121.4z"/> <path d="M219.3,96.8l0.5-2.7c-1.3,0.1-2.5,0.2-3.8,0.3c-8.2,13.9-17.5,27.2-26.8,40.5h22.5c1.9-13.1,4.6-26.1,9.4-38.2H219.3z"/> <path d="M189.8,99l-8.6,36h8c9.3-13.3,18.6-26.7,26.8-40.5C207,95.2,198.3,96.8,189.8,99z"/> <path d="M358.5,21.9h-33.2l-4.2,21.7c12.2-5.6,24.1-11.9,36.3-17.7L358.5,21.9z"/> <path d="M321.1,43.6l-2.9,15.2c10.8-2.9,21.6-5.7,32.5-8.2l6.7-24.7C345.2,31.7,333.3,38,321.1,43.6z"/> <path d="M270.6,21.9l3.9,17.1c8.4-5.6,16.9-11.3,25.4-17.1H270.6z"/> <path d="M299.9,21.9c-8.5,5.7-17,11.5-25.4,17.1l3.4,14.7c7-5.2,14-10.4,21.1-15.7c1.9-1.5,3.8-2.9,5.7-4.2l-2-11.9H299.9z"/> <path d="M304.7,33.8c-1.9,1.3-3.8,2.8-5.7,4.2c-7.1,5.3-14.1,10.6-21.1,15.7l3.6,15.7c9.3-2.9,18.5-5.6,27.9-8.3 c-0.4-2.4-0.7-4.7-1.1-7L304.7,33.8z"/> <path d="M335.3,106.8c-15.4-1.8-30.9-3.8-46.6-6l3.1,13.7c12.7,4.4,25,9.8,37.1,15.8L335.3,106.8z"/> <path d="M291.8,114.6l3.4,14.9c3.6,1.9,7.3,3.7,10.9,5.5h21.5l1.3-4.6C316.8,124.4,304.5,118.9,291.8,114.6z"/> <path d="M311.8,80c-0.7-6.6-1.5-12.8-2.4-18.8c-9.3,2.6-18.6,5.4-27.9,8.3l2.7,11.8C293.5,81.3,302.6,80.8,311.8,80z"/> <path d="M284.2,81.2l1.7,7.2c9,0.1,17.9,0.3,26.8,0.4c-0.3-3-0.6-6-0.9-8.9C302.6,80.8,293.5,81.3,284.2,81.2z"/> <path d="M350.7,50.6c-10.9,2.5-21.7,5.2-32.5,8.2l-0.1,0.6c-1.1,5.6-2,11.4-2.8,17.3c-0.1,1-0.3,2-0.4,3c9.8-1,19.4-2.6,29.1-4.4 L350.7,50.6z"/> <path d="M314.9,79.7c-0.4,3-0.7,6.1-1,9.2c8.7,0.1,17.5,0.3,26.2,0.4l3.8-14.1C334.3,77.1,324.6,78.6,314.9,79.7z"/> <path d="M313.3,95.7c-0.2-2.3-0.4-4.6-0.6-6.8c-8.9-0.1-17.9-0.3-26.8-0.4l2.8,12.4c15.7,2.2,31.2,4.1,46.6,6l4.8-17.5 c-8.7-0.1-17.5-0.3-26.2-0.4C313.7,91.1,313.5,93.4,313.3,95.7z"/> <path d="M296.5,135h9.6c-3.6-1.8-7.3-3.7-10.9-5.5L296.5,135z"/> <path d="M401.6,21.9h-31.9l8.2,19.1c4-1.4,7.8-3.3,11.1-6c4.7-3.2,9.2-6.5,13.8-9.5L401.6,21.9z"/> <path d="M407.1,38.7l-4.3-13.2c-4.6,3-9.1,6.3-13.8,9.5c-3.3,2.7-7.1,4.5-11.1,6l1.5,3.6c9.3-1.7,18.6-3.3,28-4.6 C407.3,39.5,407.2,39.1,407.1,38.7z"/> <path d="M428.3,118.5c-10.3-1.5-20.4-2.9-30.5-4.2V126c4.3,3,8.7,5.9,13.1,9h17.5V118.5z"/> <path d="M397.8,135h13.1c-4.4-3-8.7-6-13.1-9V135z"/> <path d="M397.8,114.3c10.1,1.3,20.3,2.7,30.5,4.2V90.2c-10.2,0-20.4,0-30.5-0.1V114.3z"/> <path d="M423,21.9l-1.3,3.8c8,5.7,16.4,10.9,24.8,16.2l8.1-20H423z"/> <path d="M421.7,25.7l-4.2,12.8c1.5-0.2,3-0.4,4.5-0.6c-1.5,0.2-3,0.4-4.5,0.6l-0.1,0.3c-0.6,1.9-1.4,4.3-2.2,7.3 c-0.8,2.9-1.8,6.5-2.9,10.5c10.9-3.6,21.9-7.3,32.8-11.1l1.4-3.5C438.1,36.7,429.7,31.5,421.7,25.7z"/> <path d="M407.5,39.9c-9.4,1.3-18.7,2.9-28,4.6l8.5,19.7c8.1-2.4,16.2-4.9,24.3-7.6c-0.7-2.7-1.4-5.6-2.3-8.5 C409.2,45.5,408.4,42.7,407.5,39.9z"/> <path d="M397.8,87.1v3c10.2,0.1,20.4,0.1,30.5,0.1v-3.1l6.2-15.4c-13.5,2.4-27.5,3-40.5,6.7L397.8,87.1z"/> <path d="M412.3,56.9c0-0.1,0-0.1,0-0.2c-8.1,2.6-16.2,5.2-24.3,7.6l6.1,14.2c13-3.7,27-4.3,40.5-6.7l10.6-26.2 c-10.9,3.8-21.8,7.5-32.8,11.1C412.3,56.7,412.3,56.8,412.3,56.9z"/> </g> </svg> </figure>
CSS
.svg-container { display: inline-block; position: relative; width: 100%; padding-bottom: 38%; vertical-align: middle; overflow: hidden; background: #000; } body { background: #000; } svg#heavy path { fill: white; stroke: white; transition: 12s 1.6s cubic-bezier(0, 1, 0, 1); } svg#heavy { display: inline-block; position: absolute; top: 0; left: 0; } @keyframes shake { 0% { transform: translate(3px,5px); } 5% { transform: translate(8px,-5px); } 10% { transform: translate(-3px,2px); } 20% { transform: translate(0px,-5px); } 25% { transform: translate(2px,-5px); } 30% { transform: translate(-3px,-3px); } 30% { transform: translate(0px,0px); } 40% { transform: translate(2px,2px); } 55% { transform: translate(6px,-5px); } 68% { transform: translate(4px,-3px); } 80% { transform: translate(-4px,2px); } 85% { transform: translate(2px,-5px); } 90% { transform: translate(-8px,5px); } 100% { transform: translate(7px,6px); } } figure.svg-container { margin: 0; } figure.svg-container figcaption { position: absolute; bottom: 0; background: #fff; width: 100%; } figure.svg-container:hover svg { animation: shake 1s linear; }
JAVASCRIPT
$( document ).ready(function() { var heavy = document.getElementById("heavy"), dim = heavy.getBBox(), heavyCenterX = dim.width/2, heavyCenterY = dim.height/2, heavyPieces = document.querySelectorAll("svg#heavy path"); for(var i=0;i<heavyPieces.length;i++){ var force = 8, min = -2.5, max = 2.5, randomRot = Math.floor(Math.random() * (max - min + 1)) + min, piece = heavyPieces[i]; piece.id = "fragment"+i; var bbox = piece.getBBox(), pieceCenterX = bbox.x + (bbox.width/2), pieceCenterY = bbox.y + (bbox.height/2), distanceX = Math.abs(heavyCenterX - pieceCenterX), distanceY = Math.abs(heavyCenterY - pieceCenterY); if (pieceCenterX > heavyCenterX) { var moveX = distanceX/force+"px"; } else { moveX = "-"+distanceX/force+"px"; } if (pieceCenterY > heavyCenterY) { var moveY = distanceY/force+"px"; } else { moveY = "-"+distanceY/force+"px"; } document.styleSheets[0].insertRule("svg#heavy:hover #fragment"+i+" { -webkit-transform: translate("+moveX+","+moveY+") rotate("+randomRot+"deg); transform: translate("+moveX+","+moveY+") rotate("+randomRot+"deg) }",1); } var paths = document.getElementsByTagName('path')[0]; heavy.onclick = function() { paths.onhover.call(paths); }; });
Expand for more options Login