elrumordelaluz / Outline Stroke
Convert stroked SVG into the outlined version
Stars: ✭ 81
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Outline Stroke
Iconify Sketch
Sketch plug-in for importing over 70,000 icons from 80+ icon sets, including Material Design Icons, FontAwesome, Jam Icons, Open Emoji and many others.
Stars: ✭ 76 (-6.17%)
Mutual labels: svg
Waveforms
An interactive, explorable explanation about the peculiar magic of sound waves.
Stars: ✭ 1,218 (+1403.7%)
Mutual labels: svg
Svg Loaders React
React adaptation of the SVG Loaders library by Sam Herbert
Stars: ✭ 75 (-7.41%)
Mutual labels: svg
Svg To Compose
Converts SVG and Android Vector Drawable in Jetpack Compose code
Stars: ✭ 76 (-6.17%)
Mutual labels: svg
Personal Goals
List of books I've read, projects I've done, videos I've seen, articles I've read or podcasts I've listened to.
Stars: ✭ 75 (-7.41%)
Mutual labels: svg
Svg Fill Loader
DEPRECATED, use https://github.com/kisenka/svg-mixer/tree/master/packages/svg-transform-loader instead
Stars: ✭ 74 (-8.64%)
Mutual labels: svg
Nivo
nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
Stars: ✭ 9,550 (+11690.12%)
Mutual labels: svg
Twelvemonkeys
TwelveMonkeys ImageIO: Additional plug-ins and extensions for Java's ImageIO
Stars: ✭ 1,221 (+1407.41%)
Mutual labels: svg
Maker.js
📐⚙ 2D vector line drawing and shape modeling for CNC and laser cutters.
Stars: ✭ 1,185 (+1362.96%)
Mutual labels: svg
Dashed Border Generator
Custom Dashed Border | Online CSS Generator 🚀
Stars: ✭ 79 (-2.47%)
Mutual labels: svg
React Image Timeline
📆 An image-centric timeline component for React.js
Stars: ✭ 77 (-4.94%)
Mutual labels: svg
Sometimes you need an svg
image that have stroke
d attributes in its
paths
but outlined like after applying Outline Stroke in Adobe Illustrator or Convert to Outlines in SketchApp
Install
yarn add svg-outline-stroke
Usage
String
input:
const outlineStroke = require('svg-outline-stroke')
const strokedSVG = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<line x1="32" y1="16" x2="32" y2="48" fill="none" stroke="#202020" stroke-miterlimit="10" stroke-width="2"/>
<line x1="48" y1="32" x2="16" y2="32" fill="none" stroke="#202020" stroke-miterlimit="10" stroke-width="2"/>
</svg>`
outlineStroke(strokedSVG).then(outlined => {
console.log(outlined)
})
Buffer
input:
const fs = require('fs')
const outlineStroke = require('svg-outline-stroke')
fs.readFile('./source.svg', (err, data) => {
if (err) throw err
outlineStroke(data).then(outlined => {
fs.writeFile('./dest.svg', outlined, err => {
if (err) throw err
console.log('yup, outlined!')
})
})
})
Params
The second argument accepts params
to apply directly when re-tracing the image, like fill
color of the path
, background
and so on. Take a look into potrace params
outlineStroke(strokedSVG, { color: '#bada55' }).then(outlined => {
console.log(outlined, 'Outlined SVG with #bada55 `fill` color')
})
Related
micro-outline-stroke Microservice with a public endpoint
outline-stroke-cli CLI version
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].