Wow, I had to re-watch your video like 3 times to be able to grasp it and correct my bugs. But in the end I did it! Thank you so much!!! This is a really useful skill.
Hi, when i run the source code provided in the description, only half of content can be seen, the bottom curve overflows and hidden as you put overflow:hidden. if i set auto then i have to scroll to bottom to see the full content. The whole content is not taking the browser's height How can i solve this?
what about the external SVG files, to be used as clip-path of the elements while the size of the element unknown and still the SVG applied as clip-path, to be in the boundaries of the elements applied on
What do you think would be the best way to draw a donut shaped div? Like an element that has all the properties of a normal div e.g. hoverable and can have eventlisteners added to it?
@@RedStapler_channel let's say user have to click something, just beyond edge of this svg shape - how would you do that? pointer-events:none for whole div? Edit: I had to make once nav menu of such fancy shape, if I remember well I've made it frome pure svg, no div.
I've changed the height of the div curved, but the svg block stay still, it doesn't move down to the end of the div and it makes a HUGE bottom line, can you help me?
Many thanks for this video. I have a problem with the upper curve under Firefox: i.e. the bottom line is still appearing even after changing the last viewbox value. Would you have a solution to this problem? Many thanks in advance.
it seems like "Now i am the web developer" yeah and credit goes to you thank bro
Tolly agree with you :)
Channel is great indeed.
This channel should be awarded as best channel in web development category.
Thank you so much for your kind help!
Great that you also mention the tools you use! To make it perfect, link to the tools in the description. 👍
I had the issue with the line in the past. Glad you found a solution!
Thank you so much!
not the cleanest solution but it works! :)
@@RedStapler_channel Any better solution??
I always wondered how it could be done. Thanks pal. It worked like charm
very good, continue...
Wow, I had to re-watch your video like 3 times to be able to grasp it and correct my bugs. But in the end I did it! Thank you so much!!! This is a really useful skill.
bro please tell my how to increase the width of svg of get waves
That looks so wavy!! Great project!!
Thank you for this video! It's very useful and straight to the point 👍
You are the man! I've been trying to do this correctly for a while. Thanks!!
hi..does a line appear when you switch to mobile view?
Thanks a milli needed this!
Your channel is superb! Just continue on this way! Thanks for the video.
Thank you dude! I have been searching for this for ages!!👍👍👍
glad you like it. you could help support us to make more tutorials by sharing it to your friends :)
@@RedStapler_channel yes thank you!👍
Thanks so much for the tutorial! You made it easy! It was a bit tough figuring out in bootstrap
love your channel bro from INDIA
Gud bro very informative tutorial.. love you
thank you very much, love from nigeria, have been looking for this
Hi, when i run the source code provided in the description, only half of content can be seen, the bottom curve overflows and hidden as you put overflow:hidden. if i set auto then i have to scroll to bottom to see the full content. The whole content is not taking the browser's height How can i solve this?
Thank you, thank you, thank you!!!
It looks sooo cool! :)
Great tutorial👍🏻 straight to the point
what about the external SVG files, to be used as clip-path of the elements while the size of the element unknown and still the SVG applied as clip-path, to be in the boundaries of the elements applied on
Wow! This Is A Great Educative Video
thank you so much, this is really helping and easy to understand
Thank you so much for this design. This design will be part of my new web page design...
What do you think would be the best way to draw a donut shaped div? Like an element that has all the properties of a normal div e.g. hoverable and can have eventlisteners added to it?
Amazing video never knew how this was done, now I know!
bro this is gold
Thanks a lot for posting this video
Thank you so much! This works as a dream
This helped me so much. Thankyou!
Gotta say it... thank you VERY MUCH!
Very helpful! Thank you so much!!
Thank you for this. Can the white part be removed?
Thank you! This is so awesome
excelent!! thanks you for the content :D
This is really helpful. Thanks for sharing.
Thanks so much!!it really helped me!! :))
You are simply great...💛
Thank you #RedStapler!😘
Nice effect, but to be precise div shape didn't changed. CSS clip-path could change it, but it would be spikey.
the problem with clip-path is it also clip the content, making it difficult to design :(
@@RedStapler_channel let's say user have to click something, just beyond edge of this svg shape - how would you do that? pointer-events:none for whole div? Edit: I had to make once nav menu of such fancy shape, if I remember well I've made it frome pure svg, no div.
what's ur mic name
or link of buying it plz
and thanks for this awesome tutorial
Thankyou so much bro it help me alot
3:38 what if this line still appears after this? :/
Thank you very much for this video, looking for this solution.
Thanks so much for the tutorial.
there is a white line between the two svgs.. what can i do to remove it? nothing works
I've changed the height of the div curved, but the svg block stay still, it doesn't move down to the end of the div and it makes a HUGE bottom line, can you help me?
is there no way to put the path in css? ive been doing it in css with simple shapes, but id like to make a shield shape
cannot remove white space around svg. This issue is only visible on mobile. svg display is set to block, margin:0. What else could be done?
Cool, i will use it on my next project! Thanks a lot.
Thank you so much!
Smart approach! With your method! Could I add also gradient curved shape?
That was awesome !!.. thank you for this great tutorial..!!
Good work keep it up!! :)
Sir there is line on the bottom of it, i did change to 320 to 319 but i still remains, please helpp
This is so easy to understand thank you!
Thank you so much
do you kno anyway that you can make a gradient as the color?
can i add more height to the gradient and how i do it
what if I want to have a wavy design on the right side?
Thanks
thank you so much for this video
Can you also send the link for the SVG Path generator?
Thank you so much.
Which website did you use for creating that svg
Wau, la verdad es que si me ayudo mucho, Thanks
Many thanks for this video. I have a problem with the upper curve under Firefox: i.e. the bottom line is still appearing even after changing the last viewbox value. Would you have a solution to this problem? Many thanks in advance.
Did you put your svg as "display: block"? I was having the same problem, but it was because I forgot about the display.
@@tobeagoofy youre the bESTTTT
Which software are u using ?
isnt'it a white stapler of background having red.
Thanks alot..Please share the tools link in the description.
Much love
thank you so much :D
It's a white Stapler though...on a red backdrop.
Nice!
Is there a way to import a .svg file into a tag, and apply a background-image with css?
Yes
just use src="kaerits file.svg"
@@samuelmatheson9655 thanks i'll try it
Thank you for this tutorial, what theme are you using in vs? it's just awesome and clean.
default theme. I just increased the font size.
@@RedStapler_channel Thank you and keep teach us;)
love your voice
But the stapler is white
How can we do that on Shopify ?
Thanks bro
I clicked on this video and the advertisement I got was "I'm in love with the shape of you" song 😑😑
what program are you using?
vscode
Thank you
oh, it's fun!
Awesome
How to reduce height if I want to?
set new height when generating svg
Wow 💯
Thank you
thanks
you rock
❤😊
Your stapler is definitely white
i selled this to a customer for 100 €
you are funny
Thank you
thanks