Streaming live at 10am (PST)

Infographics on the site (animation)

Tell, how is this animation created? SVG? How can I do the same via webflow?

1 Like

Yes, looks like SVG. I see how everything except the blue lines can be made. They are the hardest part here.

1 Like

Too. I understand everything except the lines

1 Like

I’m trying something >

Hm I think if I use width for the blue growing BG instead of height the effect will be better :smile: How stupid I am

@Bogette Yea definitely looks better >

Not even close :smile:

1 Like

Hey guys,

An SVG animation is pretty intimidating at start, but one you understand it, it is quiet simple.
Basically- you need to create an SVG and embed it as a code instead of uploading it as an image. Then you can manipulate the code with CSS.

Here’s a Codepen with an example.

1 Like

Absolutely, but if someone wants an easy way I think my lame approach will help :smile:

I’m using SVG with transparent path and some masking and a blue background div for the growing effect.

I need to play more with actual SVG animations.

maybe this weill help you-

1 Like

Thanks for sharing! Playing with SVG animations looks fun :blush:

1 Like