SVG - Throwing an Axe Animation

This JavaScript Reference section displays the code for an example program that shows how to animate the throwing of an axe using scalable vector graphics (SVG).

ThrowingAxe.html

<!DOCTYPE html>
<html>
<head>
  <title>XoaX.net's Javascript Throwing an Axe Animation</title>
  <script type="text/javascript" src="ThrowingAxe.js"></script>
  <button onclick="Restart()">Throw</button>
</head>
<body>
</body>
</html>

ThrowingAxe.js

const kiTotalTime = 150;
var iTime = 0;
var qPosition = { mdX:50.0, mdY:399.0};
var qInitVelocity = { mdX:3.3, mdY:10};
var qCurrVelocity = { mdX:0.0, mdY:0.0};
var gqRotationSvg = null;
var gqTranslationSvg = null;
var gbRunning = false;


function UpdateVelocityAndPosition() {
	// Change the velocity and rotation
	qCurrVelocity.mdX = qInitVelocity.mdX;
	qCurrVelocity.mdY = (20*(iTime/kiTotalTime) - qInitVelocity.mdY);
	var dAngle = (((16.0*iTime/kiTotalTime)*180)/Math.PI) + 225;
    gqRotationSvg.setAttribute('transform', 'rotate('+dAngle+')');
    // Change the position and translation
	qPosition.mdX += qCurrVelocity.mdX;
	qPosition.mdY += qCurrVelocity.mdY;
	gqTranslationSvg.setAttribute('transform', 'translate('+qPosition.mdX+', '+qPosition.mdY+')');
}

function AnimationLoop() {
  UpdateVelocityAndPosition();
  ++iTime;
  // Stop when the arrow hits the ground
  if (qPosition.mdY < 400){
    setTimeout(AnimationLoop, 25);
  } else {
	gbRunning = false;
  }
}

function Restart() {
  if (!gbRunning) {
    qPosition.mdX = 50.0;
    qPosition.mdY = 400.0;
    iTime = 0;
    gbRunning = true;
    AnimationLoop();
  }
}

function Initialize() {
  qpBody = document.getElementsByTagName("body")[0];

  // Create a 600 by 400 pixel region for drawing
  qMainDiv = document.createElement('div');
  qpBody.appendChild(qMainDiv);
  qMainDiv.style.width = '600px';
  qMainDiv.style.height = '400px';
  qMainDiv.style.background = 'linear-gradient(cyan, tan)';

  // The Main Svg Element
  var qMainSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  qMainSvg.style.width="600px";
  qMainSvg.style.height="400px";
  qMainDiv.appendChild(qMainSvg);

  // Add a Translation back from the Centroid Element
  var qCentroid = { mdX:10.0, mdY:4.0};
  gqTranslationCBSvg = document.createElementNS("http://www.w3.org/2000/svg", "g");
  qMainSvg.appendChild(gqTranslationCBSvg);
  gqTranslationCBSvg.setAttribute('transform', 'translate('+qCentroid.mdX+', '+qCentroid.mdY+')');

  // Add a Translation Element
  gqTranslationSvg = document.createElementNS("http://www.w3.org/2000/svg", "g");
  gqTranslationCBSvg.appendChild(gqTranslationSvg);
  gqTranslationSvg.setAttribute('transform', 'translate('+qPosition.mdX+', '+qPosition.mdY+')');

  // Add a Rotation Element
  gqRotationSvg = document.createElementNS("http://www.w3.org/2000/svg", "g");
  gqTranslationSvg.appendChild(gqRotationSvg);
  var dAngle = -((Math.atan2(qInitVelocity.mdY, qInitVelocity.mdX)*180)/Math.PI);
  gqRotationSvg.setAttribute('transform', 'rotate('+dAngle+')');

  // Add a Translation to the Centroid Element
  gqTranslationCSvg = document.createElementNS("http://www.w3.org/2000/svg", "g");
  gqRotationSvg.appendChild(gqTranslationCSvg);
  gqTranslationCSvg.setAttribute('transform', 'translate('+(-qCentroid.mdX)+
    ','+(-qCentroid.mdY)+')');

  // The Svg Axe Element
  var gqAxeHandleSvg = document.createElementNS("http://www.w3.org/2000/svg", "path");
  gqTranslationCSvg.appendChild(gqAxeHandleSvg);
  gqAxeHandleSvg.setAttribute('d', "M-25,0 C-30,-5 30,5 25,0 L25,7 C30,7 -30,4 -25,5 Z");
  gqAxeHandleSvg.setAttribute('stroke', 'rgb(55, 55, 55)');
  gqAxeHandleSvg.setAttribute('stroke-width', 1);
  gqAxeHandleSvg.setAttribute('fill', '#CD853F');
  var gqAxeHeadSvg = document.createElementNS("http://www.w3.org/2000/svg", "path");
  gqTranslationCSvg.appendChild(gqAxeHeadSvg);
  gqAxeHeadSvg.setAttribute('d', "M25,-2 L22,18 L33,18 L30,-2 Z");
  gqAxeHeadSvg.setAttribute('stroke', 'rgb(55, 55, 55)');
  gqAxeHeadSvg.setAttribute('stroke-width', 1);
  gqAxeHeadSvg.setAttribute('fill', '#666666');
}

window.onload = Initialize;

Core JavaScript

SVG - Throwing an Axe Animation

ThrowingAxe.html

ThrowingAxe.js

Output