Error Code 404 Animated SVG

Description

This is a Scalable Vector Graphics (SVG) animation, created with the help of Dmitry Baranovskiy’s Snap.svg JavaScript library. It starts with the SOS international Morse code distress signal, which is three dots, three dashes and three dots. Then the dashes morph to dots. The group of nine dots draws the letters SOS, where two dots in each group draw the inner and outer stroke of one letter and the third is used as a filler. The animation continues with morphing animation of the ‘S’ letters, which turn into ‘4’ digits. The ‘O’ letter turns into a magnifying glass, which moves up and down a little in order to reveal a back button.

How to use the Visual Builder

Youtube video tutorial

The Visual Builder is a help tool that resides in the VISUAL_BUILDER folder of the package you have purchased.

If you load the index.html page you will see an interface, that allows you to set values to all the options, that define the animation look and feel. When you hit the play button the set panel will hide, the animation will play and if you are happy with it, you will need to select and copy the code, that sits in the left part of the panel. This code will have to be pasted in the page where you intend to use the animation. In the simple_usage.html page I have put comments around the portion of code that you need to replace:

//===================================
//PASTE CODE FROM VISUAL BUILDER HERE
var pnf_404_time_m = 120;
var pnf_404_s_letter_color1 = "#ffffff";
var pnf_404_s_letter_color2 = "#0bb5b5";
var pnf_404_o_letter_color = "#ff255f";
var pnf_404_button_color = "#ffffff";
var pnf_404_global_stroke_width = 2;
var pnf_404_stroke_color1 = "#ffffff";
var pnf_404_stroke_color2 = "#0bb5b5";
var pnf_404_shadow_color = "#000000";
//===================================

This is transparent animation, so if you want to change the background color of the page you have to take the value from the Visual Builder and put it as a style setting. In the simple_usage.html page I have comments next to the line where you need to replace the value of the background-color:

body{
  background-color: #3d1a26;/* TAKE THIS VALUE FROM THE VISUAL BUILDER */
  margin: 0px;
}

The speed setting is in milliseconds. All time intervals used in the animation are based on this number.

Usage

1. In order to play the animation you need to add a svg object to your 404 page. It needs to have an id attribute and also width and height. If you set the width as a percentage the animation will be responsive. You can set a height in pixels, which will act as a maximum height in the bigger resolutions:

<svg id="pnf_404_svg" width="100%" height="500px"></svg>

2. After you have the svg element you will need to import some JavaScript files. These are Snap.svg library, and JavaScript file with the animation instructions. In my demos, I add these in the header of the document.

<script type="text/javascript" src="snap.svg-min.js"></script>
<script type="text/javascript" src="pnf_404_animation.min.js"></script>

3. Lastly you need to add some more JavaScript, which will set the properties of the animation like colors, speed, stroke width, etc. and run the animation. In this portion you will also need to include two functions, which handle the end animation event and the back button click event.

<script type="text/javascript">
var pnf_404_time_m = 120;
var pnf_404_s_letter_color1 = "#ffffff";
var pnf_404_s_letter_color2 = "#0bb5b5";
var pnf_404_o_letter_color = "#ff255f";
var pnf_404_button_color = "#ffffff";
var pnf_404_global_stroke_width = 2;
var pnf_404_stroke_color1 = "#ffffff";
var pnf_404_stroke_color2 = "#0bb5b5";
var pnf_404_shadow_color = "#000000";
var pnf_404_svg = "pnf_404_svg";//id of SVG object
function pnf_404_complete_handler(){
  //PLACE SOME CODE HERE WHICH WILL BE EXECUTED AFTER THE ANIMATION COMLPETES
}
function pnf_404_back_button(){
  //CLICK HANDLING FOR THE BACK BUTTON
  window.history.back();
}    
window.onload = function(){
  pnf_404_page_not_found_animation(
    pnf_404_svg, 
    pnf_404_time_m, 
    pnf_404_s_letter_color1, 
    pnf_404_s_letter_color2, 
    pnf_404_o_letter_color, 
    pnf_404_button_color, 
    pnf_404_global_stroke_width, 
    pnf_404_stroke_color1, 
    pnf_404_stroke_color2, 
    pnf_404_shadow_color
  );
};
</script>

Features

• Responsive behavior.
• Transparent background.
• Visual Builder tool that helps you create an unique look of the animation.
• Infinite color combinations for the letters, stroke, shadow and back button.
• Ability to set animation speed.
• The animation itself features: path morphs, masking, filters, translation along path, drawing of path, etc.

Changelog

RELEASED [28 JUL 2015]