Published
Edited
Dec 9, 2020
1 fork
5 stars
Insert cell
md`# OpentypeJS Text SVG Path Extractor`
Insert cell
// via: https://danmarshall.github.io/google-font-to-svg-path/ ... sort of
async function make(input){
const font = await opentype.load('https://fonts.gstatic.com/s/epilogue/v2/O4ZMFGj5hxF0EhjimngomvnCCtqb30OXMDLiDJXVigHPVA.ttf');
const path = font.getPath(input, 0, 150, 72);
return path
}
Insert cell
textSvg = make('Hello, World!')
Insert cell
textSvg.toPathData()
Insert cell
{
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, 200]);
svg.append('path')
.attr('d', textSvg.toPathData())
return svg.node()
}
Insert cell
opentype = require('https://bundle.run/opentype.js@1.3.3')
Insert cell
d3 = require("d3@6")
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more