Pictorial
Pictorial is a simple domain specific language that compiles to Scalable Vector Graphics, SVG format. Its simple and expressive.
Samples
Program structure
- Compiler Directives
- Program statements
Example Head made with shapes
#use <svg> /* Tells pictorial to compile to SVG */
#doc_width 300 /* Sets the pictures width */
#doc_height 300 /* Sets the pictures height */
circle 150 130 75 green 0 brown /* Head */
circle 80 70 30 black 0 black /* left ear */
circle 220 70 30 black 0 black /* right ear */
circle 120 110 15 black 5 white /* left eye */
circle 180 110 15 black 5 white /* right eye */
circle 150 140 10 black 0 black /* nose */
line 135 175 165 175 yellow 20
Output:
Syntax
An overview of the language's elements
#use
This tells the compiler what format to use and compile to.
#use <svg>
#doc_width
This sets the width of the final picture.
#doc_width value
#doc_height
This sets the height of the final picture.
#doc_height value
line
This is a pictorial language construct that corresponds to an SVG line element. Values passed to it are used for the SVG line element attributes.
line x1 y1 x2 y2 stroke-color stroke-width
text
This is also is a language construct that produces a SVG text element. Values passed to it are passed to the corresponding SVG text element as attributes.
text x y value
circle
Yet another language construct that represents an SVG circle element. Like every other construct of this kind values passed to it are passed to its corresponding SVG circle element as attributes.
circle x y r stroke-color stroke-width fill
rect
This construct will add an SVG rectangle to resultant svg.
rect x y width height fill
License
Serve-JS is MIT licensed
Copyright 2021 Spiff Jekey-Green [email protected]
Made with โค๏ธ in Nigeria ๐ณ๐ฌ