Atari Vector Text in Vue

by Admiral Potato

HTML

<script src="https://empty-guitar.glitch.me/vector-text-data.js"></script>
<script src="https://empty-guitar.glitch.me/vector-text.js"></script>
<div id="target"></div>

CSS

svg{
  background-color: #000;
}
svg * {
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-width: 0.5vmin;
}
.vector-text{
  fill: transparent;
  stroke: #80f;
}

JavaScript

window.Vue.component('vector-text-defs', window.vectorTextDefsComponent)
window.Vue.component('vector-text', window.vectorTextComponent)

var app = new Vue({
	el: '#target',
  template: `
    <svg viewBox="-1 -1 2 2">
    	<vector-text-defs />
    	<vector-text text="This text is\nSooooo Good!" />
    </svg>
	`
})