How to use the roughjs/dist/rough.umd.svg function in roughjs
To help you get started, we’ve selected a few roughjs examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
jwilber / roughViz / src / Line.js View on Github 
initRoughObjects() {
this.roughSvg = document.getElementById(this.roughId);
this.rcAxis = rough.svg(this.roughSvg,
{options: {
strokeWidth: this.axisStrokeWidth,
roughness: this.axisRoughness,
},
});
this.rc = rough.svg(this.roughSvg, {
options: {
// fill: this.color,
stroke: this.stroke === 'none' ? undefined : this.stroke,
strokeWidth: this.strokeWidth,
roughness: this.roughness,
bowing: this.bowing,
fillStyle: this.fillStyle,
},
});
}initRoughObjects() {
this.roughSvg = document.getElementById(this.roughId);
this.rcAxis = rough.svg(this.roughSvg,
{options: {
strokeWidth: this.axisStrokeWidth,
roughness: this.axisRoughness,
},
});
this.rc = rough.svg(this.roughSvg, {
options: {
// fill: this.color,
stroke: this.stroke === 'none' ? undefined : this.stroke,
strokeWidth: this.innerStrokeWidth,
roughness: this.roughness,
bowing: this.bowing,
fillStyle: this.fillStyle,
},
});
}React.useEffect(() => {
setValue({
root: ref.current,
rough: roughjs.svg(ref.current, props.config),
})
}, [ref.current, config])
return (initRoughObjects() {
this.roughSvg = document.getElementById(this.roughId);
this.rcAxis = rough.svg(this.roughSvg,
{options: {
strokeWidth: this.axisStrokeWidth,
roughness: this.axisRoughness,
},
});
this.rc = rough.svg(this.roughSvg, {
options: {
fill: this.color,
stroke: this.stroke === 'none' ? undefined : this.stroke,
strokeWidth: this.innerStrokeWidth,
roughness: this.roughness,
bowing: this.bowing,
fillStyle: this.fillStyle,
},
});
}initRoughObjects() {
this.roughSvg = document.getElementById(this.roughId);
this.rcAxis = rough.svg(this.roughSvg,
{options: {
strokeWidth: this.axisStrokeWidth,
roughness: this.axisRoughness,
},
});
this.rc = rough.svg(this.roughSvg, {
options: {
fill: this.color,
stroke: this.stroke === 'none' ? undefined : this.stroke,
strokeWidth: this.innerStrokeWidth,
roughness: this.roughness,
bowing: this.bowing,
fillStyle: this.fillStyle,
},
});
}initRoughObjects() {
this.roughSvg = document.getElementById(this.roughId);
this.rcAxis = rough.svg(this.roughSvg,
{options: {
strokeWidth: this.axisStrokeWidth,
roughness: this.axisRoughness,
},
});
this.rc = rough.svg(this.roughSvg, {
options: {
fill: this.color,
stroke: this.stroke === 'none' ? undefined : this.stroke,
strokeWidth: this.innerStrokeWidth,
roughness: this.roughness,
bowing: this.bowing,
fillStyle: this.fillStyle,
},
});
}initRoughObjects() {
this.roughSvg = document.getElementById(this.roughId);
this.rcAxis = rough.svg(this.roughSvg, {options:
{strokeWidth: this.strokeWidth >= 3 ? 3 : this.strokeWidth},
});
this.rc = rough.svg(this.roughSvg, {
options: {
fill: this.color,
strokeWidth: this.innerStrokeWidth,
roughness: this.roughness,
bowing: this.bowing,
fillStyle: this.fillStyle,
},
});
}initRoughObjects() {
this.roughSvg = document.getElementById(this.roughId);
this.rcAxis = rough.svg(this.roughSvg,
{options: {
strokeWidth: this.axisStrokeWidth,
roughness: this.axisRoughness,
},
});
this.rc = rough.svg(this.roughSvg, {
options: {
fill: this.color,
stroke: this.stroke === 'none' ? undefined : this.stroke,
strokeWidth: this.innerStrokeWidth,
roughness: this.roughness,
bowing: this.bowing,
fillStyle: this.fillStyle,
},
});
}initRoughObjects() {
this.roughSvg = document.getElementById(this.roughId);
this.rcAxis = rough.svg(this.roughSvg, {options:
{strokeWidth: this.strokeWidth >= 3 ? 3 : this.strokeWidth},
});
this.rc = rough.svg(this.roughSvg, {
options: {
fill: this.color,
strokeWidth: this.innerStrokeWidth,
roughness: this.roughness,
bowing: this.bowing,
fillStyle: this.fillStyle,
},
});
}roughjs
Create graphics using HTML Canvas or SVG with a hand-drawn, sketchy, appearance.
