How to use SVG to generate an awesome page preload sketch animation effect

Online Demo

Local Downloads

1 Introduction to SVG

Scalable Vector graphics are based on Extensible Markup Language (a subset of the standard Common Markup Language) that describes a graphic format for two-dimensional vector graphics. It is developed by the World Wide Web Consortium and is an open standard.

2 Features of SVG

Compared to other image formats (such as JPEG and GIF), the advantage of using SVG is that:

SVG images can be created and modified by a text editor

SVG images can be searched, indexed, scripted, or compressed

SVG is scalable

SVG images can be printed with high quality at any resolution

SVG can be amplified when the image quality is not degraded

3 Browser Support

Internet Explorer 9, Firefox, Opera, Chrome, and Safari support inline SVG. Internet Explorer version 8 or earlier, you can support SVG by installing the Adobe SVG Viewer.

4 SVG Tags

The SVG code starts with the <svg> element, including opening tags <svg> and closing tags </svg>. This is the root element. The width and Height properties set the breadth and height of this SVG document. The Version property defines the SVG versions that are used, and the xmlns attribute defines the SVG namespace.

5 SVG Making sketch Line animation example

1) First draw a sketch line:

<svgversion= "1.1"xmlns= "Http://www.w3.org/2000/svg"ViewBox= "0 0">    <!--whether the Fill property fills the stroke for drawing, the color #aaaaaa stroke-width is the thickness of the drawn line D is the specific data, the data you see here represents the coordinates, and the polyline, and so on, you can use the tool to generate -    <PathFill= "None"Stroke= "#AAA"Stroke-width= "2"D= "M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215 "    />    </svg>

The parameters of the sketch line can be generated using tools,

Related Course Basics SVG tags Introduction

2) animation and principle of SVG implementation sketch

Stroke-dasharray = "Ten"  Stroke-dashoffset = "0"

Stroke-dasharray defines the length of the resulting segment and the gap between its segment and segment, which contains two parameters

Stroke-dashoffset defines where to start rendering a generated segment from that location

Related courses The simulation effect and principle of SVG realization in sketch animation

3) Use CSS3 to achieve sketch animation effect

/ *Defining Keyframe Animations*/    /*add animation to path element*/. path{Stroke-dasharray:265.07; Stroke-dashoffset:265.07;    Animation:dash 3s linear infinite; /*Support Chrome*/-webkit-animation:dash 3s linear infinite; } @keyframes dash{ from{Stroke-dashoffset:265.07;/*here is the length of the sketch line in the SVG graph, which can be obtained using JS*/} to{Stroke-dashoffset:0; }    }    /*support for Chrome browser*/    @-webkit-keyframes dash{ from{Stroke-dashoffset:265.07;/*here is the length of the sketch line in the SVG graph, which can be obtained using JS*/} to{Stroke-dashoffset:0; }    }

Related courses using CSS3 to achieve sketch animation effect

4) Use JavaScript to adjust the parameters of the animation effect

/ *Defining related JavaScript*/    varCurrent_frame,//defining the current frameTotal_frames,//define the total number of framesPath//defining the unique path element in SVGLength//defines the length of the sketch generated by PathHandle//defining JavaScript Animation handlesPath = document.getElementById ('Path'), Length=path.gettotallength (); //Defining initialization Methods    varinit =function () {Current_frame=0; Total_frames= the; Path.style.strokeDasharray= length +' '+ length;//define DasharrayPath.style.strokeDashoffset = length;//define DashoffsetHandle =0; }    //define the actual animation drawing method    varDraw =function () {varprogress = current_frame/Total_frames; if(progress>1){//This defines the complete animationWindow.cancelanimationframe (handle); }Else{//otherwise use Reqeuestanimationframe to generate animationscurrent_frame++; Path.style.strokeDashoffset= Math.floor (length* (1-progress)); Handle=Window.requestanimationframe (Draw); }    }    //define a re-run method    varRerun =function () {init ();    Draw (); }    //page load is runRerun ();

Here the main definition of the initialization method and animation method of drawing, window.requestanimationframe (draw);

To create an animation.

Related courses using JavaScript to achieve sketch animation effects

5) We use the logo of the Geek label as the original image, the coordinate parameter is generated with the Inkscape tool.

When we run the animation drawing program, we see the very cool preloaded animations as the lines are set to be drawn in the same way.

To see the full effect, visit the light video lesson: Using JavaScript to generate the sketch animation effect of the Geek tag logo

How to use SVG to generate an awesome page preload sketch animation effect