{"id":13469702,"url":"https://github.com/alexjlockwood/ShapeShifter","last_synced_at":"2025-03-26T07:31:05.629Z","repository":{"id":14904683,"uuid":"77296348","full_name":"alexjlockwood/ShapeShifter","owner":"alexjlockwood","description":"SVG icon animation tool for Android, iOS, and the web","archived":false,"fork":false,"pushed_at":"2022-03-22T18:48:46.000Z","size":15751,"stargazers_count":3973,"open_issues_count":187,"forks_count":201,"subscribers_count":74,"default_branch":"master","last_synced_at":"2024-10-29T15:34:18.260Z","etag":null,"topics":["android","angular","animated-vector-drawable","icon-animations","ios","svg","typescript"],"latest_commit_sha":null,"homepage":"https://shapeshifter.design","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alexjlockwood.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-24T18:51:19.000Z","updated_at":"2024-10-29T08:33:38.000Z","dependencies_parsed_at":"2022-08-07T08:00:44.615Z","dependency_job_id":null,"html_url":"https://github.com/alexjlockwood/ShapeShifter","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexjlockwood%2FShapeShifter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexjlockwood%2FShapeShifter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexjlockwood%2FShapeShifter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexjlockwood%2FShapeShifter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexjlockwood","download_url":"https://codeload.github.com/alexjlockwood/ShapeShifter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222121829,"owners_count":16934973,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","angular","animated-vector-drawable","icon-animations","ios","svg","typescript"],"created_at":"2024-07-31T15:01:51.655Z","updated_at":"2024-10-29T22:31:24.854Z","avatar_url":"https://github.com/alexjlockwood.png","language":"TypeScript","funding_links":["https://opencollective.com/shapeshifter"],"categories":["TypeScript","Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# Shape Shifter\n\n[![Build Status][travis-badge]][travis-badge-url]\n[![Coverage Status][coveralls-badge]][coveralls-badge-url]\n[![GitHub Stats](https://img.shields.io/badge/github-stats-ff5500.svg)](http://githubstats.com/alexjlockwood/ShapeShifter)\n\n**[Go to live version](https://shapeshifter.design)** or **[ask a question on Slack](https://join.slack.com/t/shapeshifterdesign/shared_invite/enQtNDAwODY5NjI2NTE4LTAyZTE3ZmYxNGUxMmViY2UwNDJjZWYyYzhhNTQzYmVkYmVmNTA0NmEyY2MwMmFiOTllODI5YzZmNDQwOTE1MGU)**\n\n-----\n\n[Shape Shifter](https://alexjlockwood.github.io/ShapeShifter/) is a web-app that simplifies\nthe creation of [icon animations][adp-icon-animations] for Android, iOS, and the web.\n\nThis tool currently exports to standalone SVGs, SVG spritesheets,\nand CSS keyframe animations for the web, as well as to\n[`AnimatedVectorDrawable`](https://developer.android.com/reference/android/graphics/drawable/AnimatedVectorDrawable.html)\nformat for Android. I am totally open to adding support for other export formats as well, so\nif you have a format that you'd like to see added in the future,\nfile a [feature request][report-feature-request]!\n\nTry out the [beta version](https://beta.shapeshifter.design), which adds the ability to draw/edit paths directly on the canvas (written using the amazing [paper.js](http://paperjs.org/) library)!\n\n![Screen capture of tool](art/screencap.gif)\n\n## Backers\n\nSupport us with either a one time donation or a monthly donation and help us\ncontinue our activities. Funds will go towards hiring new developers to work\non awesome features! We'll display your logo below with a link to your site.\n\n\u003ca href=\"https://opencollective.com/shapeshifter#backers\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/shapeshifter/backers.svg?width=890\"\u003e\u003c/a\u003e\n\n🙏 [Become a backer](https://opencollective.com/shapeshifter#backer) 🙏\n\n## Sponsors\n\nIs your company using Shape Shifter? Ask your manager to support us!\nWe'll display your logo below with a link to your site.\n\n🙏 [Become a sponsor](https://opencollective.com/shapeshifter#sponsor) 🙏\n\n## Examples\n\nI gave a couple of live demos that illustrate how to use the tool at Droidcon SF ([15:15 - 20:33](https://youtu.be/JhryKMOM6GI?t=15m15s)):\n\n[![In-depth path morphing with Shape Shifter](art/droidcon-sf-video-embed.png)](https://youtu.be/JhryKMOM6GI?t=15m15s)\n\nHere are some example icon animations created by Shape Shifter:\n\n\u003cimg src=\"art/expandcollapse.gif\" alt=\"Expand to collapse animation\" width=\"216px\"/\u003e\u003cimg src=\"art/moreback.gif\" alt=\"Overflow to back arrow animation\" width=\"216px\"/\u003e\u003cimg src=\"art/playpausestop.gif\" alt=\"Play-pause-stop animation\" width=\"216px\"/\u003e\u003cimg src=\"art/animals.gif\" alt=\"Animals animation\" width=\"216px\" vspace=\"34px\"/\u003e\u003c!--\u003cimg src=\"art/plusminus.gif\" alt=\"Plus-to-minus animation\" width=\"216px\"/\u003e\u003cimg src=\"art/cast.gif\" alt=\"Cast animation\" width=\"216px\"/\u003e\u003cimg src=\"art/drawerarrow.gif\" alt=\"Drawer-to-arrow animation\" width=\"216px\"/\u003e\u003cimg src=\"art/digits.gif\" alt=\"Digits animation\" width=\"216px\"/\u003e--\u003e\n\n## Problem\n\nWriting high-quality [path morphing animations][adp-path-morphing]\nis a tedious and time-consuming task. In order to morph one shape into another,\nthe SVG paths describing the two must be *compatible* with each other\u0026mdash;that is,\nthey need to have the same number and type of drawing commands. This is problematic because:\n\n* Design tools\u0026mdash;such as [Sketch][sketch] and [Illustrator][illustrator]\u0026mdash;do not easily\n  expose the order of points in a shape, making it difficult to change their order. As a result,\n  engineers will often have to spend time tweaking the raw SVG path strings given to them by\n  designers before they can be morphed, which can take a significant amount of time.\n* Design tools often map to shape primitives not supported in certain platforms\n  (e.g. circles need to be represented by a sequence of curves and/or arcs,\n  not simply by their center point and radius).\n* Design tools cannot place multiple path points in the same location, a technique that\n  is often necessary when making two shapes compatible with each other.\n* Design tools provide no easy way to visualize the in-between states of the desired\n  path morph animation.\n\n## Features\n\nTo address these problems, Shape Shifter provides the following features:\n\n* *The ability to add/remove points to each path without altering their original appearance.*\n  The added points can be modified by dragging them to different positions along the path,\n  and they can be later deleted using the keyboard as well.\n* *The ability to reverse/shift the relative positions of each path's points.* While reordering points\n  won't affect whether or not two paths are compatible, it often plays a huge role in determining the\n  appearance of the resulting animation.\n* *Shape Shifter automatically converts incompatible pairs of SVG commands into a compatible\n  format.* There's no longer any need to convert `L`s into `Q`s and `A`s into `C`s by hand in\n  order to make your paths compatible\u0026mdash;Shape Shifter does this for you behind-the-scenes!\n* *Shape Shifter provides a useful utility called 'auto fix', which takes two incompatible\n  paths and attempts to make them compatible in an optimal way.* Depending on the complexity\n  of the paths, auto fix may or may not generate a satisfying final result, so further\n  modification may be necessary in order to achieve the animation you're looking for.\n* *The ability to export the results to SVG spritesheets, CSS keyframes, and\n  `AnimatedVectorDrawable` format for use on\n  the web and in Android applications.* I'm open to adding support for other export formats\n  as well, so feel free to file a [feature request][report-feature-request]!\n\n## How does it work?\n\nPretty much all of the graphics in this app are powered by bezier curve approximations under-the-hood.\nI learned most of what I needed to know from this excellent [primer on bezier curves][primer-on-bezier-curves]\n(especially sections 9 and 33, which explain how to split and project points onto bezier\ncurves without altering their original appearance). Most of the interesting SVG-related code\nis located under [`src/app/model/paths`](https://github.com/alexjlockwood/ShapeShifter/tree/master/src/app/model/paths).\n\nAuto fix is powered by an adaptation of the [Needleman-Wunsch algorithm][Needleman-Wunsch],\nwhich is used in bioinformatics to align protein or nucleotide sequences. Instead of\naligning DNA base-pairs, Shape Shifter aligns the individual SVG commands that make up\neach path instead. You can view the current implementation of the algorithm in the\n[`AutoAwesome.ts`](https://github.com/alexjlockwood/ShapeShifter/blob/master/src/app/scripts/algorithms/AutoAwesome.ts) file.\n\n## Bug reports \u0026 feature requests\n\nLet me know if you encounter any issues with the app (attach SVG files and/or\nscreenshots if you can). Before you do, take a look at the list of known issues\n[here](https://github.com/alexjlockwood/ShapeShifter/issues) and leave a comment\non the existing bugs you want to see fixed in a future release!\n\nI am open to pretty much any feature request, so don't be afraid to ask!\nI'll likely work on the most popular feature requests first. **I'm especially\ncurious how I can make this web app more useful for iOS and web developers.**\n\n## Build instructions\n\nIf you want to contribute, you can build and serve the web app locally as follows:\n\n  1. First install [`Node.js`](https://nodejs.org/) and [`npm`](https://www.npmjs.com/).\n\n  2. Clone the repository and in the root directory, run:\n\n     ```\n     npm install\n     ```\n\n  3. To build and serve the web app locally, run:\n\n     ```\n     npm start\n     ```\n\n## Special thanks\n\nHuge thanks to [Nick Butcher][nick-butcher-twitter], [Roman Nurik][roman-nurik-twitter],\nand [Steph Yim][steph-yim-website] for all of their help during the early stages of this project!\n\n  [report-feature-request]: https://github.com/alexjlockwood/ShapeShifter/issues/new\n  [adp-icon-animations]: http://www.androiddesignpatterns.com/2016/11/introduction-to-icon-animation-techniques.html\n  [adp-path-morphing]: http://www.androiddesignpatterns.com/2016/11/introduction-to-icon-animation-techniques.html#morphing-paths\n  [sketch]: https://www.sketchapp.com/\n  [illustrator]: http://www.adobe.com/products/illustrator.html\n  [Needleman-Wunsch]: https://en.wikipedia.org/wiki/Needleman%E2%80%93Wunsch_algorithm\n  [primer-on-bezier-curves]: https://pomax.github.io/bezierinfo\n  [nick-butcher-twitter]: https://twitter.com/crafty\n  [roman-nurik-twitter]: https://twitter.com/romannurik\n  [steph-yim-website]: http://stephanieyim.com\n  [travis-badge]: https://travis-ci.org/alexjlockwood/ShapeShifter.svg?branch=master\n  [travis-badge-url]: https://travis-ci.org/alexjlockwood/ShapeShifter\n  [david-badge]: https://david-dm.org/alexjlockwood/ShapeShifter.svg\n  [david-badge-url]: https://david-dm.org/alexjlockwood/ShapeShifter\n  [david-dev-badge]: https://david-dm.org/alexjlockwood/ShapeShifter/dev-status.svg\n  [david-dev-badge-url]: https://david-dm.org/alexjlockwood/ShapeShifter?type=dev\n  [coveralls-badge]: https://coveralls.io/repos/github/alexjlockwood/ShapeShifter/badge.svg?branch=master\n  [coveralls-badge-url]: https://coveralls.io/github/alexjlockwood/ShapeShifter?branch=master\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexjlockwood%2FShapeShifter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexjlockwood%2FShapeShifter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexjlockwood%2FShapeShifter/lists"}