133 Repositories
JavaScript svg-path Libraries
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
📃 Typed primitives for Typescript to work with file paths
typed-file-system-path typed-file-system-path takes inspiration from Path.swift in swift-tools-support-core and provides typed primitives to work with
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
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
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
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
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 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 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
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
Easily create test fixtures at a temporary file-system path
fs-fixture Easily create test fixtures at a temporary file-system path. Support this project by ⭐️ starring and sharing it. Follow me to see what othe
A plugin that can find the paths between two notes. Not sure who will want to use it...
Obsidian Path Finder Plugin Install BRAT Install Obsidian42-BRAT plugin. Click Add new beta plugin and fill in jerrywcy/obsidian-path-finder. Activate
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
🍎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
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.
A third-party messenger application for Path of Exile.
PoE Instant Messenger Download (Windows) The latest release can be downloaded here Tool showcase Theme Setup Notifier Messenger Settings Light Dark Co
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
A Multi-Agent Path Finding visualization website.
MAPF Visualizer A visualization tool for multi-agent path finding algorithms. About The Project This project provides a visualization tool for Multi-A
Find and parse the tsconfig.json file from a directory path
get-tsconfig Find and parse tsconfig.json files. Features Zero dependencies (not even TypeScript) Tested against TypeScript for accuracy Supports comm
🤠 Object property paths with wildcards and regexps 🌵
🤠 Object property paths with wildcards and regexps. 🌵 Get/set object properties using: ⛏️ Dot-delimited paths: foo.bar.0.baz ⭐ Wildcards: foo.*, **.
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
🤠 Functional utilities using object property paths with wildcards and regexps 🌵
🤠 Functional utilities using object property paths with wildcards and regexps. 🌵 Available functional methods include: 🗺️ Mapping: map() 🚂 Merging
Sort imports by path - VS Code extension
Import sort by absolute path The sorting algorithm will group each item in the array and sort (alphabetically) its children that starts with the path
Userland module that implements the module path mapping that Node.js does with "exports" in package.json
exports-map Userland module that implements the module path mapping that Node.js does with "exports" in package.json npm install exports-map Usage co
Path-finding & Sorting algorithms Visualizer
Update - Changelog 📋 09.05.2022 AlgoVision is now fully mobile-responsive for all its features ! On mobile, the 'Mouse Chase' option in Dynamic Mode
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
A plugin that lets you override the Webpack modules public path in webpage runtime.
dynamic-public-path-plugin A plugin that lets you override the Webpack modules public path in webpage runtime. plugin : webpack-runtime-public-path-pl
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
A cross-platform desktop application of tools for developers
A cross-platform desktop application of tools for developers 🌏 Online Web This website provides online version of the same tools echoo 💻 Offline Cli
Detect the executable python interpreter cmd in $PATH.
detect-python-interpreter Detect the executable python interpreter cmd in $PATH. Installation $ npm install --save detect-python-interpreter Usage con
🎉 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
This package enables you to mount your Remix app at a different path than root
Remix Mount Routes This package enables you to mount your Remix app at a different path than root. 🛠 Installation npm install -D remix-mount-routes
A Cloudflare Worker that translates TeX to SVG
TeX SVG Worker A Cloudflare Worker that translates TeX to SVG.
Blockchain creation path to help beginners understand block creation concept
Blockchain creation path to help beginners understand block creation concept.
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)
SWC plugin for transforming import path.
swc-plugin-transform-import Inspired from babel-plugin-transform-imports Installation npm i -D swc-plugin-transform-import Uses with webpack-config //
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
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
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
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.
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
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
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
Pathokun, a path generator, updates your content just with your frontend by HTTP GET Request!
Pathokun Pathokun, a path generator, update your content just with your frontend by HTTP GET Request! In this way you can make Full-Stack project with
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
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
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
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
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 tiny JavaScript utility to access deep properties using a path (for Node and the Browser)
object-path Access deep properties using a path Changelog 0.11.5 SECURITY FIX. Fix a prototype pollution vulnerability in the set() function when usin
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
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