Building a Circle Graph with SVGs
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
Watch video Building a Circle Graph with SVGs online without registration, duration hours minute second in high quality. This video was added by user Self Teach Me 07 April 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 1,568 once and liked it 119 people.