Animated icons @ Codepen.io


(Juan Fernando Maguid) #1

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


(mark hunter) #2

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


(Juan Fernando Maguid) #3

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:


(Juan Fernando Maguid) #4

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


(Aaron Marquez) #5

I love it! Nice work.


(Juan Fernando Maguid) #6

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


(Juan Fernando Maguid) #7

With cloud or without? :smiley:


(mark hunter) #8

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.


(Juan Fernando Maguid) #9

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.


(Juan Fernando Maguid) #10

Btw added a new pen yesterday.

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


(mark hunter) #11

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


(Juan Fernando Maguid) #12

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


(Jan Fuellemann) #13

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…


(Vess Lazarov) #14

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.


(Ken) #15

@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


(Juan Fernando Maguid) #16

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:


(Juan Fernando Maguid) #17

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


(Jan Fuellemann) #18

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


(Juan Fernando Maguid) #19

(Jan Fuellemann) #20

Cool. I just donated :slight_smile: