SVG ANIMATION 4

index.html

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="600px"
	 height="300px" viewBox="0 0 600 300" enable-background="new 0 0 600 300" xml:space="preserve">
  
  <defs>
    <mask id="texture">
      <image height="400" width="600" xlink:href="http://img03.deviantart.net/7874/i/2008/122/4/5/crack_texture_by_struckdumb.jpg">
    </mask>
  </defs>

<g id="S">
  <g class="shapes">
	<rect id="square_1_" x="15.085" y="9.272" width="180.861" height="180.861"/>
	<line x1="15.085" y1="9.272" x2="195.947" y2="190.133"/>
	<line x1="15.085" y1="190.133" x2="195.947" y2="9.272"/>
	<circle cx="101.917" cy="157.479" r="30.084"/>
	<circle cx="111.167" cy="40.229" r="27"/>
	<circle cx="58.917" cy="185.729" r="4.5"/>
	<circle cx="150.167" cy="14.979" r="5"/>
	<circle cx="94.902" cy="53.566" r="46.663"/>
	<circle cx="104.612" cy="62.129" r="50.986"/>
	<circle cx="107.478" cy="139.146" r="50.986"/>
	<circle cx="124.836" cy="143.566" r="46.663"/>
	<line x1="48.836" y1="190.229" x2="48.836" y2="9.979"/>
	<line x1="161.836" y1="190.229" x2="161.836" y2="9.979"/>
  </g> <!-- shapes -->
  
  <path class="letter-mask" mask="url(#texture)" d="M66.457,169.279c7.346,11.828,18.612,17.742,33.801,17.742c5.976,0,11.349-1.059,16.122-3.176
			c4.771-2.117,8.546-5.332,11.327-9.648c2.781-4.314,4.172-9.543,4.172-15.688c0-6.637-1.555-12.592-4.668-17.863
			c-3.113-5.27-7.305-10.086-12.574-14.441c-5.271-4.357-12.306-9.398-21.102-15.126c-10.293-6.639-18.447-12.406-24.464-17.305
			c-6.019-4.896-10.998-10.706-14.939-17.429c-3.942-6.723-5.913-14.523-5.913-23.405c0-10.29,2.614-18.942,7.843-25.957
			c5.229-7.013,12.158-12.22,20.791-15.624c8.631-3.402,18.134-5.104,28.51-5.104c6.141,0,11.473,0.457,15.997,1.369
			c4.523,0.914,8.297,2.055,11.328,3.424s6.328,3.093,9.898,5.166c4.066,2.408,6.93,3.61,8.59,3.61c1.574,0,2.781-0.891,3.609-2.676
			c0.828-1.784,1.496-4.626,1.992-8.528h5.852c-0.828,11.372-1.246,30.75-1.246,58.14h-5.848
			c-0.582-9.213-2.637-17.969-6.164-26.269c-3.527-8.299-8.465-15.043-14.816-20.23c-6.348-5.187-13.798-7.781-22.346-7.781
			c-5.396,0-10.229,1.039-14.504,3.112c-4.275,2.075-7.594,5.085-9.959,9.026c-2.365,3.942-3.549,8.527-3.549,13.756
			c0,8.466,2.531,15.396,7.595,20.791c5.062,5.396,11.659,10.853,19.795,16.371c8.133,5.521,13.612,9.234,16.433,11.143
			c9.961,6.641,17.844,12.408,23.656,17.305c5.809,4.898,10.539,10.625,14.191,17.181c3.652,6.557,5.477,14.15,5.477,22.781
			c0,10.873-2.82,20.045-8.465,27.514s-13.238,13.051-22.781,16.744c-9.547,3.693-20.213,5.541-31.997,5.541
			c-9.545,0-17.45-0.852-23.716-2.553c-6.268-1.701-12.057-4.004-17.367-6.91c-3.653-2.406-6.517-3.611-8.591-3.611
			c-1.577,0-2.781,0.895-3.61,2.678c-0.83,1.787-1.493,4.627-1.991,8.529h-5.852c0.663-10.625,0.996-33.572,0.996-68.846h5.852
			C54.898,142.037,59.112,157.453,66.457,169.279z"/>
  
  <path class="letter" d="M66.457,169.279c7.346,11.828,18.612,17.742,33.801,17.742c5.976,0,11.349-1.059,16.122-3.176
			c4.771-2.117,8.546-5.332,11.327-9.648c2.781-4.314,4.172-9.543,4.172-15.688c0-6.637-1.555-12.592-4.668-17.863
			c-3.113-5.27-7.305-10.086-12.574-14.441c-5.271-4.357-12.306-9.398-21.102-15.126c-10.293-6.639-18.447-12.406-24.464-17.305
			c-6.019-4.896-10.998-10.706-14.939-17.429c-3.942-6.723-5.913-14.523-5.913-23.405c0-10.29,2.614-18.942,7.843-25.957
			c5.229-7.013,12.158-12.22,20.791-15.624c8.631-3.402,18.134-5.104,28.51-5.104c6.141,0,11.473,0.457,15.997,1.369
			c4.523,0.914,8.297,2.055,11.328,3.424s6.328,3.093,9.898,5.166c4.066,2.408,6.93,3.61,8.59,3.61c1.574,0,2.781-0.891,3.609-2.676
			c0.828-1.784,1.496-4.626,1.992-8.528h5.852c-0.828,11.372-1.246,30.75-1.246,58.14h-5.848
			c-0.582-9.213-2.637-17.969-6.164-26.269c-3.527-8.299-8.465-15.043-14.816-20.23c-6.348-5.187-13.798-7.781-22.346-7.781
			c-5.396,0-10.229,1.039-14.504,3.112c-4.275,2.075-7.594,5.085-9.959,9.026c-2.365,3.942-3.549,8.527-3.549,13.756
			c0,8.466,2.531,15.396,7.595,20.791c5.062,5.396,11.659,10.853,19.795,16.371c8.133,5.521,13.612,9.234,16.433,11.143
			c9.961,6.641,17.844,12.408,23.656,17.305c5.809,4.898,10.539,10.625,14.191,17.181c3.652,6.557,5.477,14.15,5.477,22.781
			c0,10.873-2.82,20.045-8.465,27.514s-13.238,13.051-22.781,16.744c-9.547,3.693-20.213,5.541-31.997,5.541
			c-9.545,0-17.45-0.852-23.716-2.553c-6.268-1.701-12.057-4.004-17.367-6.91c-3.653-2.406-6.517-3.611-8.591-3.611
			c-1.577,0-2.781,0.895-3.61,2.678c-0.83,1.787-1.493,4.627-1.991,8.529h-5.852c0.663-10.625,0.996-33.572,0.996-68.846h5.852
			C54.898,142.037,59.112,157.453,66.457,169.279z"/>
</g> <!-- S -->
  
<g id="V">
  <g class="shapes">
	<rect id="square_3_" x="206.301" y="9.272" width="180.861" height="180.861"/>
	<line x1="206.301" y1="190.133" x2="387.162" y2="9.272"/>
	<line x1="387.162" y1="190.133" x2="206.301" y2="9.272"/>
	<circle cx="277.5" cy="25.225" r="9"/>
	<path d="M320.753,33.046
		c0,9.275,7.52,16.789,16.789,16.789c9.271,0,16.792-7.514,16.792-16.789c0-9.268-7.52-16.785-16.792-16.785
		C328.273,16.261,320.753,23.779,320.753,33.046z"/>
	<circle cx="296.837" cy="100.22" r="90.325"/>
	<circle cx="206.302" cy="30.954" r="15.974"/>
	<path d="M435.277,47.346
		c0,19.874-16.115,35.985-35.984,35.985c-19.875,0-35.986-16.111-35.986-35.985s16.111-35.983,35.986-35.983
		C419.162,11.363,435.277,27.472,435.277,47.346z"/>
  </g> <!-- shapes -->
  
  <path class="letter-mask" mask="url(#texture)" d="M364.883,10.363c7.801,0,14.275-0.249,19.422-0.747v5.104c-4.232,1.661-8.426,4.917-12.574,9.772
			c-4.15,4.855-7.803,11.724-10.955,20.604l-53.782,145.535c-1.91-0.168-4.898-0.25-8.964-0.25c-3.902,0-6.766,0.082-8.59,0.25
			L224.329,31.029c-2.159-5.644-4.668-9.73-7.531-12.263c-2.864-2.531-5.706-3.879-8.528-4.046V9.616
			c10.209,0.498,23.156,0.747,38.843,0.747c17.346,0,30.252-0.249,38.718-0.747v5.104c-6.393,0.249-10.978,1.017-13.757,2.303
			c-2.782,1.288-4.171,3.673-4.171,7.158c0,2.657,1.037,6.642,3.112,11.952l44.943,114.162l31.373-84.532
			c4.73-13.362,7.095-23.736,7.095-31.124c0-6.805-1.805-11.765-5.416-14.877c-3.609-3.112-8.943-4.793-15.998-5.042V9.616
			C344.467,10.114,355.09,10.363,364.883,10.363z"/>
  
  <path class="letter" d="M364.883,10.363c7.801,0,14.275-0.249,19.422-0.747v5.104c-4.232,1.661-8.426,4.917-12.574,9.772
			c-4.15,4.855-7.803,11.724-10.955,20.604l-53.782,145.535c-1.91-0.168-4.898-0.25-8.964-0.25c-3.902,0-6.766,0.082-8.59,0.25
			L224.329,31.029c-2.159-5.644-4.668-9.73-7.531-12.263c-2.864-2.531-5.706-3.879-8.528-4.046V9.616
			c10.209,0.498,23.156,0.747,38.843,0.747c17.346,0,30.252-0.249,38.718-0.747v5.104c-6.393,0.249-10.978,1.017-13.757,2.303
			c-2.782,1.288-4.171,3.673-4.171,7.158c0,2.657,1.037,6.642,3.112,11.952l44.943,114.162l31.373-84.532
			c4.73-13.362,7.095-23.736,7.095-31.124c0-6.805-1.805-11.765-5.416-14.877c-3.609-3.112-8.943-4.793-15.998-5.042V9.616
			C344.467,10.114,355.09,10.363,364.883,10.363z"/>
</g> <!-- V -->
  
<g id="G">
  <g class="shapes">
  <rect id="shapes_2_" x="397.207" y="9.272" width="180.861" height="180.861"/>
	<line x1="397.207" y1="190.133" x2="578.068" y2="9.272"/>
	<line x1="397.207" y1="9.272" x2="578.068" y2="190.133"/>
	<circle cx="487.12" cy="100.22" r="90.948"/>
	<circle cx="497.83" cy="63.559" r="50.666"/>
	<circle cx="544.83" cy="20.559" r="4.666"/>
	<circle cx="544.83" cy="181.893" r="6.332"/>
	<circle cx="568.164" cy="126.557" r="8.666"/>
	<circle cx="504.164" cy="132.225" r="12.666"/>
	<line x1="578.068" y1="113.034" x2="397.207" y2="113.034"/>
	<line x1="557.498" y1="9.272" x2="557.498" y2="190.133"/>
	<circle cx="492.604" cy="150.346" r="37.473"/>
  </g> <!-- shapes -->
  
  <path class="letter-mask" mask="url(#texture)" d="M551.672,180.174c-1.246-3.07-2.988-4.605-5.23-4.605c-2.82,0-7.43,1.785-13.816,5.352
			c-14.777,8.551-28.719,12.824-41.832,12.824c-19.588,0-36.188-3.631-49.799-10.895c-13.613-7.262-23.883-17.76-30.812-31.496
			s-10.395-30.23-10.395-49.487c0-19.005,3.922-35.75,11.766-50.234c7.844-14.481,18.754-25.708,32.742-33.676
			c13.984-7.968,29.898-11.951,47.742-11.951c10.459,0,19.318,1.432,26.58,4.295s14.379,6.952,21.352,12.263
			c2.074,1.578,3.777,2.365,5.105,2.365c1.742,0,3.109-1.202,4.105-3.61c0.996-2.406,1.785-6.307,2.367-11.702h5.852
			c-0.664,11.537-0.996,32.119-0.996,61.749h-5.977c-1.246-11.453-3.195-20.769-5.852-27.949
			c-2.656-7.178-7.055-13.258-13.195-18.238c-4.066-3.9-9.09-6.95-15.066-9.15c-5.973-2.198-12.074-3.299-18.299-3.299
			c-11.871,0-21.746,4.046-29.629,12.139c-7.887,8.092-13.717,18.779-17.492,32.057c-3.777,13.28-5.664,27.763-5.664,43.449
			c0,58.844,16.309,88.266,48.926,88.266c7.385,0,13.404-1.699,18.053-5.105c2.238-1.492,3.816-3.277,4.73-5.352
			c0.91-2.074,1.367-4.73,1.367-7.969v-24.898c0-7.969-0.664-13.797-1.992-17.49s-3.715-6.225-7.156-7.596
			c-3.445-1.369-8.945-2.219-16.496-2.551v-5.105c9.793,0.582,24.316,0.872,43.574,0.872c15.688,0,27.055-0.29,34.109-0.872v5.105
			c-3.484,0.332-5.973,1.018-7.469,2.053c-1.492,1.039-2.531,2.988-3.113,5.852s-0.871,7.533-0.871,14.006v50.545h-5.102
			C553.621,186.564,552.914,183.244,551.672,180.174z"/>
  
  <path class="letter" d="M551.672,180.174c-1.246-3.07-2.988-4.605-5.23-4.605c-2.82,0-7.43,1.785-13.816,5.352
			c-14.777,8.551-28.719,12.824-41.832,12.824c-19.588,0-36.188-3.631-49.799-10.895c-13.613-7.262-23.883-17.76-30.812-31.496
			s-10.395-30.23-10.395-49.487c0-19.005,3.922-35.75,11.766-50.234c7.844-14.481,18.754-25.708,32.742-33.676
			c13.984-7.968,29.898-11.951,47.742-11.951c10.459,0,19.318,1.432,26.58,4.295s14.379,6.952,21.352,12.263
			c2.074,1.578,3.777,2.365,5.105,2.365c1.742,0,3.109-1.202,4.105-3.61c0.996-2.406,1.785-6.307,2.367-11.702h5.852
			c-0.664,11.537-0.996,32.119-0.996,61.749h-5.977c-1.246-11.453-3.195-20.769-5.852-27.949
			c-2.656-7.178-7.055-13.258-13.195-18.238c-4.066-3.9-9.09-6.95-15.066-9.15c-5.973-2.198-12.074-3.299-18.299-3.299
			c-11.871,0-21.746,4.046-29.629,12.139c-7.887,8.092-13.717,18.779-17.492,32.057c-3.777,13.28-5.664,27.763-5.664,43.449
			c0,58.844,16.309,88.266,48.926,88.266c7.385,0,13.404-1.699,18.053-5.105c2.238-1.492,3.816-3.277,4.73-5.352
			c0.91-2.074,1.367-4.73,1.367-7.969v-24.898c0-7.969-0.664-13.797-1.992-17.49s-3.715-6.225-7.156-7.596
			c-3.445-1.369-8.945-2.219-16.496-2.551v-5.105c9.793,0.582,24.316,0.872,43.574,0.872c15.688,0,27.055-0.29,34.109-0.872v5.105
			c-3.484,0.332-5.973,1.018-7.469,2.053c-1.492,1.039-2.531,2.988-3.113,5.852s-0.871,7.533-0.871,14.006v50.545h-5.102
			C553.621,186.564,552.914,183.244,551.672,180.174z"/>
</g> <!-- G -->
    
<g id="anim-word" class="huh" fill="none"> <!-- ANIMATION -->
		<path id="a1" d="M46.693,254.559l3.984-41.232h13.968l3.936,41.232h-7.824l-0.576-6.672h-4.992l-0.48,6.672H46.693z M55.813,241.311h3.744
			l-1.824-20.976h-0.384L55.813,241.311z"/>
		<path id="n1" d="M111.157,254.559v-41.232h8.496l3.792,19.729v-19.729h7.968v41.232h-8.064l-4.128-20.64v20.64H111.157z"/>
		<path id="i1" d="M175.956,254.559v-41.232h7.968v41.232H175.956z"/>
		<path id="m" d="M228.516,254.559v-41.232h12.576l3.456,25.152l3.456-25.152h12.672v41.232h-7.536v-29.712l-4.752,29.712h-7.392
			l-5.04-29.712v29.712H228.516z"/>
		<path id="a2" d="M302.099,254.559l3.984-41.232h13.968l3.936,41.232h-7.824l-0.576-6.672h-4.992l-0.48,6.672H302.099z M311.218,241.311
			h3.744l-1.824-20.976h-0.384L311.218,241.311z"/>
		<path id="t" d="M368.914,254.559v-33.312h-4.896v-7.921h18.049v7.921h-4.896v33.312H368.914z"/>
		<path id="i2" d="M425.267,254.559v-41.232h7.968v41.232H425.267z"/>
		<path id="o" d="M478.881,251.895c-1.729-2.031-2.592-4.888-2.592-8.568v-19.632c0-3.552,0.863-6.231,2.592-8.04
			c1.728-1.808,4.256-2.712,7.584-2.712s5.855,0.904,7.584,2.712c1.728,1.809,2.592,4.488,2.592,8.04v19.632
			c0,3.713-0.864,6.576-2.592,8.593c-1.729,2.016-4.256,3.023-7.584,3.023S480.608,253.927,478.881,251.895z M487.953,246.398
			c0.256-0.64,0.384-1.536,0.384-2.688v-20.16c0-0.896-0.12-1.624-0.36-2.185c-0.24-0.56-0.729-0.84-1.464-0.84
			c-1.376,0-2.063,1.04-2.063,3.12v20.112c0,1.184,0.144,2.08,0.432,2.688c0.288,0.608,0.816,0.912,1.584,0.912
			C487.2,247.358,487.696,247.039,487.953,246.398z"/>
		<path id="n2" d="M538.833,254.559v-41.232h8.496l3.792,19.729v-19.729h7.968v41.232h-8.064l-4.128-20.64v20.64H538.833z"/>
</g> <!-- ANIMATION -->
    
<!-- ANIMATION rects -->
<g id="anim-shapes">
  <rect id="rect1" x="32.5" y="209" width="50" height="50"/>
  <circle id="circ1" cx="57.25" cy="234" r="25"/>
</g>
  
</svg>

script.js

var x = 64;
for (var i = 0; i < 8; i++) {
  x = x + 47.55
  console.log(x)
}

style.scss

svg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.letter-mask {
  fill: darkOrange;
  opacity: 0;
  animation-name: fade;
  animation-duration: 5s;
  animation-delay: 19s;
  animation-fill-mode: forwards;
}

#S .shapes {
  fill: none;
  stroke: #00AEEF;
  stroke-width: 1.5;
  animation-name: draw;
  stroke-dasharray: 725;
  stroke-dashoffset: -725;
  animation-direction: forward;
  animation-duration: 3.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  animation-delay: 1s;
}

#S .letter {
  fill: none;
  stroke: red;
  stroke-width: 2.5;
  animation-name: draw;
  stroke-dasharray: 1000;
  stroke-dashoffset: -1000;
  animation-direction: forward;
  animation-duration: 4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-delay: 4s;
}

#V .shapes {
  fill: none;
  stroke: #00AEEF;
  stroke-width: 1.5;
  animation-name: draw;
  stroke-dasharray: 725;
  stroke-dashoffset: -725;
  animation-direction: forward;
  animation-duration: 3.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  animation-delay: 7.75s;
}

#V .letter {
  fill: none;
  stroke: red;
  stroke-width: 2.5;
  animation-name: draw;
  stroke-dasharray: 1000;
  stroke-dashoffset: -1000;
  animation-direction: forward;
  animation-duration: 4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-delay: 10s;
}

#G .shapes {
  fill: none;
  stroke: #00AEEF;
  stroke-width: 1.5;
  animation-name: draw;
  stroke-dasharray: 725;
  stroke-dashoffset: -725;
  animation-direction: forward;
  animation-duration: 3.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  animation-delay: 14s;
}

#G .letter {
  fill: none;
  stroke: red;
  stroke-width: 2.5;
  animation-name: draw;
  stroke-dasharray: 1200;
  stroke-dashoffset: -1200;
  animation-direction: forward;
  animation-duration: 4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-delay: 16.5s;
}

#a1 {
  animation-name: popfade;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-delay: 21s;
}

#n1 {
  animation-name: popfade;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-delay: 21.5s;
}

#i1 {
  animation-name: popfade;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-delay: 22s;
}

#m {
  animation-name: popfade;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-delay: 22.5s;
}

#a2 {
  animation-name: popfade;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-delay: 23s;
}

#t {
  animation-name: popfade;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-delay: 23.5s;
}

#i2 {
  animation-name: popfade;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-delay: 24s;
}

#o {
  animation-name: popfade;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-delay: 24.5s;
}

#n2 {
  animation-name: popfade;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-delay: 25s;
}

#anim-shapes {
  opacity: 0;
  fill: none;
  stroke: #00AEEF;
  stroke-width: 1.5;
  animation-name: anim-move;
  animation-duration: 4.75s;
  animation-delay: 20.75s;
  animation-fill-mode: forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fade {
  to {
    opacity: 1;
  }
}

@keyframes popfade {
  0% {
    fill: #660000;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    fill: #ff9980;
  }
}

@keyframes anim-move {
  5% {
    opacity: 1;
  }
  14% {
    transform: translateX(0px);
    opacity: 1;
  }
  15% { // N
    transform: translateX(64px);
    opacity: 1;
  }
  20% { // N
    transform: translateX(64px);
    opacity: 1;
  }
  25% { // I
    transform: translateX(121px);
    opacity: 1;
  }
  30% { // I
    transform: translateX(121px);
    opacity: 1;
  }
  35% { // M
    transform: translateX(186px);
    opacity: 1;
  }
  40% { // M
    transform: translateX(186px);
    opacity: 1;
  }
  45% { // A
    transform: translateX(254px);
    opacity: 1;
  }
  50% { // A
    transform: translateX(254px);
    opacity: 1;
  }
  55% { // T
    transform: translateX(315px);
    opacity: 1;
  }
  60% { // T
    transform: translateX(315px);
    opacity: 1;
  }
  65% { // I
    transform: translateX(371px);
    opacity: 1;
  }
  70% { // I
    transform: translateX(371px);
    opacity: 1;
  }
  75% { // 0
    transform: translateX(428px);
    opacity: 1;
  }
  80% { // 0
    transform: translateX(428px);
    opacity: 1;
  }
  85% { // N
    transform: translateX(492px);
    opacity: 1;
  }
  90% { // N
    transform: translateX(492px);
    opacity: 1;
  }
  100% {
    transform: translateX(492px);
    opacity: 0;
  }
}

svg-animation-4.markdown

SVG ANIMATION 4

A Pen by Richard Walker on CodePen.

License.