css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

A morphing animation to represent different devices. If you like this you can buy it here

This Pen is a fork of Chris Gannon's Pen SVG Flying Saucer.


  1. meditative : ) nice

  2. super slick, my friend. - Carl

  3. You've been on fire dewd!

  4. well.... apple.... apples everywhere..... use a real Computer Like Windows devices :-) nice work even though ;)

  5. @MT-WebDev I completely take your point. I'm actually primarily a Win user but in terms of drawing them, Apple devices are simpler.

  6. did you use edge animate?

  7. @Chris Gannon, is is the same thing like adobe edge animate?

  8. @cyberjo50 Edge Animate is Adobe software that has its own runtime and most animation is created on a GUI timeline. @GreenSock is a pure JS animation platform (GSAP) where you can create tweens and sequence them in virtual timelines.

  9. That color palette <3

  10. Excellent, excellent, excellent... !!!

  11. @chrisgannon This experiment is superb! I have a question! I am wondering any particular reason you are using clip-path instead of opacity mask to hide away portion of an image? What are the pros and cons that you have encountered?

  12. @vennsoh I've been encountering bugs with FireFox and masks (especially when dynamically creating/adding cloned or use tag items to a masked group) so unless I need transparency I use clip paths.

  13. Fantastic work! GASP is the best :)

  14. it's so hypnotizing @_@ maybe next u can add a smart watch icon!

  15. This is really cool. Can I use this on my website?

  16. @jmar The reason I make these demos is so that folks can learn from them (and in turn I learn a lot too). Why not take some ideas from this and make your own version?

  17. rad..!!!!

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

You must be logged in to comment.