These were just some Codepens I messed with for fun. The rendering/timing isn’t perfect for either of these, but I just love working with SVG’s and web animations so I messed around with the good old stroke-dasharray technique mixed with some keyframe animation to animate these stroke paths. I know when I was first getting started I was always curious how these types of animations were made so I thought I’d share the code for those of you who are also curious.

More to come!

(refresh to see it again)

check out the code

☟☟☟

html/svg

(SVG code generated/exported from Adobe Illustrator CC)

css

check out the code

☟☟☟

HTML/svg

(SVG code generated/exported from Adobe Illustrator CC)

css