Animated icons @ Codepen.io

Hi there. I have started sharing my SVG animations via Codepen, feel free to use and abuse however you find it suitable :+1: Here’s a collection I’ll be filling up from time to time: https://codepen.io/collection/DxggLW/

Here’s the main page: https://codepen.io/designforventures

7 Likes

Nice, will keep an eye this to see how you get on.

If you’re taking requests, how about and animate snowflake SVG?

Regards

Mark

Thanks, really appreciate the feedback. Sure why not? I love snow so why not hehe? Keep checking, I’ll be adding things from time to time (when I’m bored at work) :rofl:

1 Like

And here’s a really great tip if you want to do these yourself:

2 Likes

I love it! Nice work.

1 Like

Thanks man makes me happy to hear and gives me the energy to keep on doing these :blush::surfing_woman:t3:

With cloud or without? :smiley:

Without I think, I’ve been playing around with a very basic snowflake in sketch

And there is a more sophisticated one in the logo of this resource from sketch app sources

Thanks for the pointer on Keyshape, will take a look when I get a bit of time.

1 Like

No probs man :smiley:
By looking at your assets I would say that (for me) they look way to complicated. I’m building up a small collection of 80x80px icons (canvas size) with 2px outlines. :sunny:
I’m also working with weather icons that a friend of mine designed, they are also small.

Btw added a new pen yesterday.

See the Pen Loading Notepad Animation - SVG by Designforventures (@designforventures) on CodePen.

1 Like

Ahh, OK - let me have a look and see if I can do something smaller.

No worries, that’s just my personal taste :smiley:

How do I add these to my RW page with stacks? I do not see a download button, just the export. So: which code do I use? Or do I use normal image stack or blueprint from BWD (as this one supports SVG)? Sorry the not-so-intelligent questions here…

I share the same question :slight_smile: Animated SVGs are of big importance to us. How could all HTML, CSS & JS codes be (behind the Animated SVG) implemented inside the RW file? Sorry Fuellemann, my post is not an answer indeed.

1 Like

@Fuellemann - I haven’t tried it yet, but if you go to Stacks4Stacks - Will Woodgate’s site, he has a stack called Builder, which is a template for entering, HTML CSS & JS code, that you obtain from Codepen. This gives you a tool for any number of ‘snippets’ that can be converted into a Stack per se.
Ken

4 Likes

Actually it’s a very good question! That’s why I’ve created something that will make the whole process much much simpler. The thing with Codepen is that I need to break up the svg code so that it works with them, so that anyone (who wants) can fiddle with it, change the colors, fork etc.

That something is coming real soon… :dancing_women:

That is a very good tip, haven’t thought about that actually. :wave::eyeglasses::trophy:

1 Like

can’t wait :slight_smile: Thank you very much!

1 Like

Cool. I just donated :slight_smile:

1 Like