Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a Drawing Effect Animation using CSS
Overview
Cascading Styles Sheet (CSS) animation provides the HTML element a movement on the page. To achieve the drawing effect animation we need to have prior knowledge on the HTML svg element, path element and for CSS we should have knowledge on the animation and keyframe properties. As the svg element provides a space to build a custom image which can be inserted using the <path> element. So to make the drawing animation we should have the knowledge to build the svg strokes.
The svg path element has the following point data to build the strokes these data points are: moveto (M), lineto (L), horizontal lineto (H), vertical lineto (V), curveto (C), smooth curveto (S), closepath (Z), elliptical Arc (A), quadratic bezier curve (Q) and smooth quadratic bezier curve (T). The points data name is followed by the bracket name which is to be used in the “d” attribute to build the svg drawing.
Approach 1 :− Drawing shape
Algorithm
Step 1 − Create a HTML file in a text editor and add the HTML boilerplate to the HTML file.
Step 2 − Now create a svg element box container inside the body tag, add an viewbox attribute to the svg element. The viewbox element accepts the input value as the x−axis, y−axis, width and height.
<svg viewBox="0 0 500 500"></svg>
Step 3 − Now create a path element to the svg element, this will contain the points data for the svg strokes lines.
<path class="path" fill="white" stroke="green"/>
Step 4 − Now create the svg data points shapes and add that to the “d” attribute
<path class="path" fill="white" stroke="green" stroke-width="40"
d="M140 20C73 20 20 74 20 140c0 135 136 170 228 303 88-132 229-173 229-303 0-66-54-120-120-120-48 0-90 28-109 69-19-41-60-69-108-69z" />
Step 5 − Also you can add some of the attributes like stroke, stroke−width and fill.
Step 6 − Now add the style tag to the head tag and if necessary make styling for the layout.
<style>
h3 {
text-align: center;
color: green;
font-family: 'Segoe UI';
}
</style>
Step 7 − Now target the path element and set the stroke−dasharray and stroke dash−offset of the svg, add the animation property for the drawing animation.
<style>
.path {
stroke-dasharray: 3000;
stroke-dashoffset: 3000;
animation: drawing 5s linear forwards infinite;
}
</style>
Step 8 − Now add the @keyframe property for the animation name created for the above path element
<style>
.path {
stroke-dasharray: 3000;
stroke-dashoffset: 3000;
animation: drawing 5s linear forwards infinite;
}
@keyframes drawing {
to {
stroke-dashoffset: 0;
}
}
</style>
Step 9 − Open the browser and the drawing effect is created successfully
Example
We will create a heart shape drawing effect using the svg path. SO to build this, create a svg element and add a path tag within a svg tag, the path tag has an attribute “d” which takes the points data for the heart shape as coordinates. After creating this we will animate the path element using the animation property by setting the value of stroke−dashoffset.
<html>
<head>
<style>
h3 {
text-align: center;
color: green;
font-family: 'Segoe UI';
}
.path {
stroke-dasharray: 3000;
stroke-dashoffset: 3000;
animation: drawing 5s linear forwards infinite;
}
@keyframes drawing {
to {
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<h3>tutorialspoint.com</h3>
<svg viewBox="0 0 500 500" style="width:25%;display:block;margin:auto;">
<path class="path" fill="white" stroke="green" stroke-width="40"
d="M140 20C73 20 20 74 20 140c0 135 136 170 228 303 88-132 229-173 229-303 0-66-54-120-120-120-48 0-90 28-109 69-19-41-60-69-108-69z" />
</svg>
</body>
</html>
Approach 2 :− For drawing Text
Algorithm
Step 1 − Create a HTML file in a text editor and add the HTML boilerplate to the HTML file.
Step 2 − Create a parent div container which contains the letter of the text.
<div class="drawing"></div>
Step 3 − Now create a svg element box container inside the body tag, add an viewbox attribute to the svg element. The viewbox element accepts the input value as the x−axis, y−axis, width and height.
<svg viewBox="0 0 540 340"></svg>
Step 4 − Now create a path element to the svg element, this will contain the points data for the svg strokes lines.
<path class="path" fill="#0a0a0a" stroke="white" stroke-width="20"/>
Step 5 − Now create the svg data points shapes and add that to the “d” attribute.
<path class="path" fill="#0a0a0a" stroke="white" stroke-width="20"
d="m 300 300 v -256 h 95 v 114 h -94 h 94 v 140" />
Step 6 − Also you can add some of the attributes like stroke, stroke−width and fill.
Step 7 − To add more letters of the text repeat the step− 2,3,4,5.
Step 8 − Now add the style tag to the head tag and if necessary make styling for the layout.
<style>
h3 {
text-align: center;
color: white;
font-family: 'Segoe UI';
}
.drawing {
display: flex;
padding-top: 2rem;
}
</style>
Step 9 − Now target the path element and set the stroke-dasharray and stroke dash-offset of the svg, add the animation property for the drawing animation.
<style>
.path {
stroke-dasharray: 3000;
stroke-dashoffset: 3000;
animation: dash 5s linear forwards;
}
</style>
Step 10 − Now add the @keyframe property for the animation name created for the above path element.
<style>
.path {
stroke-dasharray: 3000;
stroke-dashoffset: 3000;
animation: dash 5s linear forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
</style>
Step 11 − Now open the browser and the drawing effect is created successfully.
Example
we will create a drawing effect with the text names. So for this we will be adding the letter wise path to the path element.
<html>
<head>
<style>
h3 {
text-align: center;
color: white;
font-family: 'Segoe UI';
}
.drawing {
display: flex;
padding-top: 2rem;
}
.path {
stroke-dasharray: 3000;
stroke-dashoffset: 3000;
animation: dash 5s linear forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
</style>
</head>
<body style="background-color: #0a0a0a;">
<h3>tutorialspoint.com</h3>
<div class="drawing">
<svg viewBox="0 0 540 340">
<path class="path" fill="#0a0a0a" stroke="white" stroke-width="20"
d="m 300 300 v -256 h 95 v 114 h -94 h 94 v 140" />
</svg>
<svg viewBox="0 0 540 340">
<path class="path" fill="#0a0a0a" stroke="white" stroke-width="20"
d="m 300 300 v -252 h 61 v 112 v -112 h 61 v 252" />
</svg>
<svg viewBox="0 0 540 340">
<path class="path" fill="#0a0a0a" stroke="white" stroke-width="20"
d="m 300 300 v -256 h 95 v 114 h -94 h 94 v 140" />
</svg>
<svg viewBox="0 0 540 340">
<path class="path" fill="#0a0a0a" stroke="white" stroke-width="20" d="m 300 300 v -256 l 90 256 v -256" />
</svg>
</div>
</body>
</html>
Conclusion
As in the above examples we have used the stroke, stroke width and fill attributes, so the stroke attribute denotes the color of the drawing we can customize the color of it by add the color value to it, the stroke width denotes the width of the drawing and fill attributes denotes the color inside the drawing component. This drawing feature is used as the graphic elements for the design of the web page.
240 Views
