@thi.ng/hiccup-svg 5.6.7 → 5.6.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +36 -35
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<!-- This file is generated - DO NOT EDIT! -->
|
|
2
|
-
<!-- Please see: https://
|
|
3
|
-
# 
|
|
4
4
|
|
|
5
5
|
[](https://www.npmjs.com/package/@thi.ng/hiccup-svg)
|
|
6
6
|
|
|
@@ -8,11 +8,12 @@
|
|
|
8
8
|
|
|
9
9
|
> [!NOTE]
|
|
10
10
|
> This is one of 214 standalone projects, maintained as part
|
|
11
|
-
> of the [@thi.ng/umbrella](https://
|
|
11
|
+
> of the [@thi.ng/umbrella](https://codeberg.org/thi.ng/umbrella/) ecosystem
|
|
12
12
|
> and anti-framework.
|
|
13
13
|
>
|
|
14
|
-
> 🚀 Please help me to work full-time on these projects by [sponsoring
|
|
15
|
-
>
|
|
14
|
+
> 🚀 Please help me to work full-time on these projects by [sponsoring
|
|
15
|
+
> me](https://codeberg.org/thi.ng/umbrella/src/branch/develop/CONTRIBUTING.md#donations).
|
|
16
|
+
> Thank you! ❤️
|
|
16
17
|
|
|
17
18
|
- [About](#about)
|
|
18
19
|
- [Important](#important)
|
|
@@ -30,7 +31,7 @@
|
|
|
30
31
|
|
|
31
32
|
## About
|
|
32
33
|
|
|
33
|
-
SVG element functions for [@thi.ng/hiccup](https://
|
|
34
|
+
SVG element functions for [@thi.ng/hiccup](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup) & related tooling.
|
|
34
35
|
|
|
35
36
|
### Important
|
|
36
37
|
|
|
@@ -53,9 +54,9 @@ svg({}, circle([0, 0], 100, { fill: "red" }));
|
|
|
53
54
|
|
|
54
55
|
Since v2.0.0 this package provides a conversion utility to translate the more
|
|
55
56
|
compact syntax used by
|
|
56
|
-
[@thi.ng/geom](https://
|
|
57
|
+
[@thi.ng/geom](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/geom)
|
|
57
58
|
and
|
|
58
|
-
[@thi.ng/hiccup-canvas](https://
|
|
59
|
+
[@thi.ng/hiccup-canvas](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup-canvas)
|
|
59
60
|
shape trees (designed for more performant realtime / canvas drawing) into a SVG
|
|
60
61
|
serializable hiccup format.
|
|
61
62
|
|
|
@@ -124,7 +125,7 @@ Interpreted as float RGB(A):
|
|
|
124
125
|
|
|
125
126
|
`{ fill: [1, 0.8, 0.6, 0.4] }` => `{ fill: "rgba(255,204,153,0.40)" }`
|
|
126
127
|
|
|
127
|
-
##### [@thi.ng/color](https://
|
|
128
|
+
##### [@thi.ng/color](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/color) values
|
|
128
129
|
|
|
129
130
|
Converted to CSS color strings:
|
|
130
131
|
|
|
@@ -152,7 +153,7 @@ therefore need to be complete, e.g. `{ rotate: "rotate(60)" }`
|
|
|
152
153
|
|
|
153
154
|
**STABLE** - used in production
|
|
154
155
|
|
|
155
|
-
[Search or submit any issues for this package](https://
|
|
156
|
+
[Search or submit any issues for this package](https://codeberg.org/thi.ng/umbrella/issues?q=%5Bhiccup-svg%5D)
|
|
156
157
|
|
|
157
158
|
## Installation
|
|
158
159
|
|
|
@@ -184,38 +185,38 @@ Package sizes (brotli'd, pre-treeshake): ESM: 2.53 KB
|
|
|
184
185
|
|
|
185
186
|
## Dependencies
|
|
186
187
|
|
|
187
|
-
- [@thi.ng/api](https://
|
|
188
|
-
- [@thi.ng/checks](https://
|
|
189
|
-
- [@thi.ng/color](https://
|
|
190
|
-
- [@thi.ng/prefixes](https://
|
|
188
|
+
- [@thi.ng/api](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/api)
|
|
189
|
+
- [@thi.ng/checks](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/checks)
|
|
190
|
+
- [@thi.ng/color](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/color)
|
|
191
|
+
- [@thi.ng/prefixes](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/prefixes)
|
|
191
192
|
|
|
192
193
|
Note: @thi.ng/api is in _most_ cases a type-only import (not used at runtime)
|
|
193
194
|
|
|
194
195
|
## Usage examples
|
|
195
196
|
|
|
196
197
|
17 projects in this repo's
|
|
197
|
-
[/examples](https://
|
|
198
|
+
[/examples](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples)
|
|
198
199
|
directory are using this package:
|
|
199
200
|
|
|
200
|
-
| Screenshot | Description | Live demo | Source
|
|
201
|
-
|
|
202
|
-
| <img src="https://
|
|
203
|
-
| <img src="https://
|
|
204
|
-
| <img src="https://
|
|
205
|
-
| <img src="https://
|
|
206
|
-
| <img src="https://
|
|
207
|
-
| <img src="https://
|
|
208
|
-
| <img src="https://
|
|
209
|
-
| <img src="https://
|
|
210
|
-
| <img src="https://
|
|
211
|
-
| <img src="https://
|
|
212
|
-
| <img src="https://
|
|
213
|
-
| <img src="https://
|
|
214
|
-
| <img src="https://
|
|
215
|
-
| <img src="https://
|
|
216
|
-
| <img src="https://
|
|
217
|
-
| <img src="https://
|
|
218
|
-
| <img src="https://
|
|
201
|
+
| Screenshot | Description | Live demo | Source |
|
|
202
|
+
|:-------------------------------------------------------------------------------------------------------------------------------------|:---------------------------------------------------------------------------------|:---------------------------------------------------------|:----------------------------------------------------------------------------------------------|
|
|
203
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/color-contrast.avif" width="240"/> | Tool to interactively compute & visualize color contrasts against WCAG threshold | [Demo](https://demo.thi.ng/umbrella/color-contrast/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/color-contrast) |
|
|
204
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/color-themes.png" width="240"/> | Probabilistic color theme generator | [Demo](https://demo.thi.ng/umbrella/color-themes/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/color-themes) |
|
|
205
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/commit-heatmap.png" width="240"/> | Heatmap visualization of this mono-repo's commits | | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/commit-heatmap) |
|
|
206
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/crypto-chart.png" width="240"/> | Basic crypto-currency candle chart with multiple moving averages plots | [Demo](https://demo.thi.ng/umbrella/crypto-chart/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/crypto-chart) |
|
|
207
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/dominant-colors.png" width="240"/> | Color palette generation via dominant color extraction from uploaded images | [Demo](https://demo.thi.ng/umbrella/dominant-colors/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/dominant-colors) |
|
|
208
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/gesture-analysis.png" width="240"/> | Mouse gesture / stroke analysis, simplification, corner detection | [Demo](https://demo.thi.ng/umbrella/gesture-analysis/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/gesture-analysis) |
|
|
209
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/hdom-canvas/hdom-canvas-shapes-results.png" width="240"/> | Various hdom-canvas shape drawing examples & SVG conversion / export | [Demo](https://demo.thi.ng/umbrella/hdom-canvas-shapes/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/hdom-canvas-shapes) |
|
|
210
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/package-stats.png" width="240"/> | CLI util to visualize umbrella pkg stats | | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/package-stats) |
|
|
211
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/pointfree-svg.png" width="240"/> | Generate SVG using pointfree DSL | | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/pointfree-svg) |
|
|
212
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/poly-spline.png" width="240"/> | Polygon to cubic curve conversion & visualization | [Demo](https://demo.thi.ng/umbrella/poly-spline/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/poly-spline) |
|
|
213
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/rdom-reactive-svg.jpg" width="240"/> | Animated SVG elements with reactive attributes | [Demo](https://demo.thi.ng/umbrella/rdom-reactive-svg/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/rdom-reactive-svg) |
|
|
214
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/rdom-svg-nodes.png" width="240"/> | rdom powered SVG graph with draggable nodes | [Demo](https://demo.thi.ng/umbrella/rdom-svg-nodes/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/rdom-svg-nodes) |
|
|
215
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/rstream-grid.jpg" width="240"/> | Interactive grid generator, SVG generation & export, undo/redo support | [Demo](https://demo.thi.ng/umbrella/rstream-grid/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/rstream-grid) |
|
|
216
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/svg-resample.png" width="240"/> | SVG path parsing & dynamic resampling | [Demo](https://demo.thi.ng/umbrella/svg-resample/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/svg-resample) |
|
|
217
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/svg-waveform.jpg" width="240"/> | Additive waveform synthesis & SVG visualization with undo/redo | [Demo](https://demo.thi.ng/umbrella/svg-waveform/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/svg-waveform) |
|
|
218
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/viz-ridge-lines.avif" width="240"/> | Interactive ridge-line plot | [Demo](https://demo.thi.ng/umbrella/viz-ridge-lines/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/viz-ridge-lines) |
|
|
219
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/viz-scatter-plot.avif" width="240"/> | Interactive scatter & line plot of low-discrepancy samples | [Demo](https://demo.thi.ng/umbrella/viz-scatter-plot/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/viz-scatter-plot) |
|
|
219
220
|
|
|
220
221
|
## API
|
|
221
222
|
|
|
@@ -239,7 +240,7 @@ fs.writeFileSync(
|
|
|
239
240
|
```
|
|
240
241
|
|
|
241
242
|
Minimal example showing SVG conversion of a hiccup-canvas scene (also see
|
|
242
|
-
[@thi.ng/geom](https://
|
|
243
|
+
[@thi.ng/geom](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/geom)
|
|
243
244
|
for another compatible approach):
|
|
244
245
|
|
|
245
246
|
```ts
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@thi.ng/hiccup-svg",
|
|
3
|
-
"version": "5.6.
|
|
3
|
+
"version": "5.6.9",
|
|
4
4
|
"description": "SVG element functions for @thi.ng/hiccup & related tooling",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"module": "./index.js",
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"sideEffects": false,
|
|
9
9
|
"repository": {
|
|
10
10
|
"type": "git",
|
|
11
|
-
"url": "git+https://
|
|
11
|
+
"url": "git+https://codeberg.org/thi.ng/umbrella.git",
|
|
12
12
|
"directory": "packages/hiccup-svg"
|
|
13
13
|
},
|
|
14
14
|
"homepage": "https://thi.ng/hiccup-svg",
|
|
@@ -40,10 +40,10 @@
|
|
|
40
40
|
"tool:tangle": "../../node_modules/.bin/tangle src/**/*.ts"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@thi.ng/api": "^8.12.
|
|
44
|
-
"@thi.ng/checks": "^3.8.
|
|
45
|
-
"@thi.ng/color": "^5.8.
|
|
46
|
-
"@thi.ng/prefixes": "^2.3.
|
|
43
|
+
"@thi.ng/api": "^8.12.18",
|
|
44
|
+
"@thi.ng/checks": "^3.8.8",
|
|
45
|
+
"@thi.ng/color": "^5.8.19",
|
|
46
|
+
"@thi.ng/prefixes": "^2.3.68"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"esbuild": "^0.27.2",
|
|
@@ -143,5 +143,5 @@
|
|
|
143
143
|
"parent": "@thi.ng/hiccup",
|
|
144
144
|
"year": 2016
|
|
145
145
|
},
|
|
146
|
-
"gitHead": "
|
|
146
|
+
"gitHead": "8ddf86ea0a1e658ddbf19cc645b29d0c176e29c4\n"
|
|
147
147
|
}
|