{"id":13436417,"url":"https://github.com/roipeker/graphx","last_synced_at":"2026-02-20T23:01:53.691Z","repository":{"id":40371481,"uuid":"305905470","full_name":"roipeker/graphx","owner":"roipeker","description":"GraphX package for Flutter.","archived":false,"fork":false,"pushed_at":"2025-04-15T12:58:48.000Z","size":21731,"stargazers_count":519,"open_issues_count":6,"forks_count":55,"subscribers_count":15,"default_branch":"master","last_synced_at":"2026-02-17T00:26:14.064Z","etag":null,"topics":["custompainter","dart","flutter","graphx"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/graphx","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/roipeker.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"custom":["https://www.paypal.me/roipeker","https://www.buymeacoffee.com/roipeker"]}},"created_at":"2020-10-21T04:13:57.000Z","updated_at":"2026-01-27T16:32:45.000Z","dependencies_parsed_at":"2024-06-21T16:37:09.761Z","dependency_job_id":"52df7ab3-f535-48db-9225-13d99ed07ec8","html_url":"https://github.com/roipeker/graphx","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/roipeker/graphx","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roipeker%2Fgraphx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roipeker%2Fgraphx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roipeker%2Fgraphx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roipeker%2Fgraphx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/roipeker","download_url":"https://codeload.github.com/roipeker/graphx/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roipeker%2Fgraphx/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29667119,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-20T19:49:36.704Z","status":"ssl_error","status_checked_at":"2026-02-20T19:44:05.372Z","response_time":59,"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":["custompainter","dart","flutter","graphx"],"created_at":"2024-07-31T03:00:47.927Z","updated_at":"2026-02-20T23:01:53.671Z","avatar_url":"https://github.com/roipeker.png","language":"Dart","readme":"\u003cdiv align=\"center\"\u003e\n\n![GraphX™](https://raw.githubusercontent.com/roipeker/graphx/master/example/assets/graphx_logo.svg?sanitize=true)\n\n[![pub package](https://img.shields.io/pub/v/graphx.svg?logo=data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGQ9Ik0xNiAtMS4zOTg3NmUtMDZMNDggMEw0OCAyNS41OTM4TDQxLjU5MzcgMjUuNTkzN0w0MS41OTM3IDYuMzk4NDRMMjIuMzk4NCA2LjM5ODQ0TDIyLjM5ODQgMTkuMTk1M0wyOC43OTY5IDE5LjE5NTNMMjguNzk2OSAxMi43OTY5TDM1LjE5NTMgMTIuNzk2OUwzNS4xOTUzIDI1LjU5MzdMMTYgMjUuNTkzN0wxNiAtMS4zOTg3NmUtMDZaIiBmaWxsPSIjNDBDNEZGIi8+CjxwYXRoIGQ9Ik0xNiAzMkwyMi4zOTg0IDMyTDIyLjM5ODQgMzguMzk4NEwxNiAzOC4zOTg0TDE2IDMyWk0xNiA1Ny41OTM3TDIyLjM5ODQgNTcuNTkzN0wyMi4zOTg0IDY0TDE2IDY0TDE2IDU3LjU5MzdaTTIyLjM5ODQgMzguMzk4NEwyOC43OTY5IDM4LjM5ODRMMjguNzk2OSA0NC43OTY5TDIyLjM5ODQgNDQuNzk2OUwyMi4zOTg0IDM4LjM5ODRaTTIyLjM5ODQgNTEuMTk1M0wyOC43OTY5IDUxLjE5NTNMMjguNzk2OSA1Ny41OTM3TDIyLjM5ODQgNTcuNTkzN0wyMi4zOTg0IDUxLjE5NTNaTTI4Ljc5NjkgNDQuNzk2OUwzNS4xOTUzIDQ0Ljc5NjlMMzUuMTk1MyA1MS4xOTUzTDI4Ljc5NjkgNTEuMTk1M0wyOC43OTY5IDQ0Ljc5NjlaTTM1LjE5NTMgMzguMzk4NEw0MS41OTM3IDM4LjM5ODRMNDEuNTkzNyA0NC43OTY5TDM1LjE5NTMgNDQuNzk2OUwzNS4xOTUzIDM4LjM5ODRaTTM1LjE5NTMgNTEuMTk1M0w0MS41OTM3IDUxLjE5NTNMNDEuNTkzNyA1Ny41OTM3TDM1LjE5NTMgNTcuNTkzN0wzNS4xOTUzIDUxLjE5NTNaTTQxLjU5MzggMzJMNDggMzJMNDggMzguMzk4NEw0MS41OTM3IDM4LjM5ODRMNDEuNTkzOCAzMlpNNDEuNTkzNyA1Ny41OTM3TDQ4IDU3LjU5MzhMNDggNjRMNDEuNTkzNyA2NEw0MS41OTM3IDU3LjU5MzdaIiBmaWxsPSIjMjlCNkY2Ii8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDAiPgo8cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==\u0026label=graphx\u0026style=for-the-badge\u0026color=blue)](https://pub.dev/packages/graphx)\n[![style: effective dart](https://img.shields.io/badge/style-effective_dart-40c4ff.svg?style=for-the-badge\u0026color=blue)](https://pub.dev/packages/effective_dart)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg?style=for-the-badge\u0026color=blue)](https://opensource.org/licenses/MIT)\n\n| rendering | prototype | design |\n\nMaking drawings and animations in Flutter, super simple and *FUN*.\n\n\u003c/div\u003e\n\n- Check our [web 🎨 gallery !](https://graphx-gallery.surge.sh/#/)\n\n- Play with the examples directly [on Zapp!](https://zapp.run/pub/graphx?entry=lib/main.dart\u0026file=lib/main.dart)\n\n---\n\n### video showcase.\n\nUsed at [Flutter Forward Extended London](https://gdg.community.dev/events/details/google-gdg-london-presents-flutter-forward-extended-london/) (Jan 2023)\n\n- GraphX compilation\n\n  [![GraphX Intro](https://img.youtube.com/vi/51LJvwWP16A/1.jpg)](https://www.youtube.com/watch?v=51LJvwWP16A \"GraphX Intro\")\n\n- Fly Dash! demo\n\n  [![Fly Dash!](https://img.youtube.com/vi/T_SkP68BXSY/1.jpg)](https://www.youtube.com/watch?v=T_SkP68BXSY \"Fly Dash! demo\")\n\n### news.\n\n**v1.0.14** has some breaking changes, the flutter_svg dependency was removed, you can copy paste the\nold [SvgUtils](https://github.com/roipeker/graphx_svg_utils/blob/main/lib/svg_utils.dart) from the repo and use your own\nflutter_svg constraints. Use `ResourceLoader.setSvgDataParser()` to keep the svg loading support. \n\nCheck our [CHANGELOG](https://github.com/roipeker/graphx/blob/master/CHANGELOG.md).\n \n### wiki-tips.\n\nTo get some extended, boring explanations, and eventually some sample codes, check\nthe [GraphX™ Wiki](\u003chttps://github.com/roipeker/graphx/wiki/GraphX-tips-and-random%5BnextInt()%5D-stuffs.#graphx-general-tips\u003e)\n\n### prototyping.\n\nGraphX is all about visuals, here you have some screen captures of random prototypes I've been\ndoing, while developing and testing graphx.\n\nFor your GraphX scene to support **Hot Reload**, you should initialize your variables and\nDisplayObjects inside `addedToStage`, and optionally clean them in `dispose`.\n\n[![artificial horizon](https://media.giphy.com/media/NMG8gfpJxFiu1eALZo/giphy.gif)](https://media.giphy.com/media/NMG8gfpJxFiu1eALZo/source.mp4)\n[![parallax game](https://media.giphy.com/media/RIrvhfZoDtal41Tb4e/giphy-downsized.gif)](https://media.giphy.com/media/RIrvhfZoDtal41Tb4e/source.mp4)\n[![charts pie color 2](https://media.giphy.com/media/pQdeurUOAqWdZuxxUK/giphy.gif)](https://media.giphy.com/media/pQdeurUOAqWdZuxxUK/source.mp4)\n[![simple particles](https://media.giphy.com/media/VYSJF6uUO323FV0Nhh/giphy.gif)](https://media.giphy.com/media/WodwBEccmRjmhq2dAp/source.mp4)\n[![drawing api playful v1](https://media.giphy.com/media/HdJmgzVYLK8jUxX437/giphy.gif)](https://media.giphy.com/media/HdJmgzVYLK8jUxX437/source.mp4)\n\n... jump to [other gifs samples](#screencast-demos) ...\n\n\u003cdiv align=\"left\"\u003e\n\n## Background.\n\nGraphX™ is here to help you build custom drawings in your Flutter apps. Providing a great\nversatility to power those screen pixels to a different level.\n\nIt's inspired by the good-old Flash API, which forged my way into programming back in the days, and\ninspired many other rendering frameworks, in several languages through the years.\n\nI was thinking how much I missed to \"play\" with code, to make things more organic, artistic,\nalive... I totally love Flutter, but I always feel that it requires too much boilerplate to make\nthings move around (compared to what I used to code).\n\nEven if GraphX™ is not an animation library (although has a small tween engine), nor a game engine,\nIt can help you build really awesome user experiences! It just runs on top of `CustomPainter`...\nUsing what Flutter SDK exposes from the SKIA engine through the Canvas, yet, gives you some \"\nframework\" to run `isolated` from the Widget's world.\n\nCan be used to simple draw a line, a circle, maybe a custom button, some splash effect on your UI,\nor even a full-blown game in a portion of the screen.\n\nMix and match with Flutter as you please, as **GraphX**™ uses `CustomPainter`, it is part of your\nWidget's tree.\n\n## Concept.\n\nThe repo is in early stages. You can check the [changelog](https://github.com/roipeker/graphx/blob/master/CHANGELOG.md) to get the latest updates.\n\nGraphX has support for loading `rootBundle` assets:\n\n```dart\nResourceLoader.loadBinary(assetId)\nResourceLoader.loadGif(assetId)\nResourceLoader.loadTextureAtlas(imagePath, xmlPath)\nResourceLoader.loadTexture(assetId)\nResourceLoader.loadImage(assetId)\nResourceLoader.loadString(assetId)\nResourceLoader.loadJson(assetId)\nResourceLoader.loadSvg(assetId)\n```\n\nAs well as network images (SVG is not supported on non-SKIA targets):\n\n```dart\nResourceLoader.loadNetworkTexture(url);\nResourceLoader.loadNetworkSvg(url);\n```\n\nResourceLoader also stores in cache based on the `assetId` or `url` provided. You can pass `cacheId`\nin most methods\nto override that, once the resources loaded, you can access them with:\n\n```dart\nResourceLoader.getTexture(id);\nResourceLoader.getSvg(id);\nResourceLoader.getAtlas(id);\nResourceLoader.getGif(id);\n```\n\nGraphX™ also provides \"raw\" support for Text rendering, using the `StaticText` class.\n\n---\n\nHow does it work?\n\nGraphX™ drives a `CustomPainter` inside. The idea is to simplify the usage of Flutter's `Canvas`,\nplus adding the **display list** concept, very similar to the Widget Tree concept; so you can\nimperatively code, manage and create more complex \"Scenes\".\n\nThe library has its own rendering cycle using Flutter's `Ticker` (pretty much\nlike `AnimationController` does), and each `SceneWidgetBuilder` does its own input capture and\nprocessing (mouse, keyboard, touches). Even if it runs on the Widget tree, you can enable the flags\nto capture mouse/touch input, or keystrokes events (if u wanna do some simple game, or desktop/web\ntool).\n\n### Sample code.\n\n```dart\nbody: Center(\n  child: SceneBuilderWidget( /// wrap any Widget with SceneBuilderWidget\n    builder: () =\u003e SceneController(\n      back: GameSceneBack(), /// optional provide the background layer\n      front: GameSceneFront(), /// optional provide the foreground layer\n    ),\n    child: Column(\n      mainAxisAlignment: MainAxisAlignment.center,\n      children: \u003cWidget\u003e[\n        Text('You have pushed the button this many times:'),\n        Text('$_counter',style: Theme.of(context).textTheme.headline4),\n      ],\n    ),\n  ),\n),\n```\n\nGraphX™ is based on \"Scenes\", each `SceneBuilderWidget` requires a `SceneController`.\nThis controller is the initializer of the Scenes layers, which can be:\n\n- `back` (background painter),\n- `front` (foreground painter),\n- or both.\n\nAlso takes a `SceneConfig()`, so you can configure what you need from the Widget's side.\nYou can make use of some predefined Scene configurators:\n\n- `SceneConfig.static`: If you plan to only use this scene to draw some graphics, like a background.\n- `SceneConfig.games`: Activates all GraphX features, auto render and update, pointers and keyboard\n  support.\n- `SceneConfig.tools`: Shortcut of _games_, helpful if you wanna use it in some custom drawing\n  editor, or similar with keyboard shortcuts.\n- `SceneConfig.interactive` (_default_): Probably the most common setup for mobile, enables all\n  features except keyboard support.\n- `SceneConfig.autoRender`: Allows you to have a ticker running, and auto update the scene, with NO\n  inputs (mouse/touch/keyboard), if you wanna have an animated Widget, or maybe if you wanna control\n  it externally.\n\nEach \"Scene\" has to extend `Sprite`, this root class represents the starting point of that\nparticular scene hierarchy. Think of it as `MaterialApp` widget is to all other children Widgets in\nthe tree.\n\nHere we get into **GraphX™** world, no more Widgets trees or immutable properties.\n\nYou can make custom UI widgets, games, or make use of GraphX to create a static drawing, like curved\nbackgrounds, or complex shapes.\n\nIs a good practice to override `addedToStage()` as your entry point, here the Scene is ready,\nthe `root` class has been added to the _glorified stage_, so you can access the Canvas size\nthrough `stage.stageWidth` and `stage.stageHeight`, the keyboard manager (if available), and lots of\nother properties, up to the `SceneController` that owns the scene (`stage.scene.core`, although,\nthat's irrelevant for now):\n\n```dart\nclass GameScene extends Sprite {\n\n  @override\n  void addedToStage() {\n    /// Here you can access the `stage`, get the size of the\n    /// current Scene, keyboard events, or any stage property\n    /// You can initialize your DisplayObjects here to play\n    /// \"safe\" if you need to access any stage property.\n  }\n```\n\nFor now, GraphX™ has a few classes for rendering in the \"display list\":\nLike `Shape` (for \"pen\" drawings commands through it's `graphics` property), `Sprite` (create\nhierarchies of rendering objects), `StaticText` (for Texts), `GxIcon` (for Flutter icons)\n, `Bitmap` (for `GTexture`, which is a wrapper around `dart:ui.Image`), `MovieClip`(for Spritesheet\nand Gif support), `SvgShape` (dependency for `svg`, package not included), `SimpleParticleSystem` (\nto create optimized particles for games), and Flare/Rive render objects which will live in another\npackage/utility eventually to avoid dependencies.\n\nBy the way, in the previous example, `GameScene` is the `root` node in the _display tree_, the entry\npoint where DisplayObjects renders, and where you need to add your own objects.\n\nFor instance, to create a simple purple circle:\n\n```dart\n@override\nvoid addedToStage() {\n  var circle = Shape();\n  circle.graphics.lineStyle(2, Colors.purple.value)\n\n  /// access HEX value of Color\n    ..drawCircle(0, 0, 20)\n    ..endFill();\n  addChild(circle); // add the child to the rootScene.\n}\n```\n\n`Sprite` internally extends from the abstract class `DisplayObjectContainer`, and as the name\nimplies, is a container that can contain more `DisplayObject`s. Yet, `Shape` is a `DisplayObject` (\nanother abstract class, and also, the root class of all rendering objects in **GraphX**), so it\ncan't contain children. That makes it a bit more performant on each painter step.\nSo, when you need to group objects, you should create `Sprite`s and add children into it, even\nother `Sprite`s, that's the idea of **GraphX** after all, group rendering objects so you can\ntransform them independently or transform a parent `Sprite` (or subclass of it), and apply it to the\ntree inside of it, transformations are accumulative from parent to child ...\n\n#### What is a transformation?\n\nThe ability to translate, scale, rotate, skew a `DisplayObject` through his properties: x, y, width,\nheight, scaleX, scaleY, rotation, skewX, skewY, etc.\n\nWe could also use our root scene to draw things:\n\n```dart\n@override\naddedToStage() {\n  graphics.beginFill(0x0000ff, .6)\n    ..drawRoundRect(100, 100, 40, 40, 4)\n    ..endFill();\n  ...\n}\n```\n\n#### Pointer access\n\nPointer signals has been \"simplified\" as Mouse events now... as it's super easy to work with single\ntouch / mouse interactions in `DisplayObject`s.\nThere are a bunch of signals to listen on each object... taken from AS3, and JS.\n\n- onMouseDoubleClick\n- onMouseClick\n- onMouseDown\n- onMouseUp\n- onMouseMove\n- onMouseOver\n- onMouseOut\n- onMouseScroll\n\nThey all emit a `MouseInputData` with all the needed info inside, like stage coordinates, or\ntranslated local coordinates, which \"mouse\" button is pressed, etc.\n\n---\n\n### Demos.\n\n_Some demos are only using **GraphX™** partially_\n\n- [snake game ⇢](https://graphx-snake-game.surge.sh/)\n- [breakout game ⇢](https://graphx-breakout-v4.surge.sh/)\n\n- [3d card with shadow ⇢](https://graphx-dropshadow-card.surge.sh/)\n- [rating ⇢](https://graphx-star-rating.surge.sh/) ([dribbble design](https://dribbble.com/shots/12287144-Rating))\n\n- [drawpad ⇢](https://graphx-drawpad3.surge.sh/)\n  // [creepy version ⇢](https://graphx-drawpad2.surge.sh/)\n\n- [node garden ⇢](https://graphx-node-garden.surge.sh/)\n\n- [fb reactions ⇢](https://graphx-fb-reactions.surge.sh/)\n\n- [puzzle pieces ⇢](https://roi-puzzle-v2.surge.sh/)\n\n- [lines repulsion ⇢](https://roi-graphx-mouse-repulsion.surge.sh/)\n- [liquify dog ⇢](https://roi-graphx-liquify-dog.surge.sh/)\n- [image transform triangles ⇢](https://roi-graphx-image-transform-triangles.surge.sh/)\n- [jelly green ⇢](https://roi-graphx-jelly-green.surge.sh/) ([source](https://gist.github.com/roipeker/dbf792b862ad8dfb526c227c2e1d4ad9))\n\n- [drawing-ball collision ⇢](https://roi-graphx-balls-collision.surge.sh/) ([source](https://gist.github.com/roipeker/d0fbbb1fa5409594f18c8e280ac39d93))\n\n- [spiral 3d ⇢](https://roi-graphx-spiral3d.surge.sh/) ([source](https://gist.github.com/roipeker/f5987e7158a3a7e932e2547e3d919951))\n\n- [splashscreen ⇢](https://roi-graphx-splash.surge.sh/) ([source](https://gist.github.com/roipeker/37374272d15539aa60c2bdc39001a035))\n\n- [color spectrum ⇢](https://roi-graphx-color-picker.surge.sh/) (based\n  on [SuperDeclarative! workshop](https://www.youtube.com/watch?v=HURA4DKjA1c))\n\n- [ui line button ⇢](https://roi-graphx-linebutton.surge.sh/)\n\n- [flutter widget mix ⇢](https://roi-graphx-widgetmix.surge.sh)\n\n- [space shooter ⇢](https://roi-graphx-spaceshooter.surge.sh)\n\n  \u003e controls \u003e move: ARROWS, thrust: SHIFT, shoot: SPACEBAR, shield: U\n\n- [artificial horizon ⇢](https://roi-graphx-artificial-horizon.surge.sh/)\n\n  \u003e controls \u003e change altitude and rotation: ARROWS\n\n- [split RGB ⇢](https://roi-graphx-rgbsplit.surge.sh)\n\n- [input text particles ⇢](https://roi-graphx-particles-input.surge.sh)\n\n- [fishEye particles ⇢](https://roi-graphx-fisheyeparticles.surge.sh/)\n\n- [fishEye particles (basic) ⇢](https://roi-graphx-fisheyetext.surge.sh)\n\n- [particles emitter ⇢](https://roi-graphx-particles2.surge.sh)\n\n- [shapeMaker clone ⇢](https://roi-graphx-shapemaker.surge.sh)\n\n- [mouse follower ⇢](https://roi-graphx-dotchain.surge.sh)\n\n- [basic hit test ⇢](https://roi-graphx-hittest.surge.sh)\n\n- [spriteSheet rendering ⇢](https://roi-graphx-spritesheet.surge.sh)\n\n- [displayObject pivot ⇢](https://roi-graphx-textpivot.surge.sh)\n\n- [simple solo-ping-pong game ⇢](https://roi-graphx-pingpong.surge.sh/)\n\n- [first experiment with graphx ⇢](https://roi-graphx-cells.surge.sh/)\n\n---\n\nFeel free to play around with the current API, even if it's still rough on edges and unoptimized, it\nmight help you do things quicker.\n\nSKIA is pretty powerful!\n\n\u003c/div\u003e\n\n---\n\n### help \u0026 socialize.\n\n| **\nDiscord**                                                                                                                                | **\nTelegram**                                                                                                                                            |\n| :----------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| [![Discord Shield](https://img.shields.io/discord/777232130991718440.svg?style=for-the-badge\u0026logo=discord)](https://discord.gg/5aTX6HzS5Q) | [![Telegram](https://img.shields.io/badge/chat-on%20Telegram-blue.svg?style=for-the-badge\u0026logo=telegram)](https://t.me/joinchat/Mbc7jBxxAm4K1uhaVPIR-Q) |\n\n---\n\n### Screencast Demos.\n\n(Some demos uses GraphX's only for ticker, input events or initial scene graph, making usage of\ndirect `Canvas` calls).\\_\n\n- charts bezier + gradient\n\n  [![charts bezier + gradient](https://media.giphy.com/media/QWHufIK9GyEAIM4Dcn/giphy.gif)](https://media.giphy.com/media/QWHufIK9GyEAIM4Dcn/source.mp4)\n\n- neumorphic button\n\n  [![neumorphic button](https://media.giphy.com/media/tX24wynwPRVm6cymjy/giphy.gif)](https://media.giphy.com/media/tX24wynwPRVm6cymjy/source.mov)\n\n- 3d card shadow\n\n  [![3d card shadow](https://media.giphy.com/media/18XFI8lY9Uj6cgoF66/giphy-downsized.gif)](https://media.giphy.com/media/18XFI8lY9Uj6cgoF66/source.mp4)\n\n- 3d pizza box\n\n  [![3d pizza box](https://media.giphy.com/media/8OUnKDJ2ujT9pBpylj/giphy.gif)](https://media.giphy.com/media/8OUnKDJ2ujT9pBpylj/source.mp4)\n\n- pendulum\n\n  [![pendulum](https://media.giphy.com/media/6D946gz1PkF0zZV697/giphy.gif)](https://media.giphy.com/media/6D946gz1PkF0zZV697/source.mp4)\n\n- rating stars\n\n  [![rating stars](https://media.giphy.com/media/2ZK44FneclymOpyEXR/giphy.gif)](https://media.giphy.com/media/2ZK44FneclymOpyEXR/source.mov)\n\n- rotating dial\n\n  [![rotating dial](https://media.giphy.com/media/xC8rB3jR9nXDJDMwQM/giphy.gif)](https://media.giphy.com/media/xC8rB3jR9nXDJDMwQM/source.mp4)\n\n- intro \"universo flutter\"\n\n  [![intro \"universo flutter\"](https://media.giphy.com/media/ZyVw45nnrQ49Ig3NCb/giphy.gif)](https://media.giphy.com/media/ZyVw45nnrQ49Ig3NCb/source.mp4)\n\n- 3d spiral loader\n\n  [![3d spiral loader](https://media.giphy.com/media/eT1pePI6NqpEg3rBmA/giphy.gif)](https://media.giphy.com/media/eT1pePI6NqpEg3rBmA/source.mov)\n\n- breakout game\n\n  [![breakout game](https://media.giphy.com/media/roLsn44mOUpbOhV0Da/giphy.gif)](https://media.giphy.com/media/roLsn44mOUpbOhV0Da/source.mov)\n\n- gauges\n\n  [![gauges](https://media.giphy.com/media/rWF1Sc4CGLf3zfYlXn/giphy-downsized.gif)](https://media.giphy.com/media/rWF1Sc4CGLf3zfYlXn/source.mp4)\n\n- bubble loader\n\n  [![bubble loader](https://media.giphy.com/media/pKXa68pcv2H1dSjxYX/giphy.gif)](https://media.giphy.com/media/pKXa68pcv2H1dSjxYX/source.mp4)\n\n- xmas counter\n\n  [![xmas counter](https://media.giphy.com/media/yTNXKR5BHbQKOKpfrS/giphy-downsized.gif)](https://media.giphy.com/media/yTNXKR5BHbQKOKpfrS/source.mp4)\n\n- google fonts\n\n  [![google fonts](https://media.giphy.com/media/oUoYS87SzOldcI5itX/giphy.gif)](https://media.giphy.com/media/oUoYS87SzOldcI5itX/source.mp4)\n\n- graphics.drawTriangles\n\n  [![graphics.drawTriangles](https://media.giphy.com/media/Dh7i3D5z1kbWpc4bn3/giphy-downsized.gif)](https://media.giphy.com/media/Dh7i3D5z1kbWpc4bn3/source.mp4)\n\n- image transform\n\n  [![image transform](https://media.giphy.com/media/s9BcsLdSGMU0ARvOQX/giphy.gif)](https://media.giphy.com/media/s9BcsLdSGMU0ARvOQX/source.mp4)\n\n- svg sample demo\n\n  [![svg sample demo](https://media.giphy.com/media/OtGpmd1fAVzw3pK7kD/giphy.gif)](https://media.giphy.com/media/wLuFm9xlXXmkllWJQt/source.mp4)\n\n- chart lines\n\n  [![charts lines](https://media.giphy.com/media/uVFvFOTUICAsYqb13r/giphy.gif)](https://media.giphy.com/media/uVFvFOTUICAsYqb13r/source.mp4)\n\n- charts pie\n\n  [![charts pie color 1](https://media.giphy.com/media/z1aIQzYSSGVKeWbabJ/giphy.gif)](https://media.giphy.com/media/z1aIQzYSSGVKeWbabJ/source.mp4)\n\n- mouse cursor support\n\n  [![mouse cursor support](https://media.giphy.com/media/MjXTKJpen8vIN34rfW/giphy.gif)](https://media.giphy.com/media/MjXTKJpen8vIN34rfW/source.mp4)\n\n- debug objects bounds\n\n  [![debug objects bounds](https://media.giphy.com/media/F7Wnsw3kUjk0L4CDfu/giphy.gif)](https://media.giphy.com/media/F7Wnsw3kUjk0L4CDfu/source.mp4)\n\n- demo sample tween\n\n  [![demo sample tween](https://media.giphy.com/media/EY4RhVoqHTKVBJUNzW/giphy.gif)](https://media.giphy.com/media/EY4RhVoqHTKVBJUNzW/source.mp4)\n\n- direction blur filter\n\n  [![directional blur filter](https://media.giphy.com/media/a4Rzda8uvFxCPvfI22/giphy.gif)](https://media.giphy.com/media/a4Rzda8uvFxCPvfI22/source.mp4)\n\n- hand drawing v1\n\n  [![hand drawing v1](https://media.giphy.com/media/uliHRVWVW5IlliliIi/giphy-downsized.gif)](https://media.giphy.com/media/uliHRVWVW5IlliliIi/source.mp4)\n\n- hand drawing v2\n\n  [![hand drawing v2](https://media.giphy.com/media/f6UJj36HqFYJuejz5M/giphy.gif)](https://media.giphy.com/media/f6UJj36HqFYJuejz5M/source.mp4)\n\n- drawing api playful v2\n\n  [![drawing api playful v2](https://media.giphy.com/media/Ld3XIYErKsoyCQtzcg/giphy.gif)](https://media.giphy.com/media/Ld3XIYErKsoyCQtzcg/source.mp4)\n\n- elastic band\n\n  [![elastic band](https://media.giphy.com/media/KiSrFNYQ7kED1HzSlJ/giphy.gif)](https://media.giphy.com/media/KiSrFNYQ7kED1HzSlJ/source.mp4)\n\n- flare playback\n\n  [![Flare playback](https://media.giphy.com/media/t0ZcOUPdCtg8aPtL2B/giphy-downsized.gif)](https://media.giphy.com/media/t0ZcOUPdCtg8aPtL2B/source.mp4)\n\n- flip child scenes\n\n  [![Flip child scenes](https://media.giphy.com/media/siMNzfRWTaKK9Pw0n2/giphy.gif)](https://media.giphy.com/media/siMNzfRWTaKK9Pw0n2/source.mp4)\n\n- flutter widgets mix\n\n  [![Mix with Flutter widgets](https://media.giphy.com/media/YfzNLmfE1hutWI176e/giphy-downsized.gif)](https://media.giphy.com/media/YfzNLmfE1hutWI176e/source.mp4)\n\n- icon with gradient paint\n\n  [![icon painter gradient](https://media.giphy.com/media/gC94IOdu6v1GoWJZWY/giphy.gif)](https://media.giphy.com/media/gC94IOdu6v1GoWJZWY/source.mp4)\n\n- inverted masks\n\n  [![inverted masks](https://media.giphy.com/media/1tsbaO28YXXxc1lvsd/giphy-downsized.gif)](https://media.giphy.com/media/1tsbaO28YXXxc1lvsd/source.mp4)\n\n- isometric demo\n\n  [![isometric demo](https://media.giphy.com/media/EInY3MKZ2xvmYNl3fm/giphy.gif)](https://media.giphy.com/media/EInY3MKZ2xvmYNl3fm/source.mp4)\n\n- light button\n\n  [![light button](https://media.giphy.com/media/4Sspuw3R8Rdr2tsE4T/giphy.gif)](https://media.giphy.com/media/4Sspuw3R8Rdr2tsE4T/source.mp4)\n\n- marquesina\n\n  [![marquesina de texto](https://media.giphy.com/media/Q2cIsU34CbzZHfNA2z/giphy.gif)](https://media.giphy.com/media/Q2cIsU34CbzZHfNA2z/source.mp4)\n\n- menu with mask\n\n  [![menu mask](https://media.giphy.com/media/xaEN62vmEQxTR1zFpy/giphy.gif)](https://media.giphy.com/media/xaEN62vmEQxTR1zFpy/source.mp4)\n\n- menu mouse test\n\n  [![menu mouse](https://media.giphy.com/media/d9cQT0mOwgbRJ2fbyd/giphy.gif)](https://media.giphy.com/media/d9cQT0mOwgbRJ2fbyd/source.mp4)\n\n- nested transformations\n\n  [![nested transform touch](https://media.giphy.com/media/HLdqEQze3LUDlDCTBo/giphy.gif)](https://media.giphy.com/media/HLdqEQze3LUDlDCTBo/source.mp4)\n\n- particles with alpha\n\n  [![particles with alpha](https://media.giphy.com/media/Z9D7bpWqjX8KJMTMMc/giphy-downsized.gif)](https://media.giphy.com/media/Z9D7bpWqjX8KJMTMMc/source.mp4)\n\n- particles blending\n\n  [![particles blend](https://media.giphy.com/media/roD1B1diHxT9A61msb/giphy-downsized-large.gif)](https://media.giphy.com/media/roD1B1diHxT9A61msb/source.mp4)\n\n- circular progress panel\n\n  [![progress panel](https://media.giphy.com/media/uygZcQPIe7Dp4RHHrB/giphy.gif)](https://media.giphy.com/media/uygZcQPIe7Dp4RHHrB/source.mp4)\n\n- rive playback\n\n  [![rive playback](https://media.giphy.com/media/lVBkZ6o1qBqnek92Qj/giphy-downsized.gif)](https://media.giphy.com/media/lVBkZ6o1qBqnek92Qj/source.mp4)\n\n- 3d rotation\n\n  [![rotation 3d](https://media.giphy.com/media/7T3hqnHc7cRrqEjE4a/giphy.gif)](https://media.giphy.com/media/7T3hqnHc7cRrqEjE4a/source.mp4)\n\n- spiral\n\n  [![spiral](https://media.giphy.com/media/z9FFwt6sPQSqrVuMyF/giphy-downsized.gif)](https://media.giphy.com/media/z9FFwt6sPQSqrVuMyF/source.mp4)\n\n- spritesheet explosion\n\n  [![spritesheet explosion](https://media.giphy.com/media/Ldj7i8XiPZpYZ92WNN/giphy.gif)](https://media.giphy.com/media/Ldj7i8XiPZpYZ92WNN/source.mp4)\n\n- supernova tween\n\n  [![star effect](https://media.giphy.com/media/LFAhCww7vVItef78v9/giphy.gif)](https://media.giphy.com/media/LFAhCww7vVItef78v9/source.mp4)\n\n- text rainbow\n\n  [![text rainbow](https://media.giphy.com/media/wk8s7jJnwfdBQfbdvb/giphy.gif)](https://media.giphy.com/media/wk8s7jJnwfdBQfbdvb/source.mp4)\n\n- basic tween animation\n\n  [![tween animation](https://media.giphy.com/media/XNO5QpJCyctdLZYMCS/giphy.gif)](https://media.giphy.com/media/XNO5QpJCyctdLZYMCS/source.mp4)\n\n- tween behaviour\n\n  [![tween behaviour](https://media.giphy.com/media/DWbutR01h9LpschVDA/giphy.gif)](https://media.giphy.com/media/DWbutR01h9LpschVDA/source.mp4)\n\n- tween color\n\n  [![tween color](https://media.giphy.com/media/1tjXlWG1ImPhI3eij4/giphy.gif)](https://media.giphy.com/media/1tjXlWG1ImPhI3eij4/source.mp4)\n\n- multiple scenes\n\n  [![multiple scenes](https://media.giphy.com/media/mUoYPvPQIqZZ0rEVVe/giphy-downsized.gif)](https://media.giphy.com/media/mUoYPvPQIqZZ0rEVVe/source.mp4)\n\n- [line button ⇢](https://roi-graphx-linebutton.surge.sh/)\n\n  [![line button](https://media.giphy.com/media/Uq4pPWGa2Qo5WwlRqA/giphy.gif)](https://media.giphy.com/media/Uq4pPWGa2Qo5WwlRqA/source.mp4)\n\n- [color picker ⇢](https://roi-graphx-color-picker.surge.sh/)\n\n  [![color picker](https://media.giphy.com/media/r8BGvFFPdHU59dJbbB/giphy.gif)](https://media.giphy.com/media/r8BGvFFPdHU59dJbbB/source.mp4)\n\n- responsive switch\n\n  [![responsive switch](https://media.giphy.com/media/vO4DwTNeIXUS7beQFA/giphy.gif)](https://media.giphy.com/media/vO4DwTNeIXUS7beQFA/source.mp4)\n\n---\n\n#### Donation\n\nYou can [buymeacoffee](https://www.buymeacoffee.com/roipeker) or support **GraphX™**\nvia [Paypal](https://www.paypal.me/roipeker/)\n\n[![Donate via PayPal](https://cdn.rawgit.com/twolfson/paypal-github-button/1.0.0/dist/button.svg)](https://www.paypal.me/roipeker/)\n\n## [![Support via buymeacoffee](https://cdn.buymeacoffee.com/buttons/v2/default-white.png)](https://www.buymeacoffee.com/roipeker)\n\n","funding_links":["https://www.paypal.me/roipeker","https://www.buymeacoffee.com/roipeker","https://www.paypal.me/roipeker/"],"categories":["Uncategorized","引擎","Rendering [🔝](#readme)","Engines"],"sub_categories":["Uncategorized","渲染","Rendering"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froipeker%2Fgraphx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Froipeker%2Fgraphx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froipeker%2Fgraphx/lists"}