user profile image

Animated Adam Whitcroft's awesome Climacons with CSS. I was inspired by Forecast.io's animated weather icons, but wanted to achieve the same results without canvas.

This Pen is a fork of Noah Blon 's Pen SVG Icons Animated with CSS .


  1. Agreed, VERY awesome!

  2. I love this. The markup/CSS is pretty hefty, but this is very cool.

  3. Thanks guys! I agree that the markup and CSS is hefty from a management standpoint, but you are looking at 80+ icons on one page. In terms of size, for example I compressed the sun to ~5k which is pretty impressive for an animated, resolution independent image I think.

  4. @NoahBlon Wuao Noah, that's the best clima icons ever. And I totally love the design. Nothing to say, just brillant.

  5. This is pretty damn cool! One quesiton, how did you convert the icons to SVG? Did you do it with Ai?

  6. @peduarte: Yes, I used Illustrator. The original icon actually came with an SVG format, but I did have to release the compound paths, create clipping paths, and resize the artboards to get this to work. Planning to write up a tutorial once I work through everything.

  7. Brilliant. May I use these for a hackathon project? I'll give you due credit, of course. :)

  8. @achalv Absolutely! Would love to see what you come up with.

  9. Ok, I see how this is done. Very nice. :)

    It'd be nice if we could attach add/removeClass to these on events. jQuery doesn't provide anything out of the box for this and other implementations either ignore the keyframe animations (jQueryUI addClass) or won't addClass to SVG elements.

    Any ideas?

  10. @corysimmons Thanks Cory! Saw your demo, awesome work.

    I've added classes to a wrapper and animated from there: http://codepen.io/noahblon/details/GKbIz

  11. Great job. I have integrated them into my WordPress weather plugin http://wordpress.org/plugins/wp-cloudy/

  12. This is VERY sleek. Great work!

  13. Really cool demo @noahblon. I'm searching a solution for an issue I also verified in your demo and maybe you have something in mind though. CSS transform-origin applied to svg elements doesn't work well on FF browser. It's evident on the icons with rotate transform for example, like the two first ones.

    If you know something or have something (some trick) in mind, please let me know (@elrumordelaluz). Thanks man!

    // I think there is a bug opened on FF for the transform-origin in %

  14. @elrumordelaluz You're right, transform origin in SVG doesn't work in FF, so the origin is the top left corner of the viewbox. Here's a demo I did with a correction for FF: http://codepen.io/noahblon/pen/DlvhJ. What you need to do is wrap elements in a group tag and use translate to move that group's upper left corner to the center of the document Then, you translate elements inside of the group toyour wrapping group's upper left corner. In this way, you've mimicked placing the transform origin in the center of the document. It sucks so I never bothered.. hoping FF will fix it soon!

  15. thanks! @noahblon yes, I also saw this correction here. The ideal is solve this without modif the markup because if I have lot of svg's to apply it. It sucks that on some things Webkit works different that Gecko's browsers. Thanks again. Hoping will fix asap!

  16. @elrumordelaluz I think it would make sense for the default transform-origin value to be the center so that it works the same as HTML. Its pretty confusing otherwise.

  17. Probably one of the best projects on Codepen! #respect

  18. Hi, I downloaded your amazing icons but local version on my computer doesn't works ;/ Do you have any solutions?

  19. Hi @wolny92! Hard to debug without knowing more, but my guess is that the css needs to be prefixed. This demo uses a css prefixing tool provided by Codepen, and you can see the prefixed CSS by clicking view output.

  20. Nice work! Do you allow these to be used in commercial projects?

  21. @zillions yep! The code is under the MIT license and please credit the original designer of the icons: Adam Whitcroft. http://adamwhitcroft.com/climacons/

  22. Hey Noah, nice work! Years later this is still bomb.

    Excuse me if I'm naive my experience with animated SVG icons is limited to today :P but from what I'm seeing I don't think this works on Android browser?

  23. Hey noah! Brilliant job on the icons! I hope you dont mind me using it for a personal project of mine. Credits will be given to your icons of course.

  24. @oninross Hi, I am really impressed with animated SVG icons, I would like to use this for commercial purpose.

    I will surely give credits of your, can I use it for commercial purpose ?

    Thanks in advance !

  25. nice work. however, on safari v11 (also on firefox) the sun / moon / snowflake animation is broken. i guess due to multiple transform-origin statements, the rotation has a weird anchor point. would u mind, checking out this issue? :)

  26. Jacob Parker @itsyaboywiththeonetimeuseaccount on

    Hi! I don't know anything about code but is there some way I could save this as something that work in a video editor like after effects? Thanks.

  27. Great! But something changed. The sun icon's are doing something strange.. Any solution?

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.