SpriteJS is a cross-platform lightweight 2D render object model. Manipulate the sprites in canvas as you do with the DOM elements.
http://spritejs.orgTags | spritejs canvas animation graphics rendering renderer rendering-2d-graphics canvas-game canvas-animation svg-path vue react svg sprite graphic path d3 node-canvas parser html5 object-model |
Implementation | Javascript |
License | MIT |
Platform | NodeJS |
Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.
canvas graphic graphics svg node-canvas parser html5 object-model visualization data-visualization charts charting-libraryStage.js is a 2D HTML5 JavaScript library for cross-platform game development, it is lightweight, fast and open-source. Canvas is the graphic component of HTML5 game development, but it only has a drawing API and there is no data model like DOM to compose your application. You need to manually draw your application and manage rendering cycles to play it. Moreover, mouse events are only available at entire Canvas level and they also need to be processed manually.
html5 html5-game-development game game-2d rendering engine 2d canvas mobileRough.js is a light weight (~9kB gzipped) graphics library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing SVG paths. Rough.js works with both Canvas and SVG.
draw canvas graphics svg html5-canvas svg-path sketchy hand-drawnHTML5 Canvas 2D Rendering Engine - 小程序、小游戏以及 Web 通用 Canvas 渲染引擎
canvas svg render web weapp wegame miniprogram minigame 2dKonva is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more. You can draw things onto the stage, add event listeners to them, move them, scale them, and rotate them independently from other shapes to support high performance animations, even if your application uses thousands of shapes. Served hot with a side of awesomeness.
konva shape node-canvas canvas animation drag-and-drop graphics animations graphic html5The aim of this project is to provide a fast lightweight 2D library that works across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast. PixiJS is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility.
canvas2d pixijs webgl glsl canvas rendering pixi game renderer rendering-engine rendering-2d-graphicsEaselJS is a library for building high-performance interactive 2D content in HTML5. It provides a feature-rich display list to allow you to manipulate and animate graphics. It also provides a robust interactive model for mouse and touch interactions.It is excellent for building games, generative art, ads, data visualization, and other highly graphical experiences. It works well alone, or with the rest of the CreateJS suite: SoundJS, PreloadJS, and TweenJS.
canvas webgl graphics animation html5May 8, 2018 – macSVG v1.1.4 is released, with minor user interface improvements, and various bug fixes. See the Release Notes for details. macSVG is a MIT-licensed open-source macOS app for designing HTML5 SVG 1.1 (Scalable Vector Graphics) art and animation.
svg animation scalable-vector-graphics graphics html5 macos-webkit-framework webkit xml smil ios morphing bezier editor path mac vector-graphics web-developerGSAP is a JavaScript library for creating high-performance animations that work in every major browser. No other library delivers such advanced sequencing, reliability, API efficiency, and tight control while solving real-world problems on over 4 million sites. GSAP works around countless browser inconsistencies; your animations 'just work'. CSS properties, SVG, canvas libraries, custom properties of generic objects, colors, strings...animate anything! At its core, GSAP is a high-speed property manipulator, updating values over time with extreme accuracy. It's up to 20x faster than jQuery! See the "Why GSAP?" article for what makes GSAP so special. Unlike monolithic frameworks that dictate how you structure your apps, GSAP is completely flexible; sprinkle it wherever you want. React, Vue, Angular or vanilla JS - doesn't matter. Simply put, GSAP is the most robust high-performance animation library on the planet, which is probably why every major ad network excludes it from file size calculations.
animation tweenlite tweenmax timelinelite timelinemax gsap greensock easing easepack pixiplugin customease jquery.gsap.js bezier svg 3d 2d transform morph morphing tweeningPhaser is a fast, free, and fun open source HTML5 game framework that offers WebGL and Canvas rendering across desktop and mobile web browsers. Games can be compiled to iOS, Android and native apps by using 3rd party tools. You can use JavaScript or TypeScript for development. Phaser is available in two versions: Phaser 3 and Phaser CE - The Community Edition. Phaser CE is a community-lead continuation of the Phaser 2 codebase and is hosted on a separate repo. Phaser 3 is the next generation of Phaser.
phaser phaserjs html5-game-development webgl game-frameworks game-development 2d html5 canvas game physics tweens typescript web-audioPhaser is a fast, free, and fun open source HTML5 game framework. It uses a custom build of Pixi.js for WebGL and Canvas rendering, and supports desktop and mobile web browsers. Games can be compiled to iOS, Android and native desktop apps via 3rd party tools. You can use JavaScript or TypeScript for development. Years after release, Phaser is still one of the most starred game frameworks on GitHub. Thousands of developers worldwide use Phaser. From indies and multi-national digital agencies, to schools and Universities. Each creating their own incredible games.
phaser canvas webgl html5-game-development 2d html5 game physics tweens typescript web-audioA path tessellation library written in rust for GPU-based 2D graphics rendering. For now the goal is to provide efficient SVG-compliant path tessellation tools to help with rendering vector graphics on the GPU. For now think of this library as a way to turn complex paths into triangles for use in your own rendering engine.
NanoVG is small antialiased vector graphics rendering library for OpenGL. It has lean API modeled after HTML5 canvas API. It is aimed to be a practical and fun toolset for building scalable user interfaces and visualizations. The NanoVG API is modeled loosely on HTML5 canvas API. If you know canvas, you're up to speed with NanoVG in no time.
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
F2 is born for mobile, developed for developers as well as designers. It is Html5 Canvas-based, and is also compatible with Node.js, Weex and React Native. Based on the grammar of graphics, F2 provides all the chart types you'll need. Our mobile design guidelines enable better user experience in mobile visualzation projects. Special thanks to Leland Wilkinson, the author of The Grammar Of Graphics, whose book served as the foundation for F2 and G2.
mobile charts visualization grammar antv f2 html5-canvas data-visualization data-visualisation canvas 2d-draw mobile-visualization interactiveReact ART is a JavaScript library for drawing vector graphics using React. It provides declarative and reactive bindings to the ART library. Using the same declarative API you can render the output to either Canvas, SVG or VML (IE8).
react art svg vml canvas jsxReact Renderer to build UI interfaces using canvas/WebGL. React Ape is a react renderer to build UI interfaces using canvas/WebGL. React Ape was built to be an optional React-TV renderer. It's mainly a renderer focused on creating things for TV, PS4, Nintendo Switch, PS Vita, PS3 and low memory devices. If you're curious about the name: It's a "joke" with Netflix's React Gibbon renderer. I choose to use Ape then.
react react-renderer renderer render gl webgl webgl2 canvas canvas-html5Initially, it's a tool for teaching geometry, web, and javascript in schools. Currently, it's a powerful library to create using HTML5 Canvas. Want to contribute? Follow these recommendations.
canary canvas html5-canvas origami canvas-game css animation animation-engine
We have large collection of open source products. Follow the tags from
Tag Cloud >>
Open source products are scattered around the web. Please provide information
about the open source projects you own / you use.
Add Projects.