Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/spiffgreen/pictorial

Pictorial is a simple domain-specific language that compiles to Scalable Vector Graphics, SVG format.
https://github.com/spiffgreen/pictorial

compiler construction design image language pictorial svg transpiler

Last synced: 15 days ago
JSON representation

Pictorial is a simple domain-specific language that compiles to Scalable Vector Graphics, SVG format.

Host: GitHub
URL: https://github.com/spiffgreen/pictorial
Owner: SpiffGreen
License: other
Created: 2021-06-26T17:10:07.000Z (over 3 years ago)
Default Branch: main
Last Pushed: 2021-06-26T18:07:50.000Z (over 3 years ago)
Last Synced: 2024-11-09T04:39:28.173Z (2 months ago)
Topics: compiler, construction, design, image, language, pictorial, svg, transpiler
Language: JavaScript
Homepage:
Size: 3.91 KB
Stars: 2
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE.md

Awesome Lists containing this project

README

# 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 /* 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:

![head](https://raw.githubusercontent.com/SpiffGreen/cdn/dbbf3473e0d95a2b966e86b6612554158ee43319/pictorial_cartoon_head.svg)

## Syntax
An overview of the language's elements
## `#use`
This tells the compiler what format to use and compile to.
```
#use
```

### `#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](LICENSE.md)

Made with ❤️ in Nigeria 🇳🇬