Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to create a Drawing Effect Animation using CSS
CSS drawing effect animation creates visually appealing illustrations that appear to be drawn in real-time. This effect is achieved using SVG paths combined with CSS animations, particularly leveraging stroke-dasharray and stroke-dashoffset properties.
Syntax
.path {
stroke-dasharray: length;
stroke-dashoffset: length;
animation: name duration timing-function fill-mode;
}
@keyframes name {
to {
stroke-dashoffset: 0;
}
}
Method 1: Drawing Shape Animation
The following example creates a heart shape that appears to be drawn progressively
<!DOCTYPE html>
<html>
<head>
<style>
.container {
text-align: center;
padding: 20px;
}
.path {
stroke-dasharray: 2000;
stroke-dashoffset: 2000;
animation: drawing 4s ease-in-out forwards;
}
@keyframes drawing {
to {
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<div class="container">
<h3>Heart Drawing Animation</h3>
<svg viewBox="0 0 500 400" style="width: 300px; height: 240px;">
<path class="path" fill="none" stroke="#e74c3c" stroke-width="6"
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>
</div>
</body>
</html>
A red heart shape is drawn progressively from left to right over 4 seconds, creating a smooth drawing effect animation.
Method 2: Drawing Text Animation
This example demonstrates text letters being drawn one by one
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #2c3e50;
margin: 0;
padding: 20px;
}
.text-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 200px;
}
.letter {
margin: 0 10px;
}
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: drawText 3s ease-out forwards;
}
.letter:nth-child(1) .path { animation-delay: 0s; }
.letter:nth-child(2) .path { animation-delay: 0.3s; }
.letter:nth-child(3) .path { animation-delay: 0.6s; }
.letter:nth-child(4) .path { animation-delay: 0.9s; }
@keyframes drawText {
to {
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<div class="text-container">
<svg class="letter" viewBox="0 0 100 120" width="60" height="80">
<path class="path" fill="none" stroke="#ecf0f1" stroke-width="4"
d="M20 100 V20 H80 V55 H20 H80 V100" />
</svg>
<svg class="letter" viewBox="0 0 100 120" width="60" height="80">
<path class="path" fill="none" stroke="#ecf0f1" stroke-width="4"
d="M20 100 V20 H40 V55 V20 H60 V100" />
</svg>
<svg class="letter" viewBox="0 0 100 120" width="60" height="80">
<path class="path" fill="none" stroke="#ecf0f1" stroke-width="4"
d="M20 100 V20 H80 V55 H20 H80 V100" />
</svg>
<svg class="letter" viewBox="0 0 100 120" width="60" height="80">
<path class="path" fill="none" stroke="#ecf0f1" stroke-width="4"
d="M20 100 V20 L70 100 V20" />
</svg>
</div>
</body>
</html>
White letter shapes appear to be drawn one by one with a 0.3-second delay between each letter, creating a sequential text drawing effect on a dark blue background.
Key Properties
| Property | Description |
|---|---|
stroke-dasharray |
Defines the length of dashes and gaps in the stroke |
stroke-dashoffset |
Specifies the distance to offset the dash pattern |
animation-delay |
Controls when each animation starts for sequential effects |
Conclusion
CSS drawing effect animation combines SVG paths with CSS animations to create engaging visual experiences. By manipulating stroke-dasharray and stroke-dashoffset properties, you can create smooth drawing effects for both shapes and text elements.
Updated on: 2026-03-15T17:53:49+05:30
901 Views
Advertisements