The Brick Layer Story

This is the story inspired by the popular story: “Bricklayer’s Lament”. I created this animation using Scalable Vector Graphics

The XML code is listed below.

<!— ****************************************** * Author: Konstantinos Kr. * Website: http://ikonstantinos.com/ * Title: “Bricklayer’s Lament” *********************************************** → <svg xmlns=”http://www.w3.org/2000/svg" width=”800" height=”500" viewBox=”800 0 820 50" xmlns:xlink=”http://www.w3.org/1999/xlink" > <!— ZOOM OUT|FIRST SCENE → <animate attributeName=”viewBox” values=”800 0 820 50;0 0 2400 1500" begin=”8s” dur=”1s” fill=”freeze”/> <!— ENVIROMENT DEFINITION → <g id=”enviroment”> <line x1=”0" y1=”1252" x2=”2400" y2=”1252" style=”stroke:black;stroke-width:6"/> <rect x=”0" y=”0" width=”2400" height=”1252" fill=”url(#grad1)”/> <circle cx=”0" cy=”0" r=”200" stroke=”black” stroke-width=”2" fill=”yellow”/> </g> <!— GRADIENT COLORS → <defs> <linearGradient id=”grad1" x1=”0%” y1=”0%” x2=”0%” y2=”100%”> <stop offset=”0%” style=”stop-color:blue;stop-opacity:1" /> <stop offset=”100%” style=”stop-color:white;stop-opacity:1" /> </linearGradient> </defs> <defs> <linearGradient id=”roomCol” x1=”0%” y1=”0%” x2=”0%” y2=”100%”> <stop offset=”0%” style=”stop-color:white;stop-opacity:1" /> <stop offset=”100%” style=”stop-color:yellow;stop-opacity:1" /> </linearGradient> </defs> <!— END OF GRADIENT COLORS → <!— TAMPOLINE KID → <defs> <g id=”kid”> <g id=”head”> <path d=”M1700 1000 Q1710 990 1700 980 M1700 980 Q1690 970 1700 960" stroke=”black” stroke-width=”2" fill-opacity=”0"> <animate attributeName=”d” values=” M1700 1000 Q1710 990 1700 980 M1700 980 Q1690 970 1700 960;M1700 1000 Q1690 990 1700 980 M1700 980 Q1710 970 1700 960;M1700 1000 Q1710 990 1700 980 M1700 980 Q1690 970 1700 960;” dur=”1s” repeatCount=”indefinite”/> </path> <circle cx=”1700" cy=”1030" r=”30" stroke=”black” stroke-width=”2" fill=”antiquewhite”> <animate attributeName=”fill” values=”antiquewhite;pink;antiquewhite” dur=”1s” repeatCount=”indefinite” /> </circle> <circle cx=”1690" cy=”1030" r=”5" stroke=”black” stroke-width=”2" fill=”antiquewhite”/> <circle cx=”1710" cy=”1030" r=”5" stroke=”black” stroke-width=”2" fill=”antiquewhite”/> <path d=”M1685 1045 Q1700 1055 1715 1045" stroke=”black” stroke-width=”2" fill-opacity=”0"> <animate attributeName=”d” values=”M1685 1045 Q1700 1055 1715 1045; M1685 1045 Q1700 1045 1715 1045;M1685 1045 Q1700 1035 1715 1045;M1685 1045 Q1700 1055 1715 1045" dur=”1s” repeatCount=”indefinite”/> </path> </g> <g id=”arms”> <line x1=”1700" y1=”1080" x2=”1750" y2=”1080" style=”stroke:black;stroke-width:4"> <animateTransform attributeName=”transform” type=”rotate” values=”0 1700 1080;40 1700 1080;0 1700 1080" dur=”1s” repeatCount=”indefinite”/> </line> <line x1=”1700" y1=”1080" x2=”1650" y2=”1080" style=”stroke:black;stroke-width:4"> <animateTransform attributeName=”transform” type=”rotate” values=”0 1700 1080;-40 1700 1080;0 1700 1080" dur=”1s” repeatCount=”indefinite”/> </line> </g> <line x1=”1700" y1=”1060" x2=”1700" y2=”1120" style=”stroke:black;stroke-width:4"/> <g id=”legs”> <line x1=”1700" y1=”1120" x2=”1660" y2=”1120" style=”stroke:black;stroke-width:4"> <animateTransform attributeName=”transform” type=”rotate” values=”0 1700 1120;-40 1700 1120;0 1700 1120" dur=”1s” repeatCount=”indefinite”/> </line> <line x1=”1700" y1=”1120" x2=”1740" y2=”1120" style=”stroke:black;stroke-width:4"> <animateTransform attributeName=”transform” type=”rotate” values=”0 1700 1120;40 1700 1120;0 1700 1120" dur=”1s” repeatCount=”indefinite”/> </line> </g> </g> </defs> <!— TRAMPOLINE → <defs> <g id=”tranpoline”> <path d=”M1630,1190 Q1705,1140,1780,1190" fill-opacity=”0" style=”stroke:black;stroke-width:4"> <animate attributeName=”d” values=”M1630,1190 Q1705,1140,1780,1190;M1630,1190 Q1705,1210,1780,1190;M1630,1190 Q1705,1140,1780,1190" dur=”1" fill=”freeze” repeatCount=”indefinite”/> </path> <line x1=”1630" y1=”1190" x2=”1630" y2=”1252" style=”stroke:black;stroke-width:10"/> <line x1=”1780" y1=”1190" x2=”1780" y2=”1252" style=”stroke:black;stroke-width:10"/> </g> </defs> <!— BRICKLAYER THAT PUT BRICKS INTO BARREL ON TOP OF THE BUILDING → <defs> <g id=”victim1"> <g id=”head”> <circle cx=”300" cy=”50" r=”40" stroke=”black” stroke-width=”2" fill=”white”/> </g> <g id=”arms”> <line x1=”300" y1=”120" x2=”360" y2=”180" style=”stroke:black;stroke-width:4"> <animate attributeName=”y2" values=”180;100;180" dur=”1.7s” fill=”freeze” repeatCount=”2"/> <animate attributeName=”x2" values=”360;220" begin=”3.4s” dur=”1.7s” fill=”freeze”/> <animate attributeName=”x2" values=”220;200;220" begin=”5.5s” dur=”0.2s” fill=”freeze” repeatCount=”2"/> </line> <line x1=”300" y1=”120" x2=”370" y2=”140" style=”stroke:black;stroke-width:4"> <animate attributeName=”y2" values=”140;80;140" dur=”1.7s” fill=”freeze” repeatCount=”2"/> </line> </g> <line x1=”300" y1=”90" x2=”300" y2=”200" style=”stroke:black;stroke-width:4"/> <g id=”legs”> <line x1=”300" y1=”200" x2=”260" y2=”250" style=”stroke:black;stroke-width:4"> <animate id=”kickAnimation” attributeName=”x2" values=”260;180;260" begin=”6s” dur=”0.8s” fill=”freeze”/> </line> <line x1=”300" y1=”200" x2=”340" y2=”250" style=”stroke:black;stroke-width:4"/> </g> </g> </defs> <!— VICTIM THAT IS BEING LIFTED UP AND DROPPED DOWN BY THE BARREL → <defs> <g id=”victim2"> <g id=”head”> <circle cx=”300" cy=”50" r=”40" stroke=”black” stroke-width=”2" fill=”white”/> <g id=”face” opacity=”0"> <circle cx=”285" cy=”48" r=”5" stroke=”black” stroke-width=”2" fill=”white”/> <circle cx=”315" cy=”48" r=”5" stroke=”black” stroke-width=”2" fill=”white”/> <ellipse cx=”300" cy=”70" rx=”8" ry=”5" stroke=”black” stroke-width=”2" fill=”white”> <animate attributeName=”ry” values=”5;10" begin=”barrelDroping.end+3.5" dur=”0.1s” fill=”freeze”/> </ellipse> <animate attributeName=”opacity” values=”0;1" begin=”barrelDroping.end+3" dur=”0.1s” fill=”freeze”/> <animate id=”shock1" attributeName=”opacity” values=”1;0" begin=”barrelDroping.end+5" dur=”0.1s” fill=”freeze”/> </g> </g> <g id=”arms”> <line x1=”300" y1=”120" x2=”240" y2=”60" style=”stroke:black;stroke-width:4"> <animate attributeName=”x2" from=”240" to=”350" begin=”shock1.end” dur=”1s” fill=”freeze”/> <animate attributeName=”y2" from=”60" to=”-50" begin=”shock1.end” dur=”1s” fill=”freeze”/> </line> <line x1=”300" y1=”120" x2=”230" y2=”180" style=”stroke:black;stroke-width:4"> <animate attributeName=”x2" values=”230;220;230" begin=”barrelDroping.end+2" dur=”1s” fill=”freeze”/> <animate attributeName=”y2" values=”180;100;180" begin=”barrelDroping.end+2" dur=”1s” fill=”freeze”/> </line> </g> <line x1=”300" y1=”90" x2=”300" y2=”200" style=”stroke:black;stroke-width:4"/> <g id=”legs”> <line x1=”300" y1=”200" x2=”260" y2=”250" style=”stroke:black;stroke-width:4"/> <line x1=”300" y1=”200" x2=”340" y2=”250" style=”stroke:black;stroke-width:4"/> </g> </g> </defs> <!— VICTIM THAT LOSE HIS HEAD IN FINAL SCENE → <defs> <g id=”victim3"> <g id=”head”> <circle cx=”560" cy=”1160" r=”40" stroke=”black” stroke-width=”2" fill=”white”/> <g id=”face”> <line x1=”540" y1=”1140" x2=”560" y2=”1150" style=”stroke:black;stroke-width:2"/> <line x1=”540" y1=”1150" x2=”560" y2=”1140" style=”stroke:black;stroke-width:2"/> <line x1=”540" y1=”1170" x2=”560" y2=”1180" style=”stroke:black;stroke-width:2"/> <line x1=”540" y1=”1180" x2=”560" y2=”1170" style=”stroke:black;stroke-width:2"/> <line x1=”580" y1=”1150" x2=”585" y2=”1170" style=”stroke:black;stroke-width:2"/> </g> <animateTransform attributeName=”transform” type=”rotate” values=”360 560 1160;0 560 1160" begin=”explosion3End.end” dur=”1s” repeatCount=”1"/> <animateMotion id=”headRolls” path=”M0,0 Q-20,50,-280,50 M-280, 50 Q-320 50 -310 0 M-310 0 Q-320 50 -260 50" begin=”explosion3End.end” dur=”1s” fill=”freeze” /> </g> <line x1=”600" y1=”1170" x2=”700" y2=”1190" style=”stroke:black;stroke-width:10"/> <line x1=”700" y1=”1190" x2=”750" y2=”1252" style=”stroke:black;stroke-width:8"/> <line x1=”620" y1=”1170" x2=”620" y2=”1050" style=”stroke:black;stroke-width:8"> <animateTransform attributeName=”transform” calcMode=”paced” type=”rotate” values=”0 620 1170;-180 620 1170" begin=”explosion2End.end+2" dur=”1s” fill=”freeze”/> <animate id=”letGoLine” attributeName=”y2" from=”1050" to=”1085" begin=”explosion2End.end+2" dur=”1s” fill=”freeze”/> </line> </g> </defs> <!— BUILDING → <defs> <g id=”building”> <rect x=”800" y=”252" width=”700" height=”1000" style=”fill:white;stroke:black;stroke-width:4;fill:khaki”/> <rect x=”600" y=”232" width=”200" height=”20" style=”fill:white;stroke:black;stroke-width:4"/> <line x1=”620" y1=”232" x2=”620" y2=”252" style=”stroke:black;stroke-width:4"/> <rect x=”900" y=”350" width=”200" height=”200" style=”fill:skyblue;stroke:black;stroke-width:4"/> <line x1=”950" y1=”350" x2=”950" y2=”550" style=”stroke:black;stroke-width:6"/> <line x1=”1050" y1=”350" x2=”1050" y2=”550" style=”stroke:black;stroke-width:6"/> <line x1=”900" y1=”400" x2=”1100" y2=”400" style=”stroke:black;stroke-width:6"/> <line x1=”900" y1=”500" x2=”1100" y2=”500" style=”stroke:black;stroke-width:6"/> <rect x=”1200" y=”350" width=”200" height=”200" style=”fill:white;stroke:black;stroke-width:4"/> <rect x=”1200" y=”350" width=”50" height=”200" style=”fill:pink;stroke:black;stroke-width:4"/> <rect x=”1350" y=”350" width=”50" height=”200" style=”fill:pink;stroke:black;stroke-width:4"/> <rect x=”900" y=”650" width=”200" height=”200" style=”fill:white;stroke:black;stroke-width:4"/> <path d=”M900 650 Q950 800 900 750" fill=”red” stroke=”black” stroke-width=”4"/> <path d=”M900 750 Q950 860 900 850" fill=”red” stroke=”black” stroke-width=”4"/> <path d=”M1100 650 Q1050 800 1100 750" fill=”red” stroke=”black” stroke-width=”4"/> <path d=”M1100 750 Q1050 860 1100 850" fill=”red” stroke=”black” stroke-width=”4"/> <rect x=”1200" y=”650" width=”200" height=”200" style=”fill:url(#roomCol);stroke:black;stroke-width:4"> <animate attributeName=”fill” values=”url(#roomCol);black;url(#roomCol);” dur=”2s” repeatCount=”indefinite”/> </rect> <path d=”M1300 650 L1300 680 L1250 700 L1350 700 L1300 680z” style=”fill:black;stroke:black;stroke-width:4"/> <rect x=”1075" y=”1000" width=”150" height=”250" style=”fill:cadetblue;stroke:black;stroke-width:6"/> <circle cx=”1100" cy=”1125" r=”10" stroke=”black” stroke-width=”5" fill=”red”/> </g> </defs> <!— BARREL → <defs> <g id=”barrel”> <rect x=”850" y=”100" width=”150" height=”150" style=”fill:chocolate;stroke:black;stroke-width:2"/> <line x1=”850" y1=”130" x2=”1000" y2=”130" style=”stroke:black;stroke-width:4"/> <line x1=”850" y1=”160" x2=”1000" y2=”160" style=”stroke:black;stroke-width:4"/> <line x1=”850" y1=”190" x2=”1000" y2=”190" style=”stroke:black;stroke-width:4"/> <line x1=”850" y1=”220" x2=”1000" y2=”220" style=”stroke:black;stroke-width:4"/> <line x1=”850" y1=”250" x2=”925" y2=”250" style=”stroke:black;stroke-width:6"> <animateTransform attributeName=”transform” type=”rotate” values=”100 850 250; 80 850 250; 100 850 250" begin=”explosion1.end” dur=”1s” repeatCount=”indefinite”/> </line> <line x1=”925" y1=”250" x2=”1000" y2=”250" style=”stroke:black;stroke-width:6"> <animateTransform attributeName=”transform” type=”rotate” values=”-100 1000 250; -80 1000 250; -100 1000 250" begin=”explosion1.end” dur=”1s” repeatCount=”indefinite”/> </line> </g> </defs> <!— SMASHED BARREL → <defs> <g id=”SmashedBarrel” opacity=”0" transform=”rotate(30 700 1200)”> <rect x=”550" y=”1040" width=”150" height=”150" fill=”chocolate” stroke=”black” stroke-width=”2"/> <line x1=”550" y1=”1070" x2=”700" y2=”1070" style=”stroke:black;stroke-width:4"/> <line x1=”550" y1=”1100" x2=”700" y2=”1100" style=”stroke:black;stroke-width:4"/> <line x1=”550" y1=”1130" x2=”700" y2=”1130" style=”stroke:black;stroke-width:4"/> <line x1=”550" y1=”1160" x2=”700" y2=”1160" style=”stroke:black;stroke-width:4"/> <line x1=”550" y1=”1190" x2=”625" y2=”1190" style=”stroke:black;stroke-width:6"/> <line x1=”625" y1=”1190" x2=”700" y2=”1190" style=”stroke:black;stroke-width:6"/> <animate attributeName=”opacity” values=”0;1" begin=”explosion3End.end-0.1" dur=”0.1" fill=”freeze” /> <animateTransform attributeName=”transform” type=”rotate” values=”30 700 1200;15 700 1200" begin=”headRolls.begin” dur=”0.5s” repeatCount=”1" fill=”freeze”/> </g> </defs> <!— A BRICK → <defs> <g id=”brick”> <rect x=”0" y=”0" width=”50" height=”20" style=”fill:brown;stroke:black;stroke-width:2"/> </g> </defs> <!— BRICK PILE ON ROOF → <defs> <g id=”brickPile” transform=”translate(700, 0)”> <!— first row → <use x=”350" y=”230" xlink:href=”#brick”/> <use x=”400" y=”230" xlink:href=”#brick”/> <use x=”450" y=”230" xlink:href=”#brick”/> <use x=”500" y=”230" xlink:href=”#brick”/> <use x=”550" y=”230" xlink:href=”#brick”/> <use x=”600" y=”230" xlink:href=”#brick”/> <use x=”650" y=”230" xlink:href=”#brick”/> <!— second row → <use x=”375" y=”210" xlink:href=”#brick”/> <use x=”425" y=”210" xlink:href=”#brick”/> <use x=”475" y=”210" xlink:href=”#brick”/> <use x=”525" y=”210" xlink:href=”#brick”/> <use x=”575" y=”210" xlink:href=”#brick”/> <use x=”650" y=”210" xlink:href=”#brick”/> <!— third row → <use x=”400" y=”190" xlink:href=”#brick”/> <use x=”450" y=”190" xlink:href=”#brick”/> <use x=”500" y=”190" xlink:href=”#brick”/> <use x=”550" y=”190" xlink:href=”#brick”/> <use x=”600" y=”190" xlink:href=”#brick”/> <use x=”650" y=”190" xlink:href=”#brick”/> <!— fourth row → <use x=”425" y=”170" xlink:href=”#brick”/> <use x=”475" y=”170" xlink:href=”#brick”/> <use x=”525" y=”170" xlink:href=”#brick”/> <use x=”600" y=”170" xlink:href=”#brick”/> <use x=”650" y=”170" xlink:href=”#brick”/> <!— fifth row (none animated)→ <use x=”550" y=”150" xlink:href=”#brick”/> <use x=”600" y=”150" xlink:href=”#brick”/> <use x=”650" y=”150" xlink:href=”#brick”/> <!— sixth row → <use x=”550" y=”130" xlink:href=”#brick”/> <use x=”600" y=”130" xlink:href=”#brick”/> <use x=”650" y=”130" xlink:href=”#brick”/> <!— seventh row → <use x=”550" y=”110" xlink:href=”#brick”/> <use x=”600" y=”110" xlink:href=”#brick”/> <use x=”650" y=”110" xlink:href=”#brick”/> <!— eight row → <use x=”550" y=”90" xlink:href=”#brick”/> <use x=”600" y=”90" xlink:href=”#brick”/> <use x=”650" y=”90" xlink:href=”#brick”/> </g> </defs> <use xlink:href=”#brickPile”/> <!— Dropped Bricks ON GROUND → <defs> <g id=”bricksOnGround” opacity=”0"> <use x=”520" y=”1232" xlink:href=”#brick”/> <use x=”560" y=”1232" xlink:href=”#brick”/> <use x=”610" y=”1232" xlink:href=”#brick” transform=”rotate(90 610 1200)”/> <use x=”650" y=”1232" xlink:href=”#brick” transform=”rotate(30 670 1130)”/> <use x=”680" y=”1232" xlink:href=”#brick” transform=”rotate(30 700 1130)”/> <use x=”700" y=”1232" xlink:href=”#brick” transform=”rotate(45 720 1180)”/> <use x=”575" y=”1200" xlink:href=”#brick” transform=”rotate(-20 575 1200)”/> <use x=”700" y=”1232" xlink:href=”#brick”/> <use x=”690" y=”1195" xlink:href=”#brick” transform=”rotate(20 690 1195)”/> <animate attributeName=”opacity” values=”0;1" begin=”barrelFalling1.end-0.4" dur=”0.1" fill=”freeze”/> </g> </defs> <!— TREE → <defs> <g id=”tree”> <path d=”M100,952 Q120,1200,40,1252 L200 1252 L200 952z” fill-opacity=”1" style=”fill:brown”/> <path d=”M200,952 Q180,1167,260,1252 L100 1252z” fill-opacity=”1" style=”fill:brown”/> <line x1=”95" y1=”1150" x2=”210" y2=”1150" style=”stroke:black;stroke-width:4"/> <circle cx=”150" cy=”800" r=”100" stroke=”black” stroke-width=”2" fill=”green”/> <circle cx=”150" cy=”900" r=”150" stroke=”black” stroke-width=”2" fill=”green”/> </g> </defs> <!— *****************************END OF DEFINITION(DEFS) GROUPS************************************** → <!— ANIMATION OF BRICKS THAT STICKMAN MOVES INTO BARREL → <use x=”800" y=”0" xlink:href=”#brick”> <animateMotion path=”M350,150 Q100,-100,100,100" dur=”2s” fill=”freeze”/> <animate attributeName=”opacity” from=”1" to=”0" begin=”2s” dur=”0.1s” fill=”freeze”/> </use> <use x=”1200" y=”150" xlink:href=”#brick”> <animateMotion path=”M0,0 Q-100,-300,-350,0" begin=”2s” dur=”2s” fill=”freeze”/> <animate attributeName=”opacity” from=”1" to=”0" begin=”4s” dur=”0.1s” fill=”freeze”/> </use> <use x=”800" y=”0" xlink:href=”#victim1"> <animate attributeName=”opacity” from=”1" to=”0" begin=”8s” dur=”0.1s” fill=”freeze”/> </use> <!— END OF ANIMATION OF BRICKS THAT STICKMAN MOVES INTO BARREL → <use xlink:href=”#building”/> <use xlink:href=”#kid”><animate attributeName=”y” values=”-20;50;-20" dur=”1s” repeatCount=”indefinite” fill=”freeze” /></use> <use xlink:href=”#tranpoline”/> <!— **************ANIMATION OF THE VICTIM BEING LIFTED AND THEN FALL************** → <g> <!—LINE FROM THE TREE TO HANGER→ <line x1=”620" y1=”252" x2=”210" y2=”1150" style=”stroke:black;stroke-width:4;stroke-dasharray: 1000 1000"> <animate attributeName=”stroke-dashoffset” from=”0" to=”800" begin=”shock1.end” dur=”1s” fill=”freeze”/> <animate attributType=”CSS” attributeName=”opacity” values=”1;0" begin=”shock1.end+1" dur=”1s” fill=”freeze”/> </line> <!— Victim 2(THE ONE NEAR THE TREE) → <use x=”0" y=”1000" xlink:href=”#victim2" > <animateMotion path=”M0 0 L200 -550" begin=”shock1.end” dur=”1" fill=”freeze”/> <animateMotion id=”victimFalls” path=”M200 -550 L-50 100" begin=”explosion1.end” dur=”2" fill=”freeze”/> </use> <animateTransform attributeName=”transform” calcMode=”paced” type=”rotate” values=”0 620 252;-23 620 252" begin=”shock1.end” dur=”1s” repeatCount=”1" fill=”freeze”/> <animate attributType=”CSS” attributeName=”opacity” values=”1;0" begin=”victimFalls.end-0.5" dur=”0.1s” fill=”freeze”/> </g> <line x1=”620" y1=”252" x2=”620" y2=”1050" style=”stroke:black;stroke-width:4;stroke-dasharray: 1000 1000; stroke-dashoffset: 850"> <animate attributeName=”stroke-dashoffset” from=”1000" to=”0" begin=”explosion1.end” dur=”2s” fill=”freeze”/> <animate attributeName=”stroke-dashoffset” from=”0" to=”1000" begin=”letGoLine.end+2" dur=”1s” fill=”freeze”/> </line> <!— ***************END OF ANIMATION OF THE VICTIM BEING LIFTED AND THE FALL*********** → <!— STICKMAN ON TOP OF THE DROPPED BRICKS → <use xlink:href=”#victim3" opacity=”0"> <animate attributeName=”opacity” from=”0" to=”1" begin=”explosion2End.end-0.2" dur=”0.1" fill=”freeze” /> </use> <!— Line holding barrel → <line x1=”620" y1=”252" x2=”620" y2=”1050" style=”stroke:black;stroke-width:4;stroke-dasharray: 1000 1000; stroke-dashoffset: 850"> <animate attributeName=”stroke-dashoffset” from=”1000" to=”0" begin=”shock1.end” dur=”0.7s” fill=”freeze”/> <animate attributeName=”stroke-dashoffset” from=”0" to=”1000" begin=”explosion1.end” dur=”1.4s” fill=”freeze”/> <animate attributeName=”stroke-dashoffset” from=”1000" to=”0" begin=”letGoLine.end+2" dur=”1s” fill=”freeze”/> </line> <use xlink:href=”#SmashedBarrel” /> <!— **********************************BLOOD ANIMATION*********************************** → <g id=”blood” opacity=”0"> <line x1=”600" y1=”1160" x2=”530" y2=”1100" style=”stroke:red;stroke-width:4;stroke-dasharray: 200 200"> <animate id=”splash1" attributeName=”stroke-dashoffset” values=”200;0;200;0" begin=”headRolls.end+0.5" dur=”0.5s” repeatCount=”3" fill=”freeze”/> <animate attributType=”CSS” attributeName=”opacity” values=”1;0" begin=”splash1.end” dur=”1s” fill=”freeze”/> </line> <line x1=”600" y1=”1170" x2=”530" y2=”1150" style=”stroke:red;stroke-width:4;stroke-dasharray: 200 200"> <animate id=”splash2" attributeName=”stroke-dashoffset” values=”200;0;200;0" begin=”headRolls.end+0.5" dur=”0.5s” repeatCount=”3" fill=”freeze”/> <animate attributType=”CSS” attributeName=”opacity” values=”1;0" begin=”splash2.end” dur=”1s” fill=”freeze”/> </line> <line x1=”600" y1=”1175" x2=”530" y2=”1190" style=”stroke:red;stroke-width:4;stroke-dasharray: 200 200"> <animate id=”splash3" attributeName=”stroke-dashoffset” values=”200;0;200;0" begin=”headRolls.end+0.5" dur=”0.5s” repeatCount=”3" fill=”freeze”/> <animate attributType=”CSS” attributeName=”opacity” values=”1;0" begin=”splash2.end” dur=”1s” fill=”freeze”/> </line> <rect x=”240" y=”1232" width=”290" height=”20" fill=”red” opacity=”0"> <animate attributeName=”opacity” from=”0" to=”0.70" begin=”splash1.end+0.5" dur=”4s” fill=”freeze” /> </rect> <animate attributeName=”opacity” from=”0" to=”1" begin=”headRolls.begin+1" dur=”1s” fill=”freeze” /> </g> <!— **********************************END OF BLOOD ANIMATION************************************* → <use xlink:href=”#bricksOnGround”/> <use xlink:href=”#tree”/> <!— BARREL ANIMATION → <use xlink:href=”#barrel” > <animateMotion id=”barrelDroping” path=”M0,0 Q-300,-225,-305,250" begin=”kickAnimation.end” dur=”2s” fill=”freeze”/> <animate id=”barrelFalling1" attributeName=”y” from=”0" to=”700" begin=”shock1.end” dur=”1s” fill=”freeze”/> <!— Barrel is lifted up → <animate id=”barrelLifted” attributeName=”y” from=”700" to=”0" begin=”explosion1.end” dur=”2s” fill=”freeze”/> <!— Barrel falls second time → <animate id=”barrelFalling2" attributeName=”y” from=”0" to=”700" begin=”letGoLine.end+2" dur=”1s” fill=”freeze”/> <animate attributeName=”opacity” values=”1;0" begin=”letGoLine.end+2.7" dur=”0.1" fill=”freeze”/> </use> <!— EXPLOSION ANIMATIONS → <g id=”explosiongroup” opacity=”0"> <path d=”M520 1252 L430 1170 L530 1150 L480 1000 L600 1050 L600 890 L700 1000 L750 900 L800 1000 L900 950 L800 1100 L900 1120 L800 1252z” stroke=”red” stroke-width=”5" fill=”yellow” /> <text x=”570" y=”1200" font-size=”90" rotate=”-30" style=”;stroke:black;fill:red”>BANG!</text> <animate id=”explosion1Start” attributeName=”opacity” from=”0" to=”1" begin=”barrelFalling1.end-0.4" dur=”0.1" fill=”freeze”/> <animate id=”explosion1" attributeName=”opacity” from=”1" to=”0" begin=”explosion1Start.end+3" dur=”0.1" fill=”freeze”/> <animate id=”explosion2" attributeName=”opacity” values=”0;1" begin=”victimFalls.end-0.7" dur=”0.1" fill=”freeze”/> <animate id=”explosion2End” attributeName=”opacity” values=”1;0" begin=”victimFalls.end+3" dur=”0.1" fill=”freeze”/> <animate id=”explosion3" attributeName=”opacity” values=”0;1" begin=”barrelFalling2.end-0.4" dur=”0.5" fill=”freeze”/> <animate id=”explosion3End” attributeName=”opacity” values=”1;0" begin=”barrelFalling2.end+3" dur=”0.1" fill=”freeze”/> </g> <!— AFTER 5 MINS → <text x=”200" y=”700" opacity=”0" font-size=”100" >After 5 mins… <animate attributeName=”opacity” values=”0;1" begin=”barrelDroping.end” dur=”2s”/> </text> <!— THE END → <text x=”1600" y=”900" opacity=”0" fill=”white” font-size=”150" >THE END <animate attributeName=”opacity” values=”0;1" begin=”headRolls.end+6" dur=”2s” fill=”freeze”/> </text> </svg>