Guest Posted February 7, 2022 Share Posted February 7, 2022 Hello, i am sorry maybe i ask some basic questions but i try to drow like this svg from center>> i know they a draw svg plugin in gsap , but can i use css only ,?? then i need it to svg cuz it's easy to draw , then i want to make height dynamic right? thanks Link to comment Share on other sites More sharing options...
elegantseagulls Posted February 7, 2022 Share Posted February 7, 2022 1 hour ago, Lolia Trafam said: but can i use css only Yes this is possible with just CSS, but there are a lot of complexities involved in that. That's what makes DrawSVG so nice: It does a lot of the math and gotcha-catched for you. Other than that, I'm not sure what you are asking. Please try and keep questions clear and relevant to gsap. 2 Link to comment Share on other sites More sharing options...
Guest Posted February 8, 2022 Share Posted February 8, 2022 10 hours ago, elegantseagulls said: Other than that, I'm not sure what you are asking. Please try and keep questions clear and relevant to gsap. i try that, but i have 2 problem first i cannot draw the marker then the lines don't get the height of parent thanks!!!!! http://jsfiddle.net/pvq087g4/2/ Link to comment Share on other sites More sharing options...
OSUblake Posted February 8, 2022 Share Posted February 8, 2022 18 minutes ago, Lolia Trafam said: first i cannot draw the marker What you mean by draw the marker. How are you expecting it to look? 18 minutes ago, Lolia Trafam said: then the lines don't get the height of parent I'm also not sure what you mean here. Everything inside the SVG scales according to the viewBox. Link to comment Share on other sites More sharing options...
Guest Posted February 8, 2022 Share Posted February 8, 2022 11 minutes ago, OSUblake said: What you mean by draw the marker. How are you expecting it to look? the arrow shape , i want to draw it like the lines , i mean draw animation Link to comment Share on other sites More sharing options...
OSUblake Posted February 8, 2022 Share Posted February 8, 2022 I don't think that's really possible by just animating a stroke. You would probably have to animate a mask, kind of like what @PointC does in his calligraphy handwriting tutorial. https://www.motiontricks.com/svg-calligraphy-handwriting-animation/ 3 Link to comment Share on other sites More sharing options...
mikel Posted February 8, 2022 Share Posted February 8, 2022 Hey @Lolia Trafam, In combination with the MotionPathPlugin it could work like this: See the Pen oRazzE by mikeK (@mikeK) on CodePen or https://codepen.io/mikeK/details/rNMxePX/d08a34f0e4bca3bdb59e4b91ecdc6e75 Happy tweening ... Mikel 3 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now