{"version":"1.0","type":"rich","title":"Smiley with Vue 3","description":"This example builds a simple smiley face using SVG elements, with its eyes positioned dynamically based on computed properties. The face itself is drawn with a yellow circle and two black eye circles, while the center coordinates and eye offset are defined in the Vue 3 data model. Computed properties, such as `leftEyePos` and `rightEyePos`, calculate the eye positions from the central X coordinate and offset, and the Vue template binds these values to the `cx` attributes of the eye circles. The example demonstrates Vue 3’s declarative rendering with an inline import map pulling the library from unpkg, and the entire scene is rendered as raw SVG within the HTML body.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/c2228dd98ea34d0cad6f73df2487f572?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}