Skip to content

Instantly share code, notes, and snippets.

@trovster
Created June 11, 2022 20:54
Show Gist options
  • Save trovster/3b00417dfb1bcc6d6c24430667e0e396 to your computer and use it in GitHub Desktop.
Save trovster/3b00417dfb1bcc6d6c24430667e0e396 to your computer and use it in GitHub Desktop.
Using shrhdk/text-to-svg to convert "TM" to SVG paths, using font and multiple colours.
const TextToSVG = require('text-to-svg')
const textToSVG = TextToSVG.loadSync('fonts/Inter.woff')
const colours = Object.values({
blue: '#2490BA',
pink: '#d60058',
purple: '#5f01ad',
green: '#048242',
orange: '#e87204'
}).reverse()
const offset = 15
const colour = colours[Math.floor(Math.random() * colours.length)]
const attributes = { fill: colour }
const options = { fontSize: 450, y: 640, fontWeight: '900', anchor: 'center middle', attributes: attributes }
colours.forEach(function (colour, index) {
const t = textToSVG.getSVG('T', {
...options,
x: 330 + (offset * index),
y: 640 - (offset * index),
attributes: {
...attributes,
fill: colour
}
}).replace(
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="245.25" height="450">',
''
).replace('</svg>', '')
const m = textToSVG.getSVG('M', {
...options,
x: 650 + (offset * index),
y: 640 - (offset * index),
attributes: {
...attributes,
fill: colour
}
}).replace(
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="371.25" height="450">',
''
).replace('</svg>', '')
console.log(t, m)
})
Display the source blob
Display the rendered blob
Raw
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1039 1189">
<path fill="#e87204" d="M211.88 525.70L211.88 447.85L448.13 447.85L448.13 525.70L370.27 525.70L370.27 762.85L289.73 762.85L289.73 525.70L211.88 525.70Z"/> <path fill="#e87204" d="M649.77 582.40L730.33 447.85L810.42 447.85L810.42 762.85L730.33 762.85L730.33 593.20L653.83 719.65L645.73 719.65L569.67 593.65L569.67 762.85L489.13 762.85L489.13 447.85L569.67 447.85L649.77 582.40Z"/>
<path fill="#048242" d="M226.88 510.70L226.88 432.85L463.13 432.85L463.13 510.70L385.27 510.70L385.27 747.85L304.73 747.85L304.73 510.70L226.88 510.70Z"/> <path fill="#048242" d="M664.77 567.40L745.33 432.85L825.42 432.85L825.42 747.85L745.33 747.85L745.33 578.20L668.83 704.65L660.73 704.65L584.67 578.65L584.67 747.85L504.13 747.85L504.13 432.85L584.67 432.85L664.77 567.40Z"/>
<path fill="#5f01ad" d="M241.88 495.70L241.88 417.85L478.13 417.85L478.13 495.70L400.27 495.70L400.27 732.85L319.73 732.85L319.73 495.70L241.88 495.70Z"/> <path fill="#5f01ad" d="M679.77 552.40L760.33 417.85L840.42 417.85L840.42 732.85L760.33 732.85L760.33 563.20L683.83 689.65L675.73 689.65L599.67 563.65L599.67 732.85L519.13 732.85L519.13 417.85L599.67 417.85L679.77 552.40Z"/>
<path fill="#d60058" d="M256.88 480.70L256.88 402.85L493.13 402.85L493.13 480.70L415.27 480.70L415.27 717.85L334.73 717.85L334.73 480.70L256.88 480.70Z"/> <path fill="#d60058" d="M694.77 537.40L775.33 402.85L855.42 402.85L855.42 717.85L775.33 717.85L775.33 548.20L698.83 674.65L690.73 674.65L614.67 548.65L614.67 717.85L534.13 717.85L534.13 402.85L614.67 402.85L694.77 537.40Z"/>
<path fill="#2490BA" d="M271.88 465.70L271.88 387.85L508.13 387.85L508.13 465.70L430.27 465.70L430.27 702.85L349.73 702.85L349.73 465.70L271.88 465.70Z"/> <path fill="#2490BA" d="M709.77 522.40L790.33 387.85L870.42 387.85L870.42 702.85L790.33 702.85L790.33 533.20L713.83 659.65L705.73 659.65L629.67 533.65L629.67 702.85L549.13 702.85L549.13 387.85L629.67 387.85L709.77 522.40Z"/>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment