Hi all,
In my codepen I am using drawsvg to draw the stroke which has stroke-width:18px - but how would I do this for an uneven stroke something like the Canva logo below?
I am not asking can drawsvg draw uneven widths? - I think the answer is no - so I am asking is there some workaround or different approach for this.
If i draw the letters with strokes then I can use drawsvg but I am stuck with a fixed stroke-width.
If I draw the letters with fills / shapes instead of strokes then I can have the variation in width but I can't use drawsvg.
I guess I could use drawsvg and apply masks to thin sections of the stroke but is there a better way with or without drawsvg?
Hi all,
My SVG flower classes animate in the order given by the HTML = pink, blue, red, purple - can anyone please tell me how I could say - animate in a random order each time the page is loaded eg blue first, next time red first etc
Hi all,
I want to say:
when image 1 enters the viewport, run the timeline on image 1
when image 2 enters the viewport, run the timeline on image 2
etc
But so far I am getting - when image 1 enters the viewport, run the timeline on all the images at the same time.
Can anyone please correct my pen?
Thanks...
My pen is simplified in order to ask the question so hopefully it would make more sense with the background details. But anyway thanks a lot for your help 👍
@Zach thanks a lot. I will read your article in depth thank you 😀 but for now your pen does "reverse the timeline on mouseleave" but in my question it was not reverse timeline on mouseleave but reverse timeline on next mouseenter =
first mouseenter - play the timeline
(mouseleave does nothing)
second mouseenter - reverse the timeline
(mouseleave does nothing)
third mouseenter - play the timeline
(mouseleave does nothing)
fourth mouseenter - reverse the timeline
(mouseleave does nothing)
etc (ie alternating between one mouseenter and the next)
Could you please adjust your example pen ? 😀
Hi all
Can anyone please correct my pen - I want to say
"with the first mouseenter on any red box, play the timeline" (which reveals the green box)
With the next mousenter on any red box, reverse the timeline
With the next mousenter on any red box, play the timeline
etc ie mouseenter event alternates between play and reverse the timeline
Thanks...
Hi all,
In my slideshow I want
slide # 1 to load on page load,
then slide # 2 to cover slide #1,
then slide # 3 to cover slide #2,
then slide #1 to cover slide #3
then a smooth restart.
Can anyone please correct my codepen?
Thanks...