186 Repositories
JavaScript svg-animations Libraries
A Portfolio with Animations in JavaScript
A Portfolio with Animations in JavaScript In this video I show you how to build a Portfolio with Animations and deploy it! To get 10% off on Hostinger
A daily print-and-play roguelike adventure you can play offline.
Chronicles of Stampadia A print-and-play roguelike with a new adventure every day! Play today's adventure | Read the manual | Learn how to play | Disc
Reduce the size of SVGs
Oh My SVG Reduce the size of SVGs About Oh My SVG let you export unoptimized SVG files into smaller versions. Under the hood, it uses SVGO to remove o
Demo of the tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion effect on hover.
Crosshair Mouse Cursor Distortion Demo of the tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion effect on hov
๐ Interactive JavaScript Charts built on SVG
A modern JavaScript charting library to build interactive charts and visualizations with simple API. Our Partner ApexCharts is now a partner of Fusion
Apache ECharts is a powerful, interactive charting and data visualization library for browser
Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly
A lightweight 3D game engine for the web.
A lightweight 3D game engine for the web. Built with three.js and cannon-es.
700+ Pure CSS, SVG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API
700+ Pure CSS, SVG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API
Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. This is a porting to Web Animation API of the fabulous animate.css project.
Animatelo Just-add-water Web Animations Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emp
Create cool animated SVG spinners, loaders and other looped animations in seconds
SVG Circus SVG Circus enables you to create cool animated SVG spinners, loaders and other looped animations in seconds. Developing To run a local SVG
The Illusion of Life: An SVG Animation Case Study
svgAnimation.js is a Snap.svg plugin used to create complex animations from simple SVGs svgAnimation takes the complexity out of creating Snap.svg ani
Lightweight, simple to use jQuery plugin to animate SVG paths
jQuery DrawSVG This plugin uses the jQuery built-in animation engine to transition the stroke on every path inside the selected svg element, using
Lazy Line Painter - A Modern JS library for SVG path animation
Lazy Line Painter lazylinepainter.info A Modern JS library for SVG path animation Getting Started | Documentation | Examples | Lazy Line Composer Gett
An experimental SVG letter animation inspired by the Dribbble shot ["Shading Letters in Illustrator"](https://dribbble.com/shots/2943049-Shading-Letters-in-Illustrator) by Jake Bartlett's. Powered by Julian Garnier's [anime.js](http://anime-js.com/).
Fancy SVG Letter Animation An experimental SVG letter animation inspired by the Dribbble shot "Shading Letters in Illustrator" by Jake Bartlett's. Pow
Some shape morphing hover effects on images using SVG clipPath.
Organic Shape Animations with SVG clipPath Some shape morphing hover effects using SVG clipPath on an image. Article on Codrops Demo Credits Anime.js
circle-svg-animation
Circle SVG Animation Plug css, js and just add short code in your html. Change the custom attribute data-percent and data-time for setting your percen
Some ideas for decorative link distortion effects using SVG filters.
Distorted Link Effects A couple of ideas for decorative link distortion effects using SVG filters on lines, circles and squares. Article on Codrops De
Javascript and SVG odometer effect library with motion blur
SVG library for transitioning numbers with motion blur JavaScript odometer or slot machine effect library for smoothly transitioning numbers with moti
Pure css cross-browser loading animations.
[ArtWorx] xLoader Pure css cross-browser loading animations. xLoader is part of the ArtWorx collection. Most of the loaders made by community, You can
๐ฎ CSS loading animations made by single element.
Three Dots The project is a set of CSS loading animations created with three dots which made by just single element. I think the project can not only
CSS loading animations with minimal effort!
Whirl CSS loading animations with minimal effort! whirl is a curation of CSS loading animations(whirls! ๐ ). It started as a drop in CSS file to get
Modern ways of revealing new content using SVG animations.
Page Loading Effects Modern ways of revealing new content using SVG animations. Article on Codrops Demo Integrate or build upon it for free in your pe
A bursting particles effects buttons component โจ๐ฅโ๏ธ๐
vue-particle-effect-buttons (demo) Bursting particle effect buttons for Vue. This library is a Vue portal of an awesome Codrops Article by Luis Manuel
The slides in this slideshow wobble as they move. The effect is based on Sergey Valiukh's Dribbble shot and was made using Snap.svg and morphing SVG paths.
Wobbly Slideshow Effect The slides in this slideshow wobble as they move. The effect is based on Sergey Valiukh's Dribbble shot and was made using Sna
Some ideas for modern multi-layer page transitions using CSS Animations.
Multi-Layer Page Reveal Effects Some ideas for modern multi-layer page transitions using CSS Animations. Article on Codrops Demo Sponsor Demo sponsore
A React component for creating typing animations.
react-typewriter A react component for animated typing text. Installation npm install --save react-typewriter Usage Pass in children to the TypeWrite
A decorative website background effect where SVG shapes morph and transform on scroll.
Morphing Background Shapes A decorative website background effect where SVG shapes morph and transform on scroll. Article on Codrops Demo This demo is
Tools for editing Shapefile, GeoJSON, TopoJSON and CSV files
Mapshaper Introduction Mapshaper is software for editing Shapefile, GeoJSON, TopoJSON, CSV and several other data formats, written in JavaScript. Maps
Converts geojson to svg string given svg viewport size and maps extent.
geojson2svg Converts geojson to svg string given svg viewport size and maps extent. Check world map, SVG scaled map and color coded map examples to de
Progressive svg pie, donut, bar and line charts
Peity Peity (sounds like deity) is a jQuery plugin that converts an element's content into a mini svg pie, donut, line or bar chart. Basic Usage HTM
jQuery plugin based on raphael.js that allows you to display dynamic vector maps
jQuery Mapael - Dynamic vector maps The complete documentation is available on Mapael website (repository: 'neveldo/mapael-documentation'). Additional
A lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology.
GraphicsJS GraphicsJS is a lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology. Overview Quick Start Articles
The lightweight library for manipulating and animating SVG
SVG.js A lightweight library for manipulating and animating SVG, without any dependencies. SVG.js is licensed under the terms of the MIT License. Inst
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
Fabric.js Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. I
DOMPurify - a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG. DOMPurify works with a secure default, but offers a lot of configurability and hooks. Demo:
DOMPurify DOMPurify is a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG. It's also very simple to use and get started with
Modern ways of revealing new content using SVG animations.
Page Loading Effects Modern ways of revealing new content using SVG animations. Article on Codrops Demo Integrate or build upon it for free in your pe
:snowboarder: A responsive slider jQuery plugin with CSS animations
A responsive slider jQuery plugin with CSS animations Animations from animate.css Online demo Visit plugin website. Appszoom for developers also uses
:zap: A sliding swipe menu that works with touchSwipe library.
Slide and swipe menu A sliding menu that works with touchSwipe library. Online demo Visit plugin site. Appszoom also uses it! So cool! What's the diff
UNMAINTAINED Open source JavaScript renderer for Kartograph SVG maps
This project is not maintained anymore. Here are a few reasons why I stopped working on kartograph.js: there's no need to support non-SVG browsers any
๐ฟ A cross-browser library of CSS animations. As easy to use as an easy thing.
Animate.css If you need the old docs - v3.x.x and under - you can find it here. Just-add-water CSS animation Installation Install with npm: npm instal
Lightweight, simple to use jQuery plugin to animate SVG paths
jQuery DrawSVG This plugin uses the jQuery built-in animation engine to transition the stroke on every path inside the selected svg element, using
A customizable, modular, responsive, lightbox gallery plugin.
lightGallery A customizable, modular, responsive, lightbox gallery plugin for jQuery. Demo JQuery lightGallery demo. Codepen demo Main features Fully
Simple and tiny JavaScript library that adds parallax animations on any images
simpleParallax.js simpleParallax.js is a very simple and tiny Vanilla JS library that adds parallax animations on any images. Where it may be laboriou
The first truly composable CSS animation library. Built for Vue, React, SCSS, and CSS, AnimXYZ will bring your website to life.
AnimXYZ animxyz.com AnimXYZ helps you create, customize, and compose animations for your website. Powered by CSS variables to allow a nearly limitless
tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno.
tsParticles - TypeScript Particles A lightweight TypeScript library for creating particles. Dependency free (*) and browser ready! Particles.js conver
tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno.
tsParticles - TypeScript Particles A lightweight TypeScript library for creating particles. Dependency free (*) and browser ready! Particles.js conver
A library for visualization and creative-coding
Pts Pts is a typescript/javascript library for visualization and creative-coding. Get started at ptsjs.org. Please give it a try, file issues, and sen
Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
Zdog Round, flat, designer-friendly pseudo-3D engine View complete documentation and live demos at zzz.dog. Install Download zdog.dist.min.js minified
Create graphics with a hand-drawn, sketchy, appearance
Rough.js Rough.js is a small (9 kB) graphics library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw
svg react icons of popular icon packs
React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons
:black_medium_small_square:React Move | Beautiful, data-driven animations for React
React-Move Beautiful, data-driven animations for React. Just 3.5kb (gzipped)! Documentation and Examples Features Animate HTML, SVG & React-Native Fin
Transform SVGs into React components ๐ฆ
Transform SVGs into React components ๐ฆ Try it out online! Watch the talk at React Europe SVGR transforms SVG into ready to use components. It is part
nivo provides a rich set of dataviz components, built on top of the awesome d3 and Reactjs libraries
nivo provides supercharged React components to easily build dataviz apps, it's built on top of d3. Several libraries already exist for React d3 integr
โช SVG-Powered component to easily create skeleton loadings.
SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading). Features โ๏ธ Customizable: Feel free to change the colors,
๐ฏ visx | visualization components
visx visx is a collection of reusable low-level visualization components. visx combines the power of d3 to generate your visualization with the benefi
Composable data visualisation library for web with a data-first approach now powered by WebAssembly
What is Muze? Muze is a free data visualization library for creating exploratory data visualizations (like Tableau) in browser, using WebAssembly. It
:bar_chart: Declarative Charting Framework for Angular
ngx-charts Declarative Charting Framework for Angular! ngx-charts is unique because we don't merely wrap d3, nor any other chart engine for that matte
:bar_chart: Re-usable, easy interface JavaScript chart library based on D3.js
billboard.js is a re-usable, easy interface JavaScript chart library, based on D3 v4+. The name "billboard" comes from the famous billboard chart whic
a super simple, no-nonsense diagramming library written in react that just works
Introduction DEMO: http://projectstorm.cloud/react-diagrams DOCS (wip) https://projectstorm.gitbook.io/react-diagrams Docs are currently being worked
Minimalistic, animated SVG gauge. Zero dependencies
SVG Gauge Minmalistic, configurable, animated SVG gauge. Zero dependencies Buy me a coffee โ If you like my work please consider making a small donati
A lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology.
GraphicsJS GraphicsJS is a lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology. Overview Quick Start Articles
Beautiful React SVG maps with d3-geo and topojson using a declarative api.
react-simple-maps Create beautiful SVG maps in react with d3-geo and topojson using a declarative api. Read the docs, or check out the examples. Why R
Progressive svg pie, donut, bar and line charts
Peity Peity (sounds like deity) is a jQuery plugin that converts an element's content into a mini svg pie, donut, line or bar chart. Basic Usage HTM
A renderer agnostic two-dimensional drawing api for the web.
Two.js A two-dimensional drawing api meant for modern browsers. It is renderer agnostic enabling the same api to render in multiple contexts: webgl, c
JavaScript toolkit for creating interactive real-time graphs
Rickshaw Rickshaw is a JavaScript toolkit for creating interactive time series graphs, developed at Shutterstock Table of Contents Getting Started Ins
The lightweight library for manipulating and animating SVG
SVG.js A lightweight library for manipulating and animating SVG, without any dependencies. SVG.js is licensed under the terms of the MIT License. Inst
A visualization grammar.
Vega: A Visualization Grammar Vega is a visualization grammar, a declarative format for creating, saving, and sharing interactive visualization design
:bar_chart: A D3-based reusable chart library
c3 c3 is a D3-based reusable chart library that enables deeper integration of charts into web applications. Follow the link for more information: http
๐ A highly interactive data-driven visualization grammar for statistical charts.
English | ็ฎไฝไธญๆ G2 A highly interactive data-driven visualization grammar for statistical charts. Website โข Tutorial Docs โข Blog โข G2Plot G2 is a visua
Simple, responsive, modern SVG Charts with zero dependencies
Frappe Charts GitHub-inspired modern, intuitive and responsive charts with zero dependencies Explore Demos ยป Edit at CodePen ยป Contents Installation U
The JavaScript library for modern SVG graphics.
Snap.svg ยท A JavaScript SVG library for the modern web. Learn more at snapsvg.io. Follow us on Twitter. Install Bower - bower install snap.svg npm - n
Simple responsive charts
Big welcome by the Chartist Guy Checkout the documentation site at http://gionkunz.github.io/chartist-js/ Checkout this lightning talk that gives you
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
Fabric.js Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. I
Apache ECharts is a powerful, interactive charting and data visualization library for browser
Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly
JavaScript 3D library.
three.js JavaScript 3D library The aim of the project is to create an easy to use, lightweight, cross-browser, general purpose 3D library. The current
Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:
D3: Data-Driven Documents D3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, C
Responsive, interactive and more accessible HTML5 canvas elements. Scrawl-canvas is a JavaScript library designed to make using the HTML5 canvas element a bit easier, and a bit more fun!
Scrawl-canvas Library Version: 8.5.2 - 11 Mar 2021 Scrawl-canvas website: scrawl-v8.rikweb.org.uk. Do you want to contribute? I've been developing thi
Animation library that mimics CSS keyframes when scrolling.
Why Motus ? Motus allows developers to create beatuful animations that simulate css keyframes and are applied when the user scrolls. Features Node & B
Javascript and SVG odometer effect library with motion blur
SVG library for transitioning numbers with motion blur JavaScript odometer or slot machine effect library for smoothly transitioning numbers with moti
tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno.
tsParticles - TypeScript Particles A lightweight TypeScript library for creating particles. Dependency free (*) and browser ready! Particles.js conver
A jquery plugin for CSS3 text animations.
Textillate.js v0.4.1 See a live demo here. Textillate.js combines some awesome libraries to provide an easy-to-use plugin for applying CSS3 animations
Create beautiful CSS3 powered animations in no time.
Bounce.js Bounce.js is a tool and JS library for generating beautiful CSS3 powered keyframe animations. The tool on bouncejs.com allows you to generat
Javascript library to create physics-based animations
Dynamics.js Dynamics.js is a JavaScript library to create physics-based animations To see some demos, check out dynamicsjs.com. Usage Download: GitHub
The motion graphics toolbelt for the web
mo ยท js โ The motion graphics toolbelt for the web. Intro mo ยท js is a javascript motion graphics library that is a fast, retina ready, modular and op
JavaScript animation engine
anime.js JavaScript animation engine | animejs.com Anime.js (/หรฆn.ษ.meษช/) is a lightweight JavaScript animation library with a simple, yet powerful AP
๐ฟ A cross-browser library of CSS animations. As easy to use as an easy thing.
Animate.css If you need the old docs - v3.x.x and under - you can find it here. Just-add-water CSS animation Installation Install with npm: npm instal