SVGoban
A lightweight JavaScript library that generates a Goban representation as layered sets of SVG shapes
Project Guidelines
- Pure functions (no state, no side-effects)
- Scalable to any size without quality loss (SVG!)
- No dependencies
- Any goban size
- CSS styling
- Default themes with plain colors and very light gradients
Demo
Generate a SVG sample output from this repository:
node demo/test_19classic_4stones.js > sample.svg
Installation
SVGoban may be installed as a NPM package: npm install svgoban --save
API
"Pseudo-" elements are regular objects with a type attribute matching the target SVG element and other related attributes.
Attributes
-
size
= a number between9
and19
-
color
="black"
or"white"
-
position
= an object containing coordinates and colors as keys and values -
config
= an object containingsize
andtheme
attributes -
noMargin
andhideMargin
= booleans -
coordSystem
="A1"
or"aa"
-
zoom
= an object describing either:- [
mode
="zone"
] a region ("NW"
/"NE"
/"SE"
/"SW"
) - [
mode
="point"
] or a center point and a zoom ratio
- [
Geometry
-
shapeBackground(noMargin)
returns 1 pseudo-square whose area may include the margin -
shapeGrid(size)
returns an array of 2*size pseudo-lines -
shapeStarPoints(size)
returns an array of pseudo-circles -
shapeLabels(size, coordSystem)
returns an array of 4*size pseudo-text -
shapeStones(size, positions)
returns an array of size*size pseudo-circles (stones and placeholders) -
shapeStone(size, intersection, color)
returns 1 pseudo-circle -
shapeMarkers(size, markers, positions)
returns an array of pseudo-elements drawing triangles, squares,... -
shapeArea(hideMargin, zoom, size)
returns a view box with optional margin and zoom in
Styles
-
defineRadialColors(color)
returns gradient colors -
Themes
is an array of predefined themes:"classic"
and"paper"
Helper
-
serialize(config, position, markers)
returns a string containing a full SVG goban