186 Repositories
JavaScript svg-animations Libraries
Some ideas for grid to slideshow switch animations using GSAP's Flip plugin.
Grid to Slideshow Switch Animations Some ideas for grid to slideshow switch animations using GSAP's Flip plugin. Article on Codrops Demo Installation
This is a Tic Tac Toe game built with HTML, CSS, and JavaScript. It is a simple and fun game where two players take turns marking X and O on a 3x3 grid.
Tic Tac Toe Game This is a Tic Tac Toe game built with HTML, CSS, and JavaScript. It is a simple and fun game where two players take turns marking X a
Chakra UI Animations is a dependancy which offers you pre-built animations for your Chakra UI components.
Chakra UI Animations Chakra UI Animations is a dependancy which offers you pre-built animations for your Chakra UI components. Installation yarn add @
Easy-to-use js library for building graphs using svg.
LineChart Easy-to-use js library for building graphs using svg. Examples How to use Just add linechart.js from 'src' directory to your project. And ad
A tool to unpack, repack, edit and play 2d animations from Supercell games
SC Tools This module is intended to unpack, edit and repack .sc files from Supercell games. SC files are unpacked to disk as projects. Projects contai
The Awesome estate web application displays a list of apartments that were provided by local data. The users can check out the featured and recent apartments. Also, the user can click the house to get the details of the selected house.
Awesome Estate The Awesome estate web application displays a list of apartments that were provided by local data. The users can check out the featured
Small example showing how you can make game sprite animations using CSS with Javascript movement.
Hi there, I'm Björn Hjorth 👋 I like combining the web and game development, if you like what you see please do not be a stranger and say "Hi" on Twit
A small library for creating typing animations.
A small library for creating typing animations. View a short video demonstration here. Installation npm i tiper-js Usage Initialization is really simp
Lightweight JavaScript library that allows you add motion blur to your CSS animations
MotionBlurJS For more information and examples please visit: https://www.motionblurjs.com What is MotionBlurJS MotionBlurJS is a lightweight JavaScrip
A library for panning and zooming elements using CSS transforms :mag:
Panzoom Examples Panzoom is a small library (~3.7kb gzipped) to add panning and zooming functionality to an element. Rather than using absolute positi
Customisable javascript skeleton loader.
JS Skeleton loader Simple but very powerful loader package built with full javascript. Installation To install this package, include index.js file int
Login of app to remind to drink water, using Firebase tools like Firebase Auth and Firebase Firestore
Water Reminder Login App Menu Contents Motivation Final Images How to download the project and run it? Technologies utilized Dev 📌 Motivation This ap
👌A useful zero-dependencies, less than 434 Bytes (gzipped), pure JavaScript & CSS solution for drop an annoying pop-ups confirming the submission of form in your web apps.
Throw out pop-ups confirming the submission of form! A useful zero-dependencies, less than 434 Bytes (gzipped), pure JavaScript & CSS solution for dro
Lightweight and easy to use vanilla js library to add css animations to elements on scroll.
Scrollrisen Trigger css animations on scroll as elements enter the viewport. Zero dependencies, lightweight and easy to use and customize Installation
Efeito de ripples baseado no Material Design.
Efeito de ripples baseado no Material Design feito com CSS, JavaScript e jQuery Esse efeito utiliza seletores do jQuery e manipulação do DOM para obte
Audio visualizer library for javascript. Create dynamic animations that react to an audio file or audio stream.
Wave.js Audio visualizer library for javascript. Installation Install With CDN script src="https://cdn.jsdelivr.net/gh/foobar404/wave.js/dist/bundle.
svgMap is a JavaScript library that lets you easily create an interactable world map comparing customizable data for each country.
svgMap svgMap is a JavaScript library that lets you easily create an interactable world map comparing customizable data for each country. Live demo: h
A Javascript library to export svg charts from the DOM and download them as an SVG file, PDF, or raster image (JPEG, PNG) format. Can be done all in client-side.
svg-exportJS An easy-to-use client-side Javascript library to export SVG graphics from web pages and download them as an SVG file, PDF, or raster imag
Full featured JavaScript image & video gallery. No dependencies
lightgallery.js Full featured JavaScript lightbox gallery. No dependencies. Important notice lightgallery.js has been merged with lightGallery. That m
A script that combines a folder of SVG files into a single sprites file and generates type definitions for safe usage.
remix-sprites-example A script that combines a folder of .svg files into a single sprites.svg file and type definitions for safe usage. Technical Over
Um jogo da memória tematizado com One Piece.
Getting Started - Jogo da Memória Eis um joguinho da memória . Também foi o primeiro projeto meio complicadinho que consegui resolver por conta própri
An easy-to-use JavaScript library aimed at making it easier to draw on SVG elements.
svg-pen-sketch An easy-to-use JavaScript library aimed at making it easier to draw on SVG elements when using a digital pen (such as the Surface Pen).
A tiny JavaScript library to enable CSS animations when user scrolls.
A tiny JavaScript library to enable CSS animations when user scrolls. This library allows you to toggle one or more classes on an element when it appe
A small jQuery plugin for rendering scroll-based HTML animations
Storyline Build beautiful landing pages that change as the user scrolls up or down. Project created in 2013 and ported to GitHub in 2021. Demo Just vi
A jQuery plugin that works in harmony with animate.css in order to enable animations only when content comes into view.
jQuery AniView A jQuery plugin that works in harmony with animate.css in order to enable animations only when content comes into view. Now supports v4
CSS-based animations triggered by JS, defined in your stylesheet
Anim-x CSS-based animations triggered by JS, defined in your stylesheet. $ npm i https://github.com/LTBL-Studio/anim-x.git Quick start An animation is
A vanilla-js module for adding zoom-on-wheel and pan-on-drag behavior to inline SVG elements.
svg-pan-zoom-container A vanilla-js module for adding zoom-on-wheel and pan-on-drag behavior to inline SVG elements. No need to write scripts. Just ma
A JavaScript animation plugin for menus. It creates a div that moves when you mouse over an element, giving it an elastic animation.
Lava-Lamp Description: A JavaScript animation plugin for menus. It creates a div that moves when you mouse over an element, giving it an elastic anima
A timed continuous carousel that uses vanilla JavaScript & CSS animations.
Continuous Carousel ∞ Timed continuous carousel that uses vanilla JavaScript & CSS animations. It supports both horizontal and vertical scrolling. Mar
A lightweight JavaScript library for creating interactive maps and pretty data visualization.
Jsvectormap A lightweight Javascript library for creating interactive maps and pretty data visualization. Explore docs . Report bug · View demo · Down
Simple scroll based text reveal animation library.
Simple scroll based text reveal animation library. ⛰️ DEMO Getting Started Using packge manager NPM Install textify using npm: npm install textify.js
Colr Pickr, a vanilla JavaScript color picker component built with SVGs, with features like saving colors. Similar design to the chrome-dev-tools color picker.
Colr Pickr Colr Pickr, a vanilla JavaScript color picking component built with SVGs, with features like saving colors. Similar design to the chrome-de
Demonstration of liquid effect on HTML Canvas using Matter.js and SVG Filters (Blur + Contrast)
Canvas Liquid Effect Demonstration of liquid (or gooey) effect on HTML Canvas using Matter.js and SVG Filters (feGaussianBlur and feColorMatrix). DEMO
This JavaScript class generates a placeholder image or default profile image as SVG or PNG
This JavaScript class generates a placeholder image or default profile image as SVG or PNG. You can use the following parameters in the constructor:
D3 (or D3.js) is a JavaScript library for visualizing data using web standards
D3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data.
A lightweight graphic library providing 2d draw for Apache ECharts
ZRender A lightweight graphic library which provides 2d draw for Apache ECharts. Documentation https://ecomfe.github.io/zrender-doc/public/ License BS
JavaScript SVG parser and renderer on Canvas
canvg JavaScript SVG parser and renderer on Canvas. It takes the URL to the SVG file or the text of the SVG file, parses it in JavaScript and renders
Holder renders image placeholders in browser using SVG
Holder Holder renders image placeholders in browser using SVG. Used by thousands of open source projects (including Bootstrap v3) and many other sites
Generates an image from a DOM node using HTML5 canvas
DOM to Image What is it dom-to-image is a library which can turn arbitrary DOM node into a vector (SVG) or raster (PNG or JPEG) image, written in Java
:loop: Create loopy loading animations
Sonic.js See some examples! Create your own with Sonic Creator! Sonic is a tool that you can use to create spinny-loady-thingies on the fly. It's best
Delightful, performance-focused pure css loading animations.
Loaders.css Delightful and performance-focused pure css loading animations. What is this? See the demo A collection of loading animations written enti
🍎Transform an SVG icon into multiple themes, and generate React icons，Vue icons，svg icons
IconPark English | 简体中文 Introduction IconPark gives access to more than 2000 high-quality icons, and introduces an interface for customizing your icon
The iconic SVG, font, and CSS toolkit
Version 6 Font Awesome is the Internet's icon library and toolkit, used by millions of designers, developers, and content creators. Documentation Lear
SVG icons for popular brands
Simple Icons Over 2200 Free SVG icons for popular brands. See them all on one page at SimpleIcons.org. Contributions, corrections & requests can be ma
A curated collection of all country flags in SVG — plus the CSS for easier integration
flag-icons A curated collection of all country flags in SVG — plus the CSS for easier integration. See the demo. Install You can either download the w
CSS classes to move your DOM!
CSShake Some CSS classes to move your DOM! Live Demo Download Center You could download the complete csshake.css file or separated files for each shak
CSS3 Animations with special effects
🎩 magic CSS3 Animations with special effects. (→ 3.1 kB gzip) Demo Checkout the demo for the animations here Table of Contents Installation Getting S
Transform your icons with trendy animations.
iconate.js A call to transform your existing icons in a cool trendy way iconate.js is a tiny performant library for cross-browser icon transformation
A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on
A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.
Custom navigations for Solid written in Typescript. Implement custom page transition logic and ✨ animations ✨
solid-custom-navigation Get, Set, Go! Custom navigations for Solid, written in Typescript. Implement custom page transition logic and ✨ animations ✨ .
A html・css・svg version of the Roland TR-909 (no sound)
VECTOR-909 Roland TR-909 drum-machine with only hand-made html, svg & css. 100% vector graphics. No textures. No sound engine ... just yet! Credits Lo
Smoothly interpolate between variations of SVG paths.
svg-path-morph A simple library for morphing between variations of SVG paths. Use svg-path-morph to smoothly morph between X variations of the same SV
📸 Generate image using HTML5 canvas and SVG
egami → image README | 中文文档 Generate image using HTML5 canvas and SVG Fork from html-to-image Installation pnpm pnpm add egami npm npm i egami Usage i
A html・css・svg version of the Roland TR-909 (no sound)
VECTOR-909 Roland TR-909 drum-machine with only hand-made html, svg & css. 100% vector graphics. No textures. No sound engine ... just yet! Credits Lo
Custom alert box using javaScript and css. This plugin will provide the functionality to customize the default JavaScript alert box.
customAlertBoxPlugin Custom Alert Box Plugin Using JavaScript and CSS Author: Suraj Aswal Must Include CSS Code/Default Custom Alert Box Class: /* mus
Convert your SVG file directly to Flutter paths and prevent all the messing with bezier curves.
svg-to-flutter-path-converter Convert your SVG file directly to Flutter paths and prevent all the messing with bezier curves. Flutter Clutter The tool
A (very) minimalist creative coding playground. Make animations using only 64 HTML sliders!
Sliderland A (very) minimalist creative coding playground. Make animations using only 64 HTML sliders! Credits The recording feature uses ffmpeg.wasm
A zero-dependencies script to generate sponsors SVG from Patreon
sponsors A zero-dependencies script to generate sponsors SVG from Patreon. Usage Go to https://www.patreon.com/portal/registration/register-clients to
Pebble - A free funky formalicious icon set for React (& plain ol' SVG & PNG)
A free funky formalicious icon set for React (& plain ol' SVG & PNG) Pebble is an icon set that aims for a friendly character. There's no real
Nebula is a lightweight (1kb compressed) JavaScript library that creates beautiful universe animations.
Nebula is a lightweight JavaScript library for creating beautiful universe animations. Including configurable Stars, Nebulas, Comets, Planets and Suns. Compatible with SSR
Generate colorful and temporarily identifiable SVGs with unique urls.
reptiles.dev Generate colorful and temporarily identifiable SVGs with unique urls.
📦 SVGs, fast and developer friendly in Angular
View settings all icons fixed size e.g. 30px button to align all icons distributes button to align all icons onscreen button to align all icons offscr
📦 SVGs, fast and developer friendly in Angular
View settings all icons fixed size e.g. 30px button to align all icons distributes button to align all icons onscreen button to align all icons offscr
🎬 super easy recording for p5.js animations
About • Why p5.capture? • Getting started • API Options • Browser compatibility • Limitations About Assuming you would like to record p5.js animations
Quick and easy spring animation. Works with other animation libraries (gsap, animejs, framer motion, motion one, @okikio/animate, etc...) or the Web Animation API (WAAPI).
spring-easing NPM | Github | Docs | Licence Quick and easy spring animations. Works with other animation libraries (gsap, animejs, @okikio/animate, mo
🛰 Shared component across routes with animations
Shared Vue component across routes with animations Live Demo Why? It's quite common you might have a same component used in different routes (pages) w
Animation Academy teaches you CSS animations using the transition and animation properties.
Animation Academy Open Animation Academy Contents Background Built With Functionality Feature Highlights Wireframes Features In Development Backgrou
Animated FlatList component that supports entering, exiting and reordering animations.
react-native-flatlist-animated Animated FlatList component that supports entering, exiting and reordering animations. Installation npm i react-native-
🎉 Sensoro Design SVG Icons
Sensoro Design Icons 语义化矢量图形库，提供了描述图标的抽象节点来满足对各种框架的适配。 ✨ 特性 📦 内置了丰富的图标资源 🎉 支持对 React、Vue、React Native、Angular 各种框架的适配 💻 使用 TypeScript 开发，提供完整的类型定义文
Landscape Generator is An open Source web application that generates landscape drawings randomly, then gives you the ability to edit it and export it as SVG or PNG.
Landscape Generator ## About Landscape Generator is An open Source web application that generates landscape drawings randomly, then gives you the abil
A recreation of a startpage posted on Reddit without the source, so I rewrote it in Next.js + Tailwind for the open source community.
Startpage "Figma Balls" Rewrite Why Did I Make This I saw a startpage posted on the subreddit r/startpages that I thought looked nice, but when I look
Super Cat Meow Squad! 🐱
This page dynamically displays the 6 members of the SCMS and contains some interactions with other users interested in them, like commenting on them or a like counter for each kitten.
A Cloudflare Worker that translates TeX to SVG
TeX SVG Worker A Cloudflare Worker that translates TeX to SVG.
ChelseaJS - a Javascript library for creative, generative Coding
ChelseaJS is a Javascript library for creative, generative Coding. It's simple and intuitive syntax makes it easy for everyone (including non-coders)
An animation library, built on the Web Animations API for the smallest filesize and the fastest performance
motion-signals A wrapper over Motion One, An animation library, built on the Web Animations API for the smallest filesize and the fastest performance.
Lightweight Loading Animation
◼️ Features: 🛠 Easy to Use 🌠 Fast & Lightweight (0.5Kb) 💪 No dependencies, built with VanillaJS 🌎 Tested in all modern browsers ◼️ Demo: https://b
Veroo is a cappuccino delivery app. This application is for the purpose of studying modern interface and animations.
Veroo Veroo is a cappuccino delivery app. This application is for the purpose of studying modern interface and animations. Pleasant, fluid and lively
Github action generates dynamic image URL for contributor list to display it!
github-action-contributors Github action generates dynamic image URL for contributor list to display it! Contributors Usage - run: mkdir -p build - na
Simple library to custom waveforms🎶
waveform-path LIVE DEMO WITH EXAMPLES Simple library to custom waveforms. Install NPM npm install waveform-path -s Download Download the last realease
A huge collection of SVG cryptocurrency logos
SVG Cryptocurrency Logos A collection of SVG (vector) logos of crytocurrency projects. Free logo API We also offer these logos via a free API. Our fre
Personal Blog - a project developed with Angular for the front-end interface and Wordpress for the back-end API served with Docker containers
PersonalBlog This project was generated with Angular CLI version 13.0.1. Front-end Interface Development server Run ng serve or ng serve --configurati
Lightweight, Material Design inspired go to top button. No dependencies. Pure Angular!
Angular ScrollTop Button Lightweight, Material Design inspired button for scroll-to-top of the page. No dependencies. Pure Angular! ✓ Angular 13, Ivy
Fallback for SVG images by automatically creating PNG versions on-the-fly
SVGMagic - Cross browser SVG This repository is no longer actively mainted. It has proven to be very usefull back in 2013, but these days SVGs are sup
JavaScript library to make drawing animation on SVG
vivus.js Demo available on http://maxwellito.github.io/vivus Play with it on Vivus Instant Vivus is a lightweight JavaScript class (with no dependenci
An easy way to animate SVG elements.
Walkway I loved the animations for the polygon ps4 review a few months back and decided to create a small library to re-create them (simple demo). It
A powerful little tool for managing CSS animations
NO LONGER BEING SUPPORTED Please consider https://github.com/ThrivingKings/animo instead animo.js A powerful little tool for managing CSS animations.
Animate Plus is a JavaScript animation library focusing on performance and authoring flexibility
Animate Plus Animate Plus is a JavaScript animation library focusing on performance and authoring flexibility. It aims to deliver a steady 60 FPS and
CSS animations engine
Animatic With Animatic it's easy to animate over a hundred objects at a time. Each item can have it's mass and viscosity to emulate realistic objects!
Making Animation Simple
Just Animate 2 Making Animation Simple Main Features Animate a group of things as easily as a single thing Staggering and delays Chainable sequencing
Animator Core is the runtime and rendering engine for Haiku Animator and the components you create with Animator
Animator Core is the runtime and rendering engine for Haiku Animator and the components you create with Animator. This engine is a dependency for any Haiku Animator components that are run on the web.
Simple & lightweight (4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.
lax.js Simple & lightweight (4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll. DEMO What's new w
Slide-element - A ~700 byte Promise-based library for animating elements with dynamic heights open & closed. Basically, a modern variant of jQuery's slideUp(), slideDown(), and slideToggle().
slide-element A tiny, accessible, Promise-based, jQuery-reminiscent library for sliding elements with dynamic heights open & closed. To see it in acti
Vue-hero-icons - A set of free MIT-licensed high-quality SVG icons, sourced from @tailwindlabs/heroicons, as Vue 2 functional components.
vue-hero-icons For Vue3, install the official package @heroicons/vue A set of free MIT-licensed high-quality SVG icons, sourced from @tailwindlabs/her
Vue-crypto-dashboard - Cryptocurrency Dashboard made with Vue
Vue Crypto Dashboard A Cryptocurrency Dashboard build with Vue JS, PWA enabled, Binance Websocket API for realtime price, amChart for displaying histo
Json2video-nodejs-sdk - Create videos programmatically in the cloud from NodeJS: add watermarks, resize videos, create slideshows, add soundtrack, voice-over with text-to-speech (TTS), text animations.
Create videos programmatically in Node JS Create and edit videos: add watermarks, resize videos, create slideshows, add soundtrack, automate the creat
Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Especially designers and/or photographers will love this theme! Built with MDX and Theme UI.
Gatsby Starter Portfolio: Cara Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Using the Gatsby Theme @lekoarts/gat
Renders and SVG schema of SARS-CoV-2 clade as defined by Neststrain
ncov-clade-schema https://ncov-clades-schema.vercel.app/ Visualizes current tree of SARS-CoV-2 clades. Allows to generate an SVG image of this tree. C
Projeto realizado como meio de aprendizado do Front-End e do Bootstrap. Tentei testar algumas animações e expor o máximo de criatividade possível😜
Steck Cars Demonstração : Sobre Projeto realizado como meio de aprendizado do Front-End e do Bootstrap. Tentei testar algumas animações e expor o máxi
A simple little WordPress block that allows you add an SVG icon or graphic to your website.
A simple little WordPress block that allows you add an SVG icon or graphic to your website.
TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.
Create, Export, Share, and Use any Shapes of your choice. View Demo · Report Bug · Request Feature 👋 Introducing TryShape TryShape is an opensource p