Alex Lockwood

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

Huyen Tue Dao

Nicolas Roard

Or Bar

Seiji Hozuki

Nik Shevchenko

Snapp Mobile Germany Gmbh

Alexander Gherschon

Yuri Schimke

Travis Arnold

Joe Rhodes

Roman Nurik

Pablo Costa

Amilcar Andrade Garcia

Mayank Mehta

Roman Zavarnitsyn

Vadim Maximov

Chris Lee

Severiano Jaramillo Quintanar

Tumblr

Lin Tong

Love Lindström

Doist

Chris Arriola

Dhivagar Dhiva

Lucio Maciel

Scraper API 2

Karol Wąsowski

Open Source Collective

Shape Shifter is an open source developer tool that simplifies
the creation of icon animations for Android, iOS, and the web. <a href="https://opencollective.com/redirect?url=https%3A%2F%2Fshapeshifter.design">https://shapeshifter.design</a>
<img src="https://opencollective-production.s3.us-west-1.amazonaws.com/5f295680-3dab-11ed-b416-37b955a63a05.gif" />
<h3>Problem</h3>
Writing high-quality <a href="https://opencollective.com/redirect?url=http%3A%2F%2Fwww.androiddesignpatterns.com%2F2016%2F11%2Fintroduction-to-icon-animation-techniques.html%23morphing-paths">path morphing animations</a>
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:
<ul>
<li>Design tools—such as <a href="https://opencollective.com/redirect?url=https%3A%2F%2Fwww.sketchapp.com%2F">Sketch</a> and <a href="https://opencollective.com/redirect?url=http%3A%2F%2Fwww.adobe.com%2Fproducts%2Fillustrator.html">Illustrator</a>—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.</li>
<li>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).</li>
<li>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.</li>
<li>Design tools provide no easy way to visualize the in-between states of the desired
path morph animation.</li>
</ul>
<h3>Features</h3>
To address these problems, Shape Shifter provides the following features:
<ul>
<li>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.</li>
<li>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.</li>
<li>Shape Shifter automatically converts incompatible pairs of SVG commands into a compatible
format. There's no longer any need to convert <code>L</code>s into <code>Q</code>s and <code>A</code>s into <code>C</code>s by hand in
order to make your paths compatible—Shape Shifter does this for you behind-the-scenes!</li>
<li>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.</li>
<li>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.</li>
</ul>

Shape Shifter

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 page with a link to your site.

Backer

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 Github page with a link to your site.


Supporter

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.


Sponsor

Shape Shifter

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

Contributors

Shape Shifter is all of us

Our contributors 28

About

Our team