{"id":22328385,"url":"https://github.com/i2djs/i2djs","last_synced_at":"2025-04-07T10:26:11.109Z","repository":{"id":26616452,"uuid":"108893563","full_name":"I2Djs/I2Djs","owner":"I2Djs","description":"Integrated-2D is a Javascript 2D rendering framework for SVG, Canvas, and WebGL contexts. I2Djs provides the same API for all rendering contexts.","archived":false,"fork":false,"pushed_at":"2025-03-28T17:44:59.000Z","size":86044,"stargazers_count":82,"open_issues_count":2,"forks_count":4,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-31T08:12:12.344Z","etag":null,"topics":["animation","canvas","i2djs","integrated-2d","pixel","shaders","shape","svg","visualization","webgl"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/I2Djs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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}},"created_at":"2017-10-30T18:45:06.000Z","updated_at":"2025-03-28T17:45:03.000Z","dependencies_parsed_at":"2023-10-23T12:33:26.001Z","dependency_job_id":"fd2727b3-ebd5-4bf0-a000-0896d80935d0","html_url":"https://github.com/I2Djs/I2Djs","commit_stats":null,"previous_names":["i2djs/i2d"],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/I2Djs%2FI2Djs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/I2Djs%2FI2Djs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/I2Djs%2FI2Djs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/I2Djs%2FI2Djs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/I2Djs","download_url":"https://codeload.github.com/I2Djs/I2Djs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247633891,"owners_count":20970413,"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":["animation","canvas","i2djs","integrated-2d","pixel","shaders","shape","svg","visualization","webgl"],"created_at":"2024-12-04T03:12:26.921Z","updated_at":"2025-04-07T10:26:11.088Z","avatar_url":"https://github.com/I2Djs.png","language":"JavaScript","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/I2Djs/I2Djs/blob/master/i2djsLogo.png?raw=true\" width=500\u003e\n\u003c/p\u003e\n\n# Integrated-2D js [![npm](https://img.shields.io/npm/v/i2djs.svg)](https://www.npmjs.com/package/i2djs)\n\n### I2dJs - SVG | Canvas | WebGL | PDF\n\nIntegrated-2D is an open-source JavaScript framework for rendering 2D graphics in SVG, Canvas, WebGL, and PDF contexts. I2D's simple syntax and semantics let you combine the power of Vector graphics and Bitmap to achieve complex visualizations easily.\n\nI2Djs provides the same Application Programming Interface to create and animate elements across different graphic rendering contexts by leveraging their underlying capabilities. Developers can make use of I2D's multi-layered contextual approach with capabilities from more than one context seamlessly for creating powerful composite visualizations under a single roof.\n\nI2D also provides a unique data-driven approach, **join-actions**, for DOM manipulation based on data binding.\n\nUsed by : \u003ca href=\"https://www.pdf-frame.org\"\u003e www.pdf-frame.org \u003c/a\u003e\n\n## Documentation\n\n\u003ca href=\"https://nswamy14.gitbook.io/i2djs-v5/\"\u003e\u003cimg width='150' src=\"https://raw.githubusercontent.com/I2Djs/I2Djs/snaps/examples/snaps/gitbookIcon.png\"\u003e\u003c/a\u003e\n\n## Installing\n\nIf npm\n\n```\nnpm install i2djs --save\n```\n\nI2Djs provides source code bundles for ES6 and CJS modules.\n\n-   [i2D.cjs](https://raw.githubusercontent.com/I2djs/I2D/master/dist/i2d.cjs) CommonJS bundle\n-   [i2D.esm.js](https://raw.githubusercontent.com/I2djs/I2D/master/dist/i2d.esm.js) ES6 bundle\n-   [i2D.esm.min.js](https://raw.githubusercontent.com/I2djs/I2D/master/dist/i2d.esm.min.js) ES6 bundle\n\nIn ES6, use the following syntax to import modules.\n\nImport all modules into a namespace\n\n```\nimport * as i2d from 'i2djs'\n```\n\nImporting individual modules:\n\n```\nimport {canvasLayer} from 'i2djs'\nimport {svgLayer} from 'i2djs'\nimport {webglLayer} from 'i2djs'\nimport {pdfLayer} from 'i2djs'\n```\n\n## Resources\n\n-   [API reference](https://nswamy14.gitbook.io/i2djs-v5)\n-   [I2Djs Medium Article](https://medium.com/@narayanaswamy14/i2djs-integrated-2d-js-328549ef642)\n\n## Animation Example\n\n\u003ctable\u003e\n    \u003ctr\u003e\n      \u003ctd width=\"33%\"\u003e\u003ca href=\"https://codepen.io/nswamy14/pen/WNvdqJg\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/I2Djs/I2Djs/snaps/examples/snaps/gameloop.gif\"\u003e\n        \u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd width=\"33%\"\u003e\u003ca href=\"https://i2djs.github.io/I2Djs/examples/gameResources/I2Djs-matterjs-webgl.html\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/I2Djs/I2Djs/snaps/examples/snaps/anime-2.gif\"\u003e\n        \u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd width=\"33%\"\u003e\u003ca href=\"https://i2djs.github.io/I2Djs/examples/gameResources/I2Djs-matterjs2-canvas.html\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/I2Djs/I2Djs/snaps/examples/snaps/anim-1.gif\"\u003e\n        \u003c/a\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n## PDF Example\n\n\u003ca href=\"https://xxsmny.csb.app/\"\u003ePDF Example-1 \u003c/a\u003e\n\n## Examples (SVG + Canvas + WebGL + PDF)\n\n[Codepen Examples](https://codepen.io/search/pens?q=i2djs)\n\n\u003ctable\u003e\n    \u003ctr\u003e\n      \u003ctd width=\"15%\"\u003e\u003ca href=\"https://i2djs.github.io/I2Djs/examples/webGL/imagePointsDistortion.html\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/I2Djs/I2Djs/snaps/examples/snaps/imageDistortion.gif\"\u003e\u003c/a\u003e\u003c/td\u003e\n      \u003ctd width=\"15%\"\u003e\u003ca href=\"https://codepen.io/nswamy14/pen/YzXYaXq\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/I2Djs/I2Djs/snaps/examples/snaps/heatmapGif.gif\"\u003e\u003c/a\u003e\u003c/td\u003e\n      \u003ctd width=\"15%\"\u003e\u003ca href=\"https://i2djs.github.io/I2Djs/examples/canvas/mouseEvent2.html\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/I2Djs/I2Djs/snaps/examples/snaps/mouse2Animation.gif\"\u003e\u003c/a\u003e\u003c/td\u003e\n      \u003ctd width=\"15%\"\u003e\u003ca href=\"https://i2djs.github.io/I2Djs/examples/canvas/geoMap.html\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/I2Djs/I2Djs/snaps/examples/snaps/geoMap.png\"\u003e\u003c/a\u003e\u003c/td\u003e\n      \u003ctd width=\"15%\"\u003e\u003ca href=\"https://i2djs.github.io/I2Djs/examples/canvas/mouseEvent.html\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/I2Djs/I2Djs/snaps/examples/snaps/mouseAnimation.gif\"\u003e\u003c/a\u003e\u003c/td\u003e\n      \u003ctd width=\"15%\"\u003e\u003ca href=\"https://codepen.io/nswamy14/pen/WNvdqJg\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/I2Djs/I2Djs/snaps/examples/snaps/imageAnimation.gif\"\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"15%\"\u003e\u003ca href=\"https://i2djs.github.io/I2Djs/examples/canvas/pathAnimator.html\"\u003e\u003cimg  src=\"https://raw.githubusercontent.com/I2Djs/I2Djs/snaps/examples/snaps/PathAnimation.gif\"\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003ctd width=\"15%\"\u003e\u003ca href=\"https://codepen.io/nswamy14/pen/BVxjog\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/I2Djs/I2Djs/snaps/examples/snaps/attributeAnimation.gif\"\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003ctd width=\"15%\"\u003e\u003ca href=\"https://i2djs.github.io/I2Djs/examples/canvas/pathMorph.html\"\u003e\u003cimg  src=\"https://raw.githubusercontent.com/I2Djs/I2Djs/snaps/examples/snaps/anime-3.gif\"\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003ctd width=\"15%\"\u003e\u003ca href=\"https://i2djs.github.io/I2Djs/examples/canvas/distortion.html\"\u003e\u003cimg  src=\"https://raw.githubusercontent.com/I2Djs/I2Djs/snaps/examples/snaps/distortion.gif\"\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003ctd width=\"15%\"\u003e\u003ca href=\"https://i2djs.github.io/I2Djs/examples/canvas/radarAnimation.html\"\u003e\u003cimg  src=\"https://raw.githubusercontent.com/I2Djs/I2Djs/snaps/examples/snaps/radarScanner.gif\"\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003ctd width=\"15%\"\u003e\u003ca href=\"https://i2djs.github.io/I2Djs/examples/canvas/sparklesAnimation.html\"\u003e\u003cimg  src=\"https://raw.githubusercontent.com/I2Djs/I2Djs/snaps/examples/snaps/sparkles.gif\"\u003e\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n     \u003ctd width=\"15%\"\u003e\u003ca href=\"https://i2djs.github.io/I2Djs/examples/webGL/I2dAnimation.html\"\u003e\u003cimg  src=\"https://raw.githubusercontent.com/I2Djs/I2Djs/snaps/examples/snaps/I2DAnimation.gif\"\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003ctd width=\"15%\"\u003e\u003ca href=\"https://codepen.io/nswamy14/pen/PEyvyK\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/I2Djs/I2Djs/snaps/examples/snaps/circleMoveMent.gif\"\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003ctd width=\"15%\"\u003e\u003ca href=\"https://i2djs.github.io/I2Djs/examples/canvas/graph.html\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/I2Djs/I2Djs/snaps/examples/snaps/graph.gif\"\u003e\u003c/a\u003e\u003c/td\u003e\n        \u003ctd width=\"15%\"\u003e\u003ca href=\"https://i2djs.github.io/I2Djs/examples/webGL/hugegraph.html\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/I2Djs/I2Djs/snaps/examples/snaps/hugeGraph.gif\"\u003e\u003c/a\u003e\u003c/td\u003e\n        \u003ctd width=\"15%\"\u003e\u003ca href=\"https://i2djs.github.io/I2Djs/examples/canvas/networkSystem.html\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/I2Djs/I2Djs/snaps/examples/snaps/graphAnimation.gif\"\u003e\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n### Basic Shapes\n\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003ctd width=\"10%\"\u003e\u003ca href=\"https://i2djs.github.io/I2Djs/examples/canvas/shapes.html\"\u003e\u003cimg width=\"45\" src=\"https://raw.githubusercontent.com/I2Djs/I2Djs/snaps/examples/snaps/square.png\"\u003e\u003c/a\u003e\u003c/td\u003e\n        \u003ctd width=\"10%\"\u003e\u003ca href=\"https://i2djs.github.io/I2Djs/examples/canvas/shapes.html\"\u003e\u003cimg width=\"50\" src=\"https://raw.githubusercontent.com/I2Djs/I2Djs/snaps/examples/snaps/circle.png\"\u003e\u003c/a\u003e\u003c/td\u003e\n        \u003ctd width=\"10%\"\u003e\u003ca href=\"https://i2djs.github.io/I2Djs/examples/canvas/shapes.html\"\u003e\u003cimg width=\"50\" src=\"https://raw.githubusercontent.com/I2Djs/I2Djs/snaps/examples/snaps/line.png\"\u003e\u003c/a\u003e\u003c/td\u003e\n      \u003ctd width=\"10%\"\u003e\u003ca href=\"https://i2djs.github.io/I2Djs/examples/canvas/shapes.html\"\u003e\u003cimg width=\"50\" src=\"https://raw.githubusercontent.com/I2Djs/I2Djs/snaps/examples/snaps/polygon.png\"\u003e\u003c/a\u003e\u003c/td\u003e\n      \u003ctd width=\"10%\"\u003e\u003ca href=\"https://i2djs.github.io/I2Djs/examples/canvas/shapes.html\"\u003e\u003cimg width=\"50\" src=\"https://raw.githubusercontent.com/I2Djs/I2Djs/snaps/examples/snaps/ellipse.png\"\u003e\u003c/a\u003e\u003c/td\u003e\n      \u003ctd width=\"10%\"\u003e\u003ca href=\"https://i2djs.github.io/I2Djs/examples/canvas/shapes.html\"\u003e\u003cimg width=\"50\" src=\"https://raw.githubusercontent.com/I2Djs/I2Djs/snaps/examples/snaps/image.png\"\u003e\u003c/a\u003e\u003c/td\u003e\n      \u003ctd width=\"10%\"\u003e\u003ca href=\"https://i2djs.github.io/I2Djs/examples/canvas/text.html\"\u003e\u003cimg width=\"50\" src=\"https://raw.githubusercontent.com/I2Djs/I2Djs/snaps/examples/snaps/text.png\"\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n### Scale\n\n| SVG                                                                            | Canvas                                                                             | WebGl                                                                             |\n| ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |\n| [5000 Particles ](https://i2djs.github.io/I2Djs/examples/svg/distortion2.html) | [30000 Particles ](https://i2djs.github.io/I2Djs/examples/canvas/distortion2.html) | [100000 Particles ](https://i2djs.github.io/I2Djs/examples/webGL/distortion.html) |\n\n### Support \u0026 Compatibility\n\nI2D offers both ESM and CommonJS packages, allowing for seamless integration into the desired environment as required.\nIt is compatible with all modern browsers with latest versions.\n\n### Development Setup\n\n```bash\n# install deps\nnpm install\n\n# Watch on src file changes and update dist files\nnpm run dev\n\n# build dist files\nrollup -c rollup.config.js\n\n#Lint files\nnpm run lint\n---or---\nnpm run lint-fix\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fi2djs%2Fi2djs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fi2djs%2Fi2djs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fi2djs%2Fi2djs/lists"}