Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • DigitalOcean
  • DO Community
Search

Articles Tagged
shape morphing

10 Articles
{
,

}
JavaScript shape morphing SVG

Creating a Star to Heart Animation with SVG and Vanilla JavaScript

In my previous article, I’ve shown how to smoothly transition from one state to another using vanilla JavaScript. Make sure you check that one out first because I’ll be referencing some things I explained there in a lot of …

Avatar of Ana Tudor
Ana Tudor on Nov 6, 2017 (Updated on Aug 29, 2018)
shape morphing SVG

Shape Morphing Icons in Button on Click

The idea here is use an SVG icon in a button and swap that icon out for another when the button is clicked. A button click often suggests an action has been taken, so switching icons can be a nice …

Avatar of Geoff Graham
Geoff Graham on May 4, 2017
shape morphing SVG

The Many Tools for Shape Morphing

To no one’s surprise, I’m sure, there are lots of different ways to do the same thing on the web. Shape morphing, being a thing on the web, is no different. There are some native technologies, some libraries that leverage …

Avatar of Chris Coyier
Chris Coyier on Apr 24, 2017
letterpress shape morphing SVG

SVG → Letterpress

I took a class at Bay View Printing Company, the local community letterpress shop I belong to, all about printing with polymer plates. The shop is absolutely full with wood and metal type, and all the accoutrements around that, …

Avatar of Chris Coyier
Chris Coyier on Oct 12, 2016 (Updated on Aug 29, 2018)
animation canvas GreenSock shape morphing waapi webgl

A Comparison of Animation Technologies

The question I am asked most frequently: what animation tool do you recommend?

Having worked with a slew of them, I can tell you there is no right answer. It’s a complicated question and complicated answer. This post serves …

Avatar of Sarah Drasner
Sarah Drasner on May 2, 2016 (Updated on Mar 30, 2020)
GreenSock shape morphing

GreenSock MorphSVGPlugin

Direct Link

Greensock really knocked it out of the park with this one. You know shape morphing? It’s a cool effect with loads of uses ranging from practical to artistic. SMIL can do it, but the future of that is in …

Avatar of Chris Coyier
Shared by Chris Coyier on Oct 10, 2015 (Updated on Aug 29, 2018)
animation shape morphing

The Importance of Context-Shifting in UX Patterns

Have you ever had a day at work where you were constantly put towards a new task as you were ramping up on the current one? It feels jarring at best, and completely frustrating and time-wasting at worst. In recent …

Avatar of Sarah Drasner
Sarah Drasner on Sep 10, 2015 (Updated on Aug 29, 2018)
shape morphing SVG

How SVG Shape Morphing Works

While animating SVG with CSS is easy and comfortable, CSS can’t animate all the SVG properties that are possible to animate. For instance, all the properties that define the actual shape of the elements aren’t possible to change or animate …

Avatar of Chris Coyier
Chris Coyier on Oct 24, 2014 (Updated on Aug 28, 2018)
animation shape morphing SMIL SVG animation

23: Animating SVG with SMIL

Even though animating SVG with CSS might be more comfortable for the average front-end person, SVG has another way do animation built right into the SVG syntax itself. This is exactly what we cover in brief in this video, but …

Avatar of Chris Coyier
Chris Coyier on Oct 18, 2014 (Updated on Sep 4, 2018)
animation shape morphing SMIL SVG

A Guide to SVG Animations (SMIL)

Update December 2015: At the time of this update, SMIL seems to be kinda dying. Sarah Drasner has a guide on how you can replace some of it’s features.

The following is a guest post by Sara Soueidan. Sara …

Avatar of Sara Soueidan
Sara Soueidan on Oct 13, 2014 (Updated on Aug 23, 2022)

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • DigitalOcean
  • DigitalOcean Community
  • About DigitalOcean
  • Legal
  • Free Credit Offer
CSS-Tricks
  • Email
  • Guest Writing
  • Book
  • Advertising
Follow
  • Mastodon
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • iTunes
  • RSS
Back to Top