Just FYI - the y coordinates for the first polygon and the rect are outside of the bounds of the viewbox. You can only choose y values between -100 and 100 correct? took me forever to figure out why I couldn't get my tree trunk to appear
For the Christmas tree, I can't seem to get the brown trunk at the bottom. It said width and height have display inline which prevents them from having an effect. There is no display so not sure what this mean and how it affect the brown trunk from not showing. I can set the y to 50 and I can see the full square brown shape. But once I start increasing y to move it down, it start to disappear. Any idea why this might be?
@@HarisIftikhar I was thinking of that, but it's actually hard to make a video on that because it's such a wide topic. Where would you start? What would you like to learn or achieve with that first?
@@ShoSho-cq7ct Mostly I just try to imagine how it should be and come up with an approximate value, see how that looks like, then refine it till the parts are in place. Sometimes I draw it on paper and try to calculate the positions based on that. Or if something geometric then I use trigonometry. But yeah, all these methods require a bit of imagination, there's no easy way if you do it from code. Did that help?
@@HunorMartonBorbely codepen.io/unus-annus-is-ending/pen/xxEdPKd If you have a suggestion on how I should change the document that is linked, please tell me.
Just FYI - the y coordinates for the first polygon and the rect are outside of the bounds of the viewbox. You can only choose y values between -100 and 100 correct? took me forever to figure out why I couldn't get my tree trunk to appear
Hi Nicholas! Yes, that's a mistake there. Thank you for pointing it out. The SVG tag should be something like this:
So much value, thanks for the great content :)
Thank you :)
Let me know what topic would you like me to cover in my next video 🙂
Thanks for all those great examples.
Thanks, man! That introduced me to a new great svg-js world!
Yup, it's a whole new world!
Very nice learning curve in your video. I have enjoyed a lot. Thanks.
I’m glad you liked it! I’ll add a new more detailed example next week. Stay tuned for that!
Great content. Thank you for creating
Glad you enjoy it! What would you like to see next?
Thanks so much, bro! Never don't stop!
Thanks man, I appreciate it :)
Thank you so much. That's a great tutorial.
Check out SVG-tutorial.com for an updated version :)
Simply awesome.
Greatest tutorial in the world
Thank you :)
Perfect, keep uploading
I’m on it, thanks :)
Thanks so much!, This is a wonderful Tutorial ! :D
You’re welcome :)
Perfectly explained 👌🏽
Valuable content. ✔︎ #KeepItUp✌🏼
Thank you! Will do! I took a break as you see and also started a new job, but as the weather gets cold again, I think I get back to it soon ✌️
For the Christmas tree, I can't seem to get the brown trunk at the bottom. It said width and height have display inline which prevents them from having an effect. There is no display so not sure what this mean and how it affect the brown trunk from not showing. I can set the y to 50 and I can see the full square brown shape. But once I start increasing y to move it down, it start to disappear. Any idea why this might be?
There is an error in the coords, the bottom is out of the frame. Replace viewBox like this: "-100 -100 300 300".
Thank you Guido for jumping in. Yes, there is a mistake in the code. The SVG tag should be something like this:
I loved looking through this and leanred a lot! Are there any more videos on svgs?
This one is a short one about how to use SVGs with React: th-cam.com/video/t8ZG3xlLsOY/w-d-xo.html
Oh and this one goes into more details too: th-cam.com/video/ULomsOSk4JA/w-d-xo.html
👍good content
Great content, thanks you!
My pleasure :)
New Subscriber! Really cool videos😎
Thank you! What would you like to see next?
@@HunorMartonBorbely more web dev related videos. An intro to js course would be great!
@@HarisIftikhar I was thinking of that, but it's actually hard to make a video on that because it's such a wide topic. Where would you start? What would you like to learn or achieve with that first?
@@HunorMartonBorbely modifying the dom with javascript might be a good one
Great content! how do you define the x,y coordinates to put the graphics together?
I'm not sure if I get the question. How do I know what the value of X and Y are or how do I position different parts?
@@HunorMartonBorbely yes how do you know the numeric value of x and y to position different parts?
@@ShoSho-cq7ct Mostly I just try to imagine how it should be and come up with an approximate value, see how that looks like, then refine it till the parts are in place. Sometimes I draw it on paper and try to calculate the positions based on that. Or if something geometric then I use trigonometry. But yeah, all these methods require a bit of imagination, there's no easy way if you do it from code. Did that help?
@@HunorMartonBorbely yes thank you for your explanation
!
Check out also svg-tutorial.com where you can find the same examples with updated content
Lovely tutorial! First!
Thank you :)
@@HunorMartonBorbely codepen.io/unus-annus-is-ending/pen/xxEdPKd If you have a suggestion on how I should change the document that is linked, please tell me.
@@christianmoore7046 Oh man, you are the best 🌟✋ Thank you :)
I subscribe you ! Thank you for the tutorial !
Thank you :)
cool stuff
SVG has always been a mistery for me
Ahogy Lovasi András mondaná: Köszi!
Give honor to original designer
Very good point, thanks for pointing it out. I added the main inspirations and originals to the description here and on CodePen