{"id":13548059,"url":"https://github.com/haucky/drawing_animation","last_synced_at":"2026-02-19T22:34:41.852Z","repository":{"id":34130541,"uuid":"170316973","full_name":"haucky/drawing_animation","owner":"haucky","description":"A Flutter library for gradually painting SVG path objects on canvas (drawing line animation).","archived":false,"fork":false,"pushed_at":"2025-08-22T15:30:14.000Z","size":341,"stargazers_count":510,"open_issues_count":13,"forks_count":127,"subscribers_count":13,"default_branch":"master","last_synced_at":"2026-02-15T06:45:36.812Z","etag":null,"topics":["dart","flutter","svg","svg-animations","svg-path"],"latest_commit_sha":null,"homepage":"https://pub.dartlang.org/packages/drawing_animation","language":"C++","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/haucky.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2019-02-12T12:49:16.000Z","updated_at":"2026-02-09T13:50:37.000Z","dependencies_parsed_at":"2023-12-27T14:02:13.005Z","dependency_job_id":null,"html_url":"https://github.com/haucky/drawing_animation","commit_stats":null,"previous_names":["haucky/drawing_animation","biocarl/drawing_animation"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/haucky/drawing_animation","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haucky%2Fdrawing_animation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haucky%2Fdrawing_animation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haucky%2Fdrawing_animation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haucky%2Fdrawing_animation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/haucky","download_url":"https://codeload.github.com/haucky/drawing_animation/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haucky%2Fdrawing_animation/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29635703,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-19T22:32:43.237Z","status":"ssl_error","status_checked_at":"2026-02-19T22:32:38.330Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["dart","flutter","svg","svg-animations","svg-path"],"created_at":"2024-08-01T12:01:05.196Z","updated_at":"2026-02-19T22:34:41.834Z","avatar_url":"https://github.com/haucky.png","language":"C++","funding_links":[],"categories":["C++"],"sub_categories":[],"readme":"# drawing_animation [![Pub](https://img.shields.io/pub/v/drawing_animation.svg)](https://pub.dartlang.org/packages/drawing_animation) [![awesome](https://img.shields.io/badge/Awesome-Flutter-blue.svg?longCache=true\u0026style=flat-square)](https://github.com/Solido/awesome-flutter)\n\n|**From static SVG assets**  | | See more examples in the [showcasing app](https://github.com/biocarl/drawing_animation/tree/master/example/example_03). |\n| :---             |     :---:                   |     :---:     |\n| \u003cimg src=\"https://github.com/biocarl/img/raw/master/drawing_animation/art_egypt1.gif\" width=\"400px\" \u003e |\u003cimg src=\"https://github.com/biocarl/img/raw/master/drawing_animation/art_dino2.gif\" width=\"400px\"\u003e \u003cbr/\u003e \u003cimg src=\"https://github.com/biocarl/img/raw/master/drawing_animation/art_order.gif\" width=\"400px\"\u003e   | \u003cimg src=\"https://github.com/biocarl/img/raw/master/drawing_animation/art_child7.gif\" width=\"400px\"\u003e      |\n| **Dynamically created from Path objects which are animated over time** | |  |\n| \u003cimg src=\"https://github.com/biocarl/img/raw/master/drawing_animation/met_dynamic_1.gif\" width=\"400px\" \u003e |*more coming soon*\u003cbr/\u003e... | \u003cimg src=\"https://github.com/biocarl/img/raw/master/drawing_animation/loader_1.gif\" width=\"400px\"\u003e      |\n\nThe rendering library exposes a central widget called `AnimatedDrawing` which allows to render SVG paths (via `AnimatedDrawing.svg`) or Flutter Path objects (via `AnimatedDrawing.paths`) in a drawing like fashion.\n\n## Getting Started  - AnimatedDrawing.svg\nTo get started with the `drawing_animation` package you need a valid Svg file.\nCurrently only simple path elements without transforms are supported (see [Supported SVG specifications](https://github.com/biocarl/drawing_animation#supported-svg-specifications))\n\n1. **Add dependency in your `pubspec.yaml`**\n```yaml\ndependencies:\n  drawing_animation: ^1.0.1\n\n```\n\n2. **Add the SVG asset**\n```yaml\nassets:\n  - assets/my_drawing.svg\n```\n3. **Use the widget**\n\n    An AnimatedDrawing widget can be initiated in two ways:\n    1. **Simplified - without animation controller (See [Example_01](https://github.com/biocarl/drawing_animation/tree/master/example/example_01))**\n\n        By default every animation repeats infinitely. For running an animation only once you can use a callback to set `run` to false after the first animation cycle completed (see field `onFinish`).\n        ```dart\n        AnimatedDrawing.svg(\n          \"assets/my_drawing.svg\",\n          run: this.run,\n          duration: new Duration(seconds: 3),\n          onFinish: () =\u003e setState(() {\n            this.run  = false;\n          }),\n        )\n        ```\n\n    2. **Standard - with animation controller (See [Example_02](https://github.com/biocarl/drawing_animation/tree/master/example/example_02))**\n\n        The simplified version will be sufficient in most of the use cases. If you wish to controll the animation furthermore or you want to syncronize it with other existing animations, you might consider using an custom [animation controller](https://docs.flutter.io/flutter/animation/AnimationController-class.html):\n        ```dart\n        AnimatedDrawing.svg(\n          \"assets/test.svg\",\n          controller: this.controller,\n        )\n        ```\n\n4. Check out examples in the `examples` folder. It seems that antialising for the Paint/Canvas is switched off when using debug mode. For pretty results use `flutter run --release`.\n\n## Getting Started  - AnimatedDrawing.paths (still experimental)\nBy providing Path objects directly to the widget, elements can be changed dynamically, even during the animation. The internal data structure is rebuild every time the state changes, therefore the animation performance might suffer if the amount of elements in `paths` is very high (see Limitations). More examples will be provided soon (for now see [Example_01](https://github.com/biocarl/drawing_animation/tree/master/example/example_01) and [Example_04](https://github.com/biocarl/drawing_animation/tree/master/example/example_04)).\n\n  ```dart\n  AnimatedDrawing.paths(\n      [\n      ///Path objects\n      ],\n      paints:[\n      ///Paint objects (optional), specifies a [Paint] object for each [Path] element in `paths`.\n      ],\n      run: this.run,\n      duration: new Duration(seconds: 3),\n      onFinish: () =\u003e setState(() {\n        this.run  = false;\n      }),\n    )\n  ```\n**Current limitations:**\n\nAs stated, for every state change of the widget, the internal data structure for the path objects is rebuilt. When the amount of provided path objects is high and a custom `animationOrder` is defined (which triggers a sorting operation over the data structure) it can result in lags. This becomes especially apparent when the state is rebuild at 60fps by another animation (e.g. rotating the path objects at every frame). Any suggestions on how to elegantly solve this are very welcome :-)\n\n## Option list\nHere is increasingly growing list with all available parameters and their visual effect.\n\n| Field            | Type                            | \u003cpre\u003e ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ \u003c/pre\u003eExample\u003cpre\u003e ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ \u003c/pre\u003e |\n| :---             |    :---:                       |     :---:     |\n| `lineAnimation` \u003cbr/\u003e\u003cbr/\u003e *Specifies in which way the path elements are drawn to the canvas. When `allAtOnce` selected all path segments are drawn simultaneously. `oneByOne` paints every path segment one after another.* | `LineAnimation.oneByOne`        | \u003cimg src=\"https://github.com/biocarl/img/raw/master/drawing_animation/met_oneByOne.gif\" width=\"200px\"\u003e   |\n|                                    | `LineAnimation.allAtOnce`       | \u003cimg src=\"https://github.com/biocarl/img/raw/master/drawing_animation/met_allAtOnce.gif\" width=\"200px\"\u003e  |\n| `animationOrder` \u003cbr/\u003e\u003cbr/\u003e *Denotes the order in which the path elements are drawn to canvas when `lineAnimation` is set to `LineAnimation.oneByOne`. When no `animationOrder` is specified it defaults to the same order specified in the Svg asset or path array (`PathOrder.original`).* | `PathOrders.original`           | \u003cimg src=\"https://github.com/biocarl/img/raw/master/drawing_animation/met_original.gif\" width=\"200px\"\u003e      |\n|                                    | `PathOrders.bottomToTop`        | \u003cimg src=\"https://github.com/biocarl/img/raw/master/drawing_animation/met_bottomToTop.gif\" width=\"200px\"\u003e      |\n|                                    | `PathOrders.decreasingLength`   | \u003cimg src=\"https://github.com/biocarl/img/raw/master/drawing_animation/met_decreasingLength.gif\" width=\"200px\"\u003e      |\n|                                    | `PathOrders.increasingLength`   | \u003cimg src=\"https://github.com/biocarl/img/raw/master/drawing_animation/met_increasingLength.gif\" width=\"200px\"\u003e      |\n|                                    | `PathOrders.leftToRight`        | \u003cimg src=\"https://github.com/biocarl/img/raw/master/drawing_animation/met_leftToRight.gif\" width=\"200px\"\u003e      |\n|                                    | `PathOrders.rightToLeft`        | \u003cimg src=\"https://github.com/biocarl/img/raw/master/drawing_animation/met_rightToLeft.gif\" width=\"200px\"\u003e      |\n|                                    | `PathOrders.topToBottom`        | \u003cimg src=\"https://github.com/biocarl/img/raw/master/drawing_animation/met_topToBottom.gif\" width=\"200px\"\u003e      |\n| `animationCurve` \u003cbr/\u003e\u003cbr/\u003e *Easing curves are used to adjust the rate of change of an animation over time, allowing them to speed up and slow down, rather than moving at a constant rate. See [Flutter docs](https://api.flutter.dev/flutter/animation/Curves-class.html).* | `Curves.linear`                 | \u003cimg src=\"https://github.com/biocarl/img/raw/master/drawing_animation/met_linear.gif\" width=\"200px\"\u003e       |\n|                                    | `Curves.elasticOut`             | \u003cimg src=\"https://github.com/biocarl/img/raw/master/drawing_animation/met_elasticOut.gif\" width=\"200px\"\u003e       |\n|                                    | `Curves.bounceInOut`            | \u003cimg src=\"https://github.com/biocarl/img/raw/master/drawing_animation/met_bounceInOut.gif\" width=\"200px\"\u003e       |\n|                                    | `Curves.decelerate`             | \u003cimg src=\"https://github.com/biocarl/img/raw/master/drawing_animation/met_decelerate.gif\" width=\"200px\"\u003e       |\n|                                    | **Other**            |     |\n| `onFinish` \u003cbr/\u003e\u003cbr/\u003e *Callback when one animation cycle is finished. By default every animation repeats infinitely.*|  | |\n| `onPaint` \u003cbr/\u003e\u003cbr/\u003e *Callback when a complete path is painted to the canvas. Returns with the relative index and the Path element itself.*|  | |\n| `range` \u003cbr/\u003e\u003cbr/\u003e *Start and stop a animation from a certain moment in time by defining a `AnimationRange` object.*|  | |\n| `scaleToViewport` \u003cbr/\u003e\u003cbr/\u003e *Path objects are scaled to the available viewport while maintaining the aspect ratio. Defaults to true.*|  | |\n\n## Supported SVG specifications\n   - Only path elements (`\u003cpath d=\"M3m1....\"\u003e`) are supported for now. I'm currently considering to add [flutter_svg](https://pub.dartlang.org/packages/flutter_svg) as dependency for more complete SVG parsing.\n   - Attributes\n     * stroke, only Hex-Color without alpha for now\n     * stroke-width\n     * style, but only the both fields above\n   - No transforms are supported, yet.\n\n## How can I use my own SVG files?\nA lot of tools can convert existing SVG files to the [supported format](#supported-svg-specifications).\nFor example with Inkscape:\n1. Select all objects and ungroup till there is no group left (Ctrl+U)\n2. Convert selection to paths: `Path\u003e\u003eObject to Path` and hit save\n3. Afterwards remove transforms with [svgo](https://github.com/svg/svgo) or the webversion [svgomg](https://jakearchibald.github.io/svgomg/).\n4. Now it should work, if not feel free to write an issue!\n\n## Examples:\n  - [`Example_01`](https://github.com/biocarl/drawing_animation/tree/master/example/example_01): Set up simplfied AnimatedDrawing with AnimatedDrawing.svg and AnimatedDrawing.paths\n  - [`Example_02`](https://github.com/biocarl/drawing_animation/tree/master/example/example_02): Set up AnimatedDrawing with an custom animation controller\n  - [`Example_03`](https://github.com/biocarl/drawing_animation/tree/master/example/example_03): Small artistic showcasing app with vectorizied drawings of [old book scans](https://www.flickr.com/photos/britishlibrary) provided by the British Library\n  - [`Example_04`](https://github.com/biocarl/drawing_animation/tree/master/example/example_04): Show how to create Gifs with high resolution using the `debug` field.\n\n## Todo\n  - Better test coverage\n  - Improve SVG parsing capabilities\n    * Circles, rect etc.\n    * Better color parsing incl. alpha for hex code and RGB(A)\n    * Subsitute SVG parsing logic with an mature parsering library as [flutter_svg](https://pub.dartlang.org/packages/flutter_svg)\n  - Provide a way to overwrite color/brush etc. for `AnimatedDrawing.svg` - maybe also over `paints` object?\n  - Define a [PathOrder] which maintains each Path and only sorts them relative to each other\n  - Improve performance AnimatedDrawing.paths, for every rebuild all provided paths have to be parsed again. Is there a way to check Path-Objects for equality like Keys for widget? Idea: implementing a proxy for Path which creates a unique hash when command evoked\n  - Showcase: write \"drawing_animation\" in different ways + 3 cirlcles + color it and one gif and put it at the top\n  - Showcase: Create fractals with L-Systems\n  - AnimatedDrawing.paths:\n    * Provide some kind of fixed boundingBox since Paths and the overall bounding box can dynamically change (e.g. rotating circle pulses in size)\n    * Also custom viewport\n\n## Credits\n\nThank you to [maxwellito](https://github.com/maxwellito) for his [vivus project](https://github.com/maxwellito/vivus) which served me as initial inspiration for this library. Thank you also to [dnfield](https://github.com/dnfield) for the [path_parsing](https://github.com/dnfield/dart_path_parsing) library.\n\nCredits to the British Library for their awesome [collection of old book scans](https://www.flickr.com/photos/britishlibrary) which I used for the [showcasing app](https://github.com/biocarl/drawing_animation/tree/master/example/example_03).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhaucky%2Fdrawing_animation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhaucky%2Fdrawing_animation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhaucky%2Fdrawing_animation/lists"}