This simple example uses [Vue 3]((https://v3.vuejs.org/) to draw a specified number of colorful circles at random positions, radii & colors. It demonstrates the use of settings in a Vue 3 context.
template.yml
has a setting for the number of circlessrc/main.js
sets up thedata
andstate
objects as well as thedraw()
andupdate()
functions that are required in a Flourish template- In
src/App.vue
an SVG is created that draws the specified number of circles with randomized positions, radii & colors that animate in & out as you change the number of circles
- Install Flourish and use
flourish run
to run the template - More info about publishing a template to Flourish can be found here