Building a Circle Graph with SVGs

Опубликовано: 14 Ноябрь 2024
на канале: Self Teach Me

1,568

119

In this video, we build and animate a circle graph with SVGs.

0:00 Intro
1:57 Inside CodePen, namespaced SVG
3:10 View Box Explained
4:19 Writing the circle by hand
5:20 Styling the circle
5:35 Creating the progress circle
6:42 Determining the width of our circle
7:30 Adjusting the progress circle for the percentage
8:43 Positioning the progress circle
9:56 Rounding the end of the progress circle
10:08 Animating the progress circle
11:18 Adding the text to our circle
11:32 Positioning and Styling the text
13:14 Scaling our circle graph up and down

🎁 FREE SVG CHEAT SHEET: https://selfteachme.ck.page/ee58f2eb85
7️⃣ Ways to use SVGs
✅ Pros and ❌ Cons for each method
💎 Tips for implementing

💥 ZEAL IS HIRING 💥
https://www.codingzeal.com/hiring

🤖 CODE
Final CodePen - https://codepen.io/ahaywood/pen/eYBKYVb

🔗 LINKS
CodePen - http://codepen.io

📹 OTHER VIDEOS IN THIS SERIES
Playlist:    • Comprehensive Guide to Getting Starte...
Part 1 - Getting Started with SVGs:    • Getting Started with SVGs
Part 2 - SVG in CSS:    • SVGs in CSS
Part 3 - Svgs with Base64 -    • How to Use SVGs with Base64
Part 4 - SVG Sprites -    • How to create and use an SVG Sprite
Part 5 - - You are here, THAT'S THIS VIDEO
Part 6 - Animating an SVG Hamburger -    • Animating a Custom Hamburger Menu

👉🏻 Get Updates and Exclusive content at http://selfteach.me
💥 SelfTeach.me is a Zeal show: http://codingzeal.com