Top 23 JavaScript SVG Projects
-
-
Project mention: Which technologies were used to make this website? | reddit.com/r/webdev | 2022-01-23
Most of that file is three.js and greensock, Both quite popular for web animations. Uses WebGL rendered to a . You can see a canvas element covering the background just before the closing body tag in the DOM.
-
SonarQube
Static code analysis for 29 languages.. Your projects are multi-language. So is SonarQube analysis. Find Bugs, Vulnerabilities, Security Hotspots, and Code Smells so you can release quality code every time. Get started analyzing your projects today for free.
-
Project mention: Hey there Redditors! Can you guys tell me how to do this sort of animation on a website. I am fluent with Adobe After Effects and other design tools but don't know how websites are animated | reddit.com/r/Frontend | 2022-01-16
Another interesting library is Animejs. But yeah, you need to know JavaScript in order to use these libraries.
-
sharp
High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library.
Project mention: Best Practices for Website Image Creation/Storage? | reddit.com/r/webdev | 2022-01-14I just used commander to build a simple CLI, you might need a shebang to make it executable on your OS but it was easy to google that, and then used sharp to do all the image processing.
-
Feather – Simply beautiful open source icons
-
SVGO
-
Project mention: 12 ways to get more GitHub stars for your open-source project | dev.to | 2022-01-16
Readme is the first thing that a visitor to your repository sees. The readme should be able to convey what your project does, how to install the project, how to deploy the project ( if applicable ), how to contribute and how it works. Also, use badges that are helpful for the developers. We used https://shields.io/ for adding badges to our Readme.
-
OPS
OPS - Build and Run Open Source Unikernels. Quickly and easily build and deploy open source unikernels in tens of seconds. Deploy in any language to any cloud.
-
-
SNAP SVG
-
SuperTinyIcons
Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos
Super Tiny Icons
-
Project mention: Blazor Data Visualization Tools - Vector Map and Charts | reddit.com/r/Blazor | 2021-12-01
For anyone interested or looking for a charting/vector map tool for Blazor, my organisation has developed and open sourced some packages that sit on top of a couple excellent JS libraries that handle these needs beautifully, Chartist.JS and JQuery Mapael. They are available in the nuget repository, source links below:
-
Simple Icons
-
Project mention: Apexcharts – Modern and Interactive Open-Source Charts | reddit.com/r/CKsTechNews | 2022-01-20
-
tabler-icons
A set of over 1450 free MIT-licensed high-quality SVG icons for you to use in your web projects.
Tabler Icons
-
As such, I've been obsessed with the Vega and Vega-Lite languages for a long time. These use JSON rather than full-blown code, and allow you to build a visual from the ground-up using a grammar of graphics, much like ggplot2 in R or Altair in Python (which is actually an implementation of Vega/Vega-Lite).
-
Svg.js - The lightweight library for manipulating and animating SVG.
-
Project mention: [OC] I spent the last 18 months of lockdown pouring my soul into a website that allows you to visualize virtually every U.S. company's international supply chain. E.g. What products, how much, which factories and where does Walmart import from? (Just type a company in the search box) | reddit.com/r/dataisbeautiful | 2022-01-18
C3.js is actually something that I like to use on top of D3, specifically for POC's and things like that. It wraps the D3 code in something a little more semantic, provides an API for updating the chart/data, and makes the UI easier to style after the chart is generated. Purely a preference thing, but might be useful in some cases.
-
DOMPurify
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: How to allow custom entered HTML in item description, but make sure no JS gets entered? | reddit.com/r/webdev | 2022-01-02You can use an input sanitizer. I'd use something like DOMPurify if you don't want to write the sanitizer yourself. But yeah you should not allow or remove a certain tags like script and img.
-
Project mention: I created a chrome extension which allows you to see real-time stock data, directly on Twitter, by hovering over stock cashtags | reddit.com/r/SideProject | 2021-12-26
Hey! The library used to convert the HTML to an image is https://github.com/tsayen/dom-to-image
-
Project mention: [AskJS] What is the best canvas library to make an app like figma or integromat? | reddit.com/r/javascript | 2021-08-29
-
Another implementation detail was related to coloring of images. Open Sauced makes use of many SVG images, of differing flavors. In the cases where SVG files are in the static assets of Open Sauced (e.g. ), the coloring of these is controlled using the filter CSS property. On the other hand, we also make use of @primer/octicons-react.
-
Project mention: Rough.js – Create graphics with a hand-drawn, sketchy, appearance | news.ycombinator.com | 2021-12-14
This looks like a wonderful library! I'm wondering how a handwritten font could fit into this api, a font like in https://github.com/timqian/chart.xkcd
-
Amazing!!! I am looking specifically for something like react flow as well. After looking into it the best option might be jsplumb.
JavaScript SVG related posts
- I reverse engineered a Christmas light string that controls RGB LEDs using only the power lines
- GoJS 2.2: JavaScript and TypeScript Diagramming library
- Apexcharts – Modern and Interactive Open-Source Charts
- Apexcharts – Modern and Interactive Open-Source Charts
- Drawing on Canvas in Svelte
- [OC] I spent the last 18 months of lockdown pouring my soul into a website that allows you to visualize virtually every U.S. company's international supply chain. E.g. What products, how much, which factories and where does Walmart import from? (Just type a company in the search box)
- Hey there Redditors! Can you guys tell me how to do this sort of animation on a website. I am fluent with Adobe After Effects and other design tools but don't know how websites are animated
Index
What are some of the best open-source SVG projects in JavaScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | d3 | 100,086 |
| 2 | three.js | 77,896 |
| 3 | anime.js | 41,344 |
| 4 | sharp | 21,359 |
| 5 | feather | 21,163 |
| 6 | svgo | 17,190 |
| 7 | shields | 15,941 |
| 8 | Frappe Charts | 14,137 |
| 9 | Snap.svg | 13,375 |
| 10 | SuperTinyIcons | 13,248 |
| 11 | chartist-js | 12,748 |
| 12 | simple-icons | 12,314 |
| 13 | apexcharts.js | 11,082 |
| 14 | tabler-icons | 10,991 |
| 15 | vega | 9,618 |
| 16 | svg.js | 9,407 |
| 17 | c3 | 9,169 |
| 18 | DOMPurify | 8,305 |
| 19 | dom-to-image | 8,124 |
| 20 | two.js | 7,506 |
| 21 | octicons | 7,090 |
| 22 | chart.xkcd | 7,006 |
| 23 | jsplumb | 6,807 |
Are you hiring? Post a new remote job listing for free.
