Top 23 JavaScript SVG Projects

• three.js

  9 67,797 10.0 JavaScript

  JavaScript 3D library.

  Project mention: Recreating a classic starfield in GLSL & three.js | dev.to | 2021-02-21

  A starfield was one of the first things I built when learning to program. It's been quite some time now, and I've started learning shader programming with GLSL and three.js, so I decided why not go back to where it all started!

• anime.js

  2 38,342 5.1 JavaScript

  JavaScript animation engine

  Project mention: Question about an animated 3D render moving on scroll + click | reddit.com/r/webflow | 2021-02-21

  I feel what you want because I want things like that too. However this cannot be done in Webflow. I'm sure this requires more than some Webflow and casual web knowledge. Recently I found this website that can help creating complex animations, but for me this seems too complicated. 3D is a cool thing, but making it interactive and working on a website is less cool:D Some more resources in connection with 3D: Spline and Vectary.

• Scout

  Sponsored scoutapm.com

  Get performance insights in less than 4 minutes. Scout APM uses tracing logic that ties bottlenecks to source code so you know the exact line of code causing performance issues and can get back to building a great product faster.

• feather

  5 19,631 1.4 JavaScript

  Simply beautiful open source icons

  Project mention: [Theme] Layers | reddit.com/r/androidthemes | 2021-02-21

  These are Feather Icons, great open source pack and the icons are actually .svg files (applied via Image not FontIcon) 😉 Forgot to mention about it in the descrpition but I'm gonna fix that now

• sharp

  4 18,997 8.6 JavaScript

  High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library.

  Project mention: Setup Macbook M1 for Web and React Native development | dev.to | 2021-01-25

  If you have a side project that uses GatsbyJS, chances are you are going to face the issue https://github.com/lovell/sharp/issues/2460. Gatsby uses a C based library called Sharp that needs to be compiled under the ARM architecture. It did not work for me and the only way I could solve was to install vips formulae from Homebrew as mentioned in the GitHub issue itself.

• Mo.js

  0 16,510 0.4 JavaScript

  The motion graphics toolbelt for the web

• svgo

  4 15,615 0.0 JavaScript

  :tiger: Node.js tool for optimizing SVG files

  Project mention: A tool to convert SVG into React 17 / TypeScript components + Ion Icons | dev.to | 2021-02-16

  svgo to optimize the SVG, a lot.

• Frappe Charts

  0 13,780 5.7 JavaScript

  Simple, responsive, modern SVG Charts with zero dependencies (by frappe)

• shields

  5 13,482 9.7 JavaScript

  Concise, consistent, and legible badges in SVG and raster format

  Project mention: [Sway] Assassin Inkling | reddit.com/r/unixporn | 2021-02-20

  image-link.png is generate using shields.io.

• SuperTinyIcons

  1 12,550 7.9 JavaScript

  Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos

  Project mention: Always Bet on Text | news.ycombinator.com | 2021-02-17

  It's probably not the only removable part, the icon can be 414 bytes: https://github.com/edent/SuperTinyIcons#how-small

• chartist-js

  2 12,464 0.0 JavaScript

  Simple responsive charts

  Project mention: Understanding front-end data visualization tools ecosystem in 2021 📊📈 | dev.to | 2021-02-18

  Chartist.js

• vega

  1 9,015 9.1 JavaScript

  A visualization grammar.

  Project mention: Why Is Esbuild Fast? | news.ycombinator.com | 2021-02-16

  For Vega, I would just use the pre-built minified ES5 version: https://github.com/vega/vega#es5-support

  Access it via a global variable.

• c3

  4 9,003 4.2 JavaScript

  :bar_chart: A D3-based reusable chart library

  Project mention: 10 Years of Open-Source Visualization – D3.js | news.ycombinator.com | 2021-02-23

• svg.js

  0 8,630 6.0 JavaScript

  The lightweight library for manipulating and animating SVG

• svgr

  1 7,315 5.2 JavaScript

  Transform SVGs into React components 🦁

  Project mention: How I Built My Personal Website | dev.to | 2021-01-22

  I'm using SVGR to transform my SVG files into React components, rather than loading them via . This means my SVGs will be loaded with the markup, rather than being loaded asynchronously, which can help eliminate Cumulative Layout Shift (CLS) issues. It's as simple as customizing your next.config.js file to use the @svgr/webpack loader for *.svg file types, then importing them in your components, a la:

• dom-to-image

  1 7,045 0.0 JavaScript

  Generates an image from a DOM node using HTML5 canvas

  Project mention: Building a local running tracker | dev.to | 2021-01-27

  Something I thought would be pretty cool is the ability to generate (and download) an image of one's progress. I've dabbled a bit with generating images with Java on the server side, but never in a client-side app. My searching led me to find dom-to-image, which has options for exporting to a JPEG, a PNG, or even a blob (not the killer kind; a "blob" is raw file data, which can be read or processed as you wish). Combined with another library to make saving files easier, exporting the image is done easily:

• two.js

  0 7,013 7.6 JavaScript

  A renderer agnostic two-dimensional drawing api for the web.

• DOMPurify

  5 6,672 8.9 JavaScript

  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:

  Project mention: Sending Contact Form Messages to Your Email Inbox | dev.to | 2021-02-21

  Since we are dealing with user input sanitizing it is a good security practice, you can set up any user input sanitizing method you are familiar with, a good start can be DOMPurify.

• octicons

  2 6,571 8.6 JavaScript

  A scalable set of icons handcrafted with <3 by GitHub

  Project mention: Is there a collection of Git icons available anywhere? | reddit.com/r/git | 2020-12-30

• rickshaw

  0 6,484 1.5 JavaScript

  JavaScript toolkit for creating interactive real-time graphs

• imagemin

  0 4,567 1.7 JavaScript

  Minify images seamlessly

• sqip

  1 2,981 2.9 JavaScript

  "SQIP" (pronounced \skwɪb\ like the non-magical folk of magical descent) is a SVG-based LQIP technique.

  Project mention: 🔥 Native lazy loading is here! | reddit.com/r/web_design | 2021-01-18

  Alright, so SQIP generates an SVG from an image, see here and here.

• react-simple-maps

  0 2,190 3.9 JavaScript

  Beautiful React SVG maps with d3-geo and topojson using a declarative api.

• react-designer

  0 1,639 0.0 JavaScript

  It's not art

Index