diff --git a/7-animation/1-bezier-curve/article.md b/7-animation/1-bezier-curve/article.md
index b9e2cf6eb..63b9a03ce 100644
--- a/7-animation/1-bezier-curve/article.md
+++ b/7-animation/1-bezier-curve/article.md
@@ -4,6 +4,12 @@ Bezier curves are used in computer graphics to draw shapes, for CSS animation an
They are a very simple thing, worth to study once and then feel comfortable in the world of vector graphics and advanced animations.
+```smart header="Some theory, please"
+This article provides a theoretical, but very needed insight into what Bezier curves are, while [the next one](info:css-animations#bezier-curve) shows how we can use them for CSS animations.
+
+Please take your time to read and understand the concept, it'll serve you well.
+```
+
## Control points
A [bezier curve](https://en.wikipedia.org/wiki/B%C3%A9zier_curve) is defined by control points.
diff --git a/7-animation/1-bezier-curve/bezier3-draw1.svg b/7-animation/1-bezier-curve/bezier3-draw1.svg
index fd3ca092f..b3cf15aed 100644
--- a/7-animation/1-bezier-curve/bezier3-draw1.svg
+++ b/7-animation/1-bezier-curve/bezier3-draw1.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/7-animation/1-bezier-curve/demo.svg b/7-animation/1-bezier-curve/demo.svg
index 5240697ee..56d5b3fbe 100644
--- a/7-animation/1-bezier-curve/demo.svg
+++ b/7-animation/1-bezier-curve/demo.svg
@@ -153,6 +153,9 @@ http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#path_C
points[i].y = y;
setPointCoords(point, i);
drawPath();
+ if (t > 0) {
+ drawT(points, t - STEP);
+ }
}
document.onmouseup = function() {
document.onmousemove = document.onmouseup = null;
@@ -212,6 +215,7 @@ http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#path_C
}
}
+ const STEP = 0.005;
let t = 0;
let timer;
@@ -241,7 +245,7 @@ http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#path_C
return;
}
- t += 0.005;
+ t += STEP;
}, 30);
}