# svg-to-3d-mesh
> Render SVG path into 3d triangulated mesh
Latest version **0.0.1** (published 2021-02-13) · MIT license · 0 weekly downloads
## Install
```sh
npm install svg-to-3d-mesh
pnpm add svg-to-3d-mesh
yarn add svg-to-3d-mesh
bun add svg-to-3d-mesh
```
## Health
**Score 30/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.0.1 |
| Published | 2021-02-13 |
| First published | 2021-02-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 11 |
| Unpacked size | 5.3 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Anh Nguyen |
| Maintainers | anhnicky66 |
| Keywords | svg, 3d, mesh, web-components |
## Links
- npm: https://www.npmjs.com/package/svg-to-3d-mesh
- Homepage: https://github.com/anhnicky66/svg-to-3d-mesh
- npm.io page: https://npm.io/package/svg-to-3d-mesh
## Dependencies (11)
- [three](https://npm.io/package/three.md) ^0.118.3
- [tweenr](https://npm.io/package/tweenr.md) ^2.2.1
- [gl-vec3](https://npm.io/package/gl-vec3.md) ^1.1.3
- [canvas-loop](https://npm.io/package/canvas-loop.md) ^1.0.7
- [svg-mesh-3d](https://npm.io/package/svg-mesh-3d.md) ^1.1.0
- [mesh-reindex](https://npm.io/package/mesh-reindex.md) ^1.0.0
- [unindex-mesh](https://npm.io/package/unindex-mesh.md) ^2.0.0
- [@stencil/core](https://npm.io/package/@stencil/core.md) ^2.0.1
- [extract-svg-path](https://npm.io/package/extract-svg-path.md) ^2.1.0
- [triangle-centroid](https://npm.io/package/triangle-centroid.md) ^1.0.0
- [three-simplicial-complex](https://npm.io/package/three-simplicial-complex.md) ^69.0.6
## Recent versions
- 0.0.1 (latest) — 2021-02-13
## README
# Introduction
This Stencil component is a wrapper of [@mattdesl](https://twitter.com/mattdesl)'s work on rendering SVG path string into 3D triangulated mesh.
# Installation
```
npm install svg-to-3d-mesh --save
```
or
```
yarn add svg-to-3d-mesh
```
# Usage
## Without a Framework
```
```
## With VueJS
In main.js (or main.ts) file.
```
import Vue from "vue";
import { applyPolyfills, defineCustomElements } from 'svg-to-3d-mesh/loader';
Vue.config.ignoredElements = [/svg-to-3d-mesh/];
applyPolyfills().then(() => {
defineCustomElements();
});
new Vue({
render: h => h(App)
}).$mount('#app');
```
the component will then be avaiable in any of the Vue components
```
```
# Options
- `svgs` (default `[]`)
- An array of URL to the svg file
- `height` : The height of the canvas. By default, the canvas height will be the same as it's container.
- `color` : The converted 3d mesh color
- `backgroundColor` : The canvas background color
- `opacity` : The rendered scene opacity
- `explodeInDuration` : The duration of triangulated mesh explode-in animation
- `scaleUpDuration` : The duration of triangulated mesh scale-up animation
- `scaleDownDuration` : The duration of triangulated mesh scale-down animation
- `explodeOutDuration` : The duration of triangulated mesh explode-out animation
---
_Source: https://npm.io/package/svg-to-3d-mesh · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._