d="M20 50, A 0 0, 0, 0 0 , 80 50" equals d="M20 50, a 0 0, 0, 0 0 , 60 0" A = Absolute positioning respect to M20 50. Final position is (80 50). a = delta increments relative to M20 50, then final position will be: 20 + 60 = 80 and 50 + 0 = 50 (80 50)
Thank you very much. I referred to many sources such as MDN but couldn't understand the concept of SVG arcs at all. Through your video, I was able to grasp the concept very clearly and quickly.
13:00 you forgot to explain what happened, but I played around with it and I understood, to understand too simply make another SVG with the same two arcs, and replace the radius of the width with the radius of the height, also, do not rotate, you will see you get the same thing, if you then rotate these arcs to 90 degrees again you will form the circle you had before, at the start, since radius of height will again change with radius of width, its nice to know how it works.
Thank you so much for that explanation bro, it was too easy to understand for me that way to work this important tool and now I'll have to practice by my own count to understand some SVG definitions as well. Thanks bro!
@@RobertoMusicHelp I'm learning this tool because 3 years ago I tried to learn html, ccs and Javascript but unfortunately I didn't learn. I want to see if I learn as much as I can this to see if I make a living doing jobs with this technology, my friend.
@@nelsonromero6151great goal to have! Take it slow and more than anything practice, practice, PRACTICE! That's really the only way to get really good at HTML, CSS, and JAVASCRIPT.
@@RobertoMusicHelp Thanks for the advice friend, but I have decided that I will no longer dedicate myself to using those tools in a very deep way; I will dedicate myself to develop myself in SVG and open a world of opportunities with this technology because I know that it is very good.
Thanks for the explanation. As far as I understand, x-radius and y-radius work as proportions if they are less than actual radius, but if they are bigger than actual radius, they work as pixels. Is it correct?
Sorry about that. When I created this tutorial it was with the "poor" assumption that most people would watch this on their laptop or desktop. Regardless, I will be more aware of how I record for most users. Thanks for watching!
16:00 is there some formula to determine how much we want to push down the bigger circle so it matches the arc? I'm playing with it and I have no idea how to position them ideally
You would have to calculate the midpoint of the circle from 2 given points of the circle and the radius. Because both points have the same y-value in this case, it's not that hard, because you get a right triangle from starting point, the point in the middle of start and endpoint and the midpoint of the circle. One side of the triangle has the radius with 40, the distant from start to the point in the middle of start and end is half of distance from start and endpoint, so 20 and then you can do pythagoras to get length of the third side with sqrt(40²-20²)=34.6. You add this value to the y-value of the point in between and get the solution. 50+34.6=84.6 Sadly it's not that easy if both arcpoint don't have at least one coordinate the same value. Then you have more fancy stuff like rotating both points around an agle, so one of their coordinates gets the same value, calculate it the same way and at the end rotate them back the same way to find the solution.
d="M20 50, A 0 0, 0, 0 0 , 80 50" equals d="M20 50, a 0 0, 0, 0 0 , 60 0"
A = Absolute positioning respect to M20 50. Final position is (80 50).
a = delta increments relative to M20 50, then final position will be: 20 + 60 = 80 and 50 + 0 = 50 (80 50)
Thank You, this is most valuable help. I was completely lost for not knowing about the behaviour of the radius parameters.
Happy to be of service.
Thanks! I really appreciate this video. Greetings from Colombia!
You're very welcome!
very clear explanation, best one online 👍
Wow, thanks!
Make more videos buddy, I like your teaching,
I request you to make canvas videos 😃😃
Perfect explanation. Thankyou
Happy to be of service!
man that was fast. i just asked you a few days ago... you are awesome!!!
Thank you nice and clear, hello from New Zealand
You are very welcome
thank you that is more clear for me
You're very welcome! Happy to be of service!
omg ive been searching for how to do this. i love you bro
Glad I could be of help!
Do not worry. Your efforts were not wasted.
Thank you very much. I referred to many sources such as MDN but couldn't understand the concept of SVG arcs at all. Through your video, I was able to grasp the concept very clearly and quickly.
Very happy to be of service!
This was helpful indeed
I was following the mozila tutorial and found a few points difficult about arc but you made it clear. Thx
I'm glad I was able to help!
Thanks SO MUCH for the tutorial Roberto! A crystal clear explanation. I'll be sure to check out your other videos.
Glad you liked it! Happy to be of service!
Thanks for the tutorial, it's 100x better than the mozilla one
Glad you think so! I know everyone doesn't like too much tech-speak. As a teacher, I pride myself on making complicated things more understandable.
Good teaching style.
Thank you.
Thank you very much for this valuable information in an understandable way
You're very welcome.
13:00 you forgot to explain what happened, but I played around with it and I understood, to understand too simply make another SVG with the same two arcs, and replace the radius of the width with the radius of the height, also, do not rotate, you will see you get the same thing, if you then rotate these arcs to 90 degrees again you will form the circle you had before, at the start, since radius of height will again change with radius of width, its nice to know how it works.
Very nice and detailed elaboration. Many thanks.
You're quite welcome! Happy to be of service.
great set of tutorials will be using them a lot
Brilliant intro into arcs. Top video.
Much appreciated
great explanation. thank you man
You're quite welcome!
Amazing! Thanks!
You're very welcome.
Thank you so much for that explanation bro, it was too easy to understand for me that way to work this important tool and now I'll have to practice by my own count to understand some SVG definitions as well. Thanks bro!
You're very welcome. I'm glad you could learn something!
@@RobertoMusicHelp I'm learning this tool because 3 years ago I tried to learn html, ccs and Javascript but unfortunately I didn't learn. I want to see if I learn as much as I can this to see if I make a living doing jobs with this technology, my friend.
@@nelsonromero6151great goal to have! Take it slow and more than anything practice, practice, PRACTICE! That's really the only way to get really good at HTML, CSS, and JAVASCRIPT.
@@RobertoMusicHelp Thanks for the advice friend, but I have decided that I will no longer dedicate myself to using those tools in a very deep way; I will dedicate myself to develop myself in SVG and open a world of opportunities with this technology because I know that it is very good.
Also a good idea.
Thank you very much for this video. Very clear and useful.
Glad I could be of service!
great stuff
Glad you like it.
Thank you for teaching me this! :)
You're quite welcome!
LEGEND
Glad I could be of Service!
Great videos, Sir. Thank yyou very much.
You're very welcome!
Thank you very much...
thank you so much!!!!!!
You’re very welcome!
Very well explained.
great tutorials. thank you
Very helpful! Thank you!
Glad to be of service!
On remark. the latter two settings (no 4 and no 5) should always be switch at the same time. 1 0 or 0 1.
thank you so much, it helps me a lot :D
Thanks for the explanation. As far as I understand, x-radius and y-radius work as proportions if they are less than actual radius, but if they are bigger than actual radius, they work as pixels. Is it correct?
You got it!
@@RobertoMusicHelp thanks!!!
also thank you
do i need to understand about proportions to understand the concept of arcs in svg?
Proportions? If you mean measurements, yes, sort of. Everything is proportional to whatever sized svg you choose.
Bigger code font would help.
Sorry about that. When I created this tutorial it was with the "poor" assumption that most people would watch this on their laptop or desktop. Regardless, I will be more aware of how I record for most users.
Thanks for watching!
I think whoever originally implemented SVG arcs must have been high.
16:00 is there some formula to determine how much we want to push down the bigger circle so it matches the arc? I'm playing with it and I have no idea how to position them ideally
You would have to calculate the midpoint of the circle from 2 given points of the circle and the radius. Because both points have the same y-value in this case, it's not that hard, because you get a right triangle from starting point, the point in the middle of start and endpoint and the midpoint of the circle. One side of the triangle has the radius with 40, the distant from start to the point in the middle of start and end is half of distance from start and endpoint, so 20 and then you can do pythagoras to get length of the third side with sqrt(40²-20²)=34.6. You add this value to the y-value of the point in between and get the solution. 50+34.6=84.6
Sadly it's not that easy if both arcpoint don't have at least one coordinate the same value. Then you have more fancy stuff like rotating both points around an agle, so one of their coordinates gets the same value, calculate it the same way and at the end rotate them back the same way to find the solution.
You missed the angle
MDN is good