Search the Community
Showing results for tags 'stroke-width'.
Found 5 results
-
Hi all, bit of a conundrum: I have a rudimentary globe and looking to animate a simple spin. I've decided on using scaleX and transformOrigin: "100% 50%" to just scale over to -1 and it works 'perfectly'. Unfortunately scaleX also scales the stroke—I tested vector-effect="non-scaling-stroke" but unfortunately it removes the proportion / resizing attributes that I'm relying on to keep the SVG working as intended in IE11. Besides switching to stroke-width: 3.5vw and media queries or some variation, any simple solutions?
-
Hi everyone! This is my first time using GSAP, and as a learning experience, I'm trying to create a clone of the Twitter heart animation, seen here. I've came to a stumbling block, however, when it comes to step 6 on the above link (the hollowed-out circle). My initial plan was to simply create an SVG with a transparent fill-colour and then animate the width of the circle, but stroke-widths aren't animatable in GSAP (and it appears anywhere), so does anyone have any suggestions of how to create this step? The centre of the circle needs to be transparent, so the "hacks" that have came to mind so far won't suffice. For example, creating two circles, with a smaller white one on top of a larger one to fake the hollowed-out centre (if that makes sense?). That won't work because the SVG will need to be transparent to fit on photos, for example. Does anyone have any ideas of how to solve this problem? Thanks!
-
Referencing this post by Blake - http://greensock.com/forums/topic/15152-drawing-in-a-mask-doesnt-completely-cover-line/#entry65724 It would be awesome if we were able to animate stroke width across the length of a path! Blake mentions that in the process you might be able to fix a browser masking issue we have no control over where there are overlapping strokes in a path due to higher stroke-width values.
-
I'm having to work with huge collections of simple line-art SVGs and set up an app that will find all the various elements of the SVG (line, path, rect, etc), add drawSVG to them and export out to video. There's an entire folder where the artist decided to use paths with no stroke-width but, instead, used fills between adjacent paths. Forms little 4px channels where there should be 4px stroke-width on a single line. But, in most of the other folders in the same collection, the artist used paths with stroke-widths as you would expect. Referencing the Codepen, the first 2 SVGs that appear have lines/paths with strokes and the next 2 use no-stroke lines/paths with fill in-between as mentioned. You can see that the last 2 are like, "hey, there are no lines to draw here, move along!" The other trick is that I have to be able to do this programmatically - won't know if one of these is being loaded. I could check for paths with no stroke-width, etc., but, man! Welcome to the world of high inconsistency. Does anyone know of a way to detect and hack one of these so that it draws in/out?
-
Hi, I am having an issue animating/tweening the width of a rect element within an SVG. When using scaleX with a percentage value, the rect animated perfectly, however the SVG stroke scales with the box, which is not ideal, I would also prefer to specify a specific value as opposed to a percentage. When using width with a pixel value (without appending "px"), the rect does not animate. If you inspect the element you will notice the animation being applied to the correct element, however the value being applied to the rect is specified in pixels with the "px" appended, which is not a value SVG elements recognise/respond to. I hope my explanation makes sense. If anyone can shed some light on this it would be greatly appreciated. Thank you.
