Open Collective
Open Collective
Loading

Shape Shifter

SVG animation tool for Android, iOS, & the web.

Contribute


Become a financial contributor.

Financial Contributions

Recurring contribution
Backer

Support us with a monthly donation. Funds will go towards hiring new developers to work on awesome features! Your logo will show up on our Github p... Read more

$2 USD / month

Latest activity by


+ 8
Recurring contribution
Supporter

If Shape Shifter makes your life more lovely and less painful, you can become a supporter of its ongoing development. Your logo will show up on our... Read more

$5 USD / month

Latest activity by


+ 4
Recurring contribution
Sponsor

Is your company using Shape Shifter? Ask your manager to support us! Your logo will show up on our Github page with a link to your site.

$100 USD / month

Latest activity by


Be the first one to contribute!
Custom contribution
Donation
Make a custom one-time or recurring contribution.

Latest activity by


+ 26

Top financial contributors

Individuals

1
Huyen Tue Dao

$405 USD since Apr 2018

2
Nicolas Roard

$285 USD since Jul 2018

3
Or Bar

$210 USD since Apr 2018

4
Alex Lockwood

$200 USD since Oct 2017

5
Seiji Hozuki

$150 USD since Apr 2018

6
Nik Shevchenko

$130 USD since Oct 2018

7
Alexander Gherschon

$62 USD since Nov 2017

8
Yuri Schimke

$60 USD since Feb 2022

9
Travis Arnold

$56 USD since Oct 2017

10
Joe Rhodes

$50 USD since Apr 2018

11
Roman Nurik

$44 USD since Oct 2017

12
Pablo Costa

$40 USD since Nov 2017

13
Amilcar Andrade Garcia

$30 USD since Nov 2017

14
Mayank Mehta

$25 USD since Nov 2017

15
Roman Zavarnitsyn

$20 USD since Nov 2017

Organizations

1
Snapp Mobile Germany Gmbh

$115 USD since Jul 2018

2
Triplebyte

$40 USD since Jan 2019

3
Tumblr

$10 USD since Nov 2017

4
Scraper API 2

$2 USD since Aug 2018

Shape Shifter is all of us

Our contributors 30

Thank you for supporting Shape Shifter.

Alex Lockwood

Admin

$200 USD

Huyen Tue Dao

Supporter

$405 USD

Nicolas Roard

Supporter

$285 USD

Or Bar

Supporter

$210 USD

Seiji Hozuki

Supporter

$150 USD

Nik Shevchenko

Backer

$130 USD

My favourite vital tool for giving life to apps!

Snapp Mobile ...

Supporter

$115 USD

Thank you Alex, keep being awesome!

Alexander Ghe...

Backer

$62 USD

Yuri Schimke

Supporter

$60 USD

Travis Arnold

Backer

$56 USD

Joe Rhodes

$50 USD

Thank you, Alex, for the dedication to make suc...

Roman Nurik

Backer

$44 USD

Budget


Transparent and open finances.

View all transactions
+$5.00USD
Completed
Contribution #9613
+$5.00USD
Completed
Contribution #9613
+$5.00USD
Completed
Contribution #9613
$
Today’s balance

$1,582.68 USD

Total raised

$1,582.68 USD

Total disbursed

--.-- USD

Estimated annual budget

$64.00 USD

About


Shape Shifter is an open source developer tool that simplifies the creation of icon animations for Android, iOS, and the web. https://shapeshifter.design

Problem

Writing high-quality path morphing animations is a tedious and time-consuming task. In order to morph one shape into another, the SVG paths describing the two must be compatible with each other—that is, they need to have the same number and type of drawing commands. This is problematic because:

  • Design tools—such as Sketch and Illustrator—do not easily expose the order of points in a shape, making it difficult to change their order. As a result, engineers will often have to spend time tweaking the raw SVG path strings given to them by designers before they can be morphed, which can take a significant amount of time.
  • Design tools often map to shape primitives not supported in certain platforms (e.g. circles need to be represented by a sequence of curves and/or arcs, not simply by their center point and radius).
  • Design tools cannot place multiple path points in the same location, a technique that is often necessary when making two shapes compatible with each other.
  • Design tools provide no easy way to visualize the in-between states of the desired path morph animation.

Features

To address these problems, Shape Shifter provides the following features:

  • The ability to add/remove points to each path without altering their original appearance. The added points can be modified by dragging them to different positions along the path, and they can be later deleted using the keyboard as well.
  • The ability to reverse/shift the relative positions of each path's points. While reordering points won't affect whether or not two paths are compatible, it often plays a huge role in determining the appearance of the resulting animation.
  • Shape Shifter automatically converts incompatible pairs of SVG commands into a compatible format. There's no longer any need to convert Ls into Qs and As into Cs by hand in order to make your paths compatible—Shape Shifter does this for you behind-the-scenes!
  • Shape Shifter provides a useful utility called 'auto fix', which takes two incompatible paths and attempts to make them compatible in an optimal way. Depending on the complexity of the paths, auto fix may or may not generate a satisfying final result, so further modification may be necessary in order to achieve the animation you're looking for.
  • The ability to export the results to SVG spritesheets, CSS keyframes, and Animated Vector Drawable format for use on the web and in Android applications.

Our team