Get Error Code 404 Animated SVG Download

LIVE PREVIEWBUY FOR $6

Description

This is a Scalable Vector Graphics (SVG) animation, produced with the enable of Dmitry Baranovskiy&#8217s Snap.svg JavaScript library. It starts with the SOS global Morse code distress sign, which is three dots, three dashes and 3 dots. Then the dashes morph to dots. The team of 9 dots draws the letters SOS, exactly where two dots in just about every team attract the inner and outer stroke of a person letter and the third is applied as a filler. The animation proceeds with morphing animation of the &#8216S&#8217 letters, which switch into &#82164&#8217 digits. The &#8216O&#8217 letter turns into a magnifying glass, which moves up and down a minimal in purchase to reveal a back button.

How to use the Visible Builder

Youtube movie tutorial

The Visual Builder is a help software that resides in the Visual_BUILDER folder of the package deal you have acquired.

If you load the index.html webpage you will see an interface, that lets you to set values to all the alternatives, that determine the animation glimpse and really feel. When you strike the perform button the established panel will cover, the animation will participate in and if you are pleased with it, you will have to have to pick out and copy the code, that sits in the still left portion of the panel. This code will have to be pasted in the web site in which you intend to use the animation. In the very simple_usage.html website page I have place reviews all-around the part of code that you want to switch:

//===================================
//PASTE CODE FROM Visible BUILDER Here
var pnf_404_time_m = 120
var pnf_404_s_letter_colour1 = "#ffffff"
var pnf_404_s_letter_shade2 = "#0bb5b5"
var pnf_404_o_letter_colour = "#ff255f"
var pnf_404_button_coloration = "#ffffff"
var pnf_404_world wide_stroke_width = 2
var pnf_404_stroke_colour1 = "#ffffff"
var pnf_404_stroke_color2 = "#0bb5b5"
var pnf_404_shadow_colour = "#000000"
//===================================

This is clear animation, so if you want to adjust the background colour of the site you have to choose the value from the Visible Builder and place it as a model location. In the uncomplicated_use.html web site I have remarks subsequent to the line the place you require to switch the value of the background-coloration:

physique
  qualifications-colour: #3d1a26/* Just take THIS Worth FROM THE Visual BUILDER */
  margin: 0px

The velocity environment is in milliseconds. All time intervals utilised in the animation are based mostly on this selection.

Utilization

1. In get to enjoy the animation you need to have to add a svg item to your 404 web site. It needs to have an id attribute and also width and peak. If you established the width as a share the animation will be responsive. You can set a height in pixels, which will act as a maximum height in the greater resolutions:

2. Just after you have the svg component you will need to have to import some JavaScript documents. These are Snap.svg library, and JavaScript file with the animation guidelines. In my demos, I add these in the header of the document.

3. Lastly you need to have to include some extra JavaScript, which will established the properties of the animation like colours, velocity, stroke width, and many others. and run the animation. In this part you will also require to contain two features, which handle the stop animation party and the again button click function.

Features

• Responsive conduct.
• Clear track record.
• Visual Builder resource that helps you develop an exclusive look of the animation.
• Infinite shade combos for the letters, stroke, shadow and back again button.
• Skill to set animation velocity.
• The animation itself characteristics: route morphs, masking, filters, translation along route, drawing of path, and so on.

Changelog

Produced [28 JUL 2015]

Downloads link