bluenote10 / Nimsvg
Nim-based DSL allowing to generate SVG files and GIF animations.
Stars: ✭ 107
Labels
Projects that are alternatives of or similar to Nimsvg
Icons
The premium icon font for @uiwjs Component Library. https://uiwjs.github.io/icons
Stars: ✭ 99 (-7.48%)
Mutual labels: svg
Reimg
reimg - A javascript library for converting image formats
Stars: ✭ 106 (-0.93%)
Mutual labels: svg
Rxviz
Rx Visualizer - Animated playground for Rx Observables
Stars: ✭ 1,471 (+1274.77%)
Mutual labels: svg
I7j Pdfhtml
pdfHTML is an iText 7 add-on for Java that allows you to easily convert HTML and CSS into standards compliant PDFs that are accessible, searchable and usable for indexing.
Stars: ✭ 104 (-2.8%)
Mutual labels: svg
D3 Tube Map
Draw tube maps in the style of the London Underground using d3
Stars: ✭ 106 (-0.93%)
Mutual labels: svg
Processing Svg Experiments
Some Processing example projects to export SVGs
Stars: ✭ 101 (-5.61%)
Mutual labels: svg
Openmoji
Open source emojis for designers, developers and everyone else!
Stars: ✭ 1,380 (+1189.72%)
Mutual labels: svg
Svg Path Editor
Online editor to create and manipulate SVG paths
Stars: ✭ 1,350 (+1161.68%)
Mutual labels: svg
Vue Svg Inline Loader
Webpack loader used for inline replacement of SVG images with actual content of SVG files in Vue projects.
Stars: ✭ 105 (-1.87%)
Mutual labels: svg
Pocketsvg
Easily convert your SVG files into CGPaths, CAShapeLayers, and UIBezierPaths
Stars: ✭ 1,483 (+1285.98%)
Mutual labels: svg
React Native Responsive Linechart
A customizable and responsive line or area chart for react-native
Stars: ✭ 105 (-1.87%)
Mutual labels: svg
NimSvg
Nim-based DSL allowing to generate SVG files and GIF animations.
DSL
NimSvg is inspired by Karax, and offers a similar DSL to generate SVG trees. A simple hello world
import nimsvg
buildSvgFile("examples/basic1.svg"):
svg(width=200, height=200):
circle(cx=100, cy=100, r=80, stroke="teal", `stroke-width`=4, fill="#EEF")
produces the following SVG:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="200">
<circle cx="100" cy="100" r="80" stroke="teal" stroke-width="4" fill="#EEF"/>
</svg>
Output:
The DSL allows to mix tag expressions with regular Nim expressions like variable definitions, for loops, or if statements, which makes it easy to generate SVGs programmatically:
import nimsvg, random
buildSvgFile("examples/basic2.svg"):
let size = 200
svg(width=size, height=size):
for _ in 0 .. 1000:
let x = rand(size)
let y = rand(size)
let radius = rand(5)
circle(cx=x, cy=y, r=radius, stroke="#111122", fill="#E0E0F0", `fill-opacity`=0.5)
Output:
NimSvg also allows to render a sequence of SVG files into an animated GIF (requires Imagemagick for the rendering):
import nimsvg
let settings = animSettings("filenameBase", backAndForth=true)
let numFrames = 100
settings.buildAnimation(numFrames) do (i: int) -> Nodes:
let w = 200
let h = 200
buildSvg:
svg(width=w, height=h):
let r = 0.4 * w.float * i.float / numFrames.float + 10
circle(cx=w/2, cy=h/2, r=r, stroke="#445", `stroke-width`=4, fill="#EEF")
Output:
Special syntax
-
t
: Thet
keyword can be used to create text nodes:let svg = buildSvg: text(x=0, y=0): t "Hello World"
-
embed
: The embed keyword can be used to embed the result of other nodes.proc sub(): Nodes = buildSvg: b() c() let svg = buildSvg: # produces tags <a><b><c><d> a() embed sub() d()
Gallery
Click on an image to see the corresponding implementation.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].