Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Smiley with Vue 3

Public visualization

Viewing a saved revision (read-only)

448a85e321724649a71bcef1797e0c9c

Smiley with Vue 3

0 stars0🌍 Public
BBenisson
Last edited Jan 3, 2023
Created on Jan 3, 2023
Forked from Hello HTML

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.

AI-generated description

Halfway through