Skip to main content
SimilarExport ZIP
100%

SaraMaria - Fork of #Utrecht2024 TASK: SVG

✓ Published0🌍 Public
Ssam.jumphouses@gmail.com
Last edited Jul 1, 2024
Created on Jul 1, 2024

A smiley face rendered in SVG features two brown circles with white highlights as eyes, while a red bezier curve beneath them animates between a curved smile and a single point, creating a winking effect. The Svelte component draws directly in the SVG markup, with the path’s animation driven by SMIL’s `<animate>` element, cycling through the `d` attribute values. The simple composition uses basic shapes and a looping transition.

AI-generated description

Task

Draw a smiley with SVG.

Or try to reproduce the following, probably familiar, image by Dick Bruna.

<img src="https://higsch.com/workshop/svelte-d3-utrecht/miffy.png" /> <br /><br /><br />

Or this one by Marlow Moss (exhibited in the Centraal Museum, Utrecht).

<img src="https://higsch.com/workshop/svelte-d3-utrecht/marlow-moss.png" />
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of #Utrecht2024 TASK: SVG

This fork of the Utrecht 2024 task renders a simple smiley face inside a 500 by 500 SVG canvas. The face is constructed from primitive shapes—two eyes with pupils, eyelashes, a nose, and red lips—all drawn using SVG `circle`, `line`, `path`, and `g` elements. A `transform` attribute groups and scales the facial features, while a lightblue border and rounded corners frame the canvas. The Svelte component, named `App.svelte`, uses no external data or D3 library, relying purely on static SVG markup and CSS for layout.

SSarah C Gall
86% match
Loading thumbnail…

Fork of #Utrecht2024 TASK: SVG

A smiling face is rendered as a static SVG composition, depicting two eyes, a curved mouth, and two rotated, mirrored pink shapes that suggest hair or decorative elements on a blank canvas. The visualization is built using the Svelte framework and relies on the SVG specification for its vector graphics output. The code defines the shapes using SVG elements like `<circle>`, `<path>`, and `<g>` with specific `d` attributes for the paths, and it uses `transform` attributes to rotate and translate the decorative components around a central point.

Kk.hurskaya@gmail.com
81% match
Loading thumbnail…

Fork of #Utrecht2024 TASK: SVG

This example renders a blank SVG canvas with a light blue border, ready for drawing a smiley face or reproducing artworks inspired by Dick Bruna or Marlow Moss. The code uses Svelte's component structure with a minimal `<script>` tag and an empty `<svg>` element sized at 500x500 pixels. Styling centers the SVG on the page with flexbox and applies a rounded border. While the visualization currently displays no graphical content, it demonstrates a basic Svelte setup for SVG-based drawing tasks, with d3 available as a dependency.

SSebastian Graeff
77% match
Loading thumbnail…

Fork of Smile

A yellow circle face with eyes, eyebrows, and a mouth forms a static smiley, but the right eyebrow performs a brief animated wink-like movement before settling back. The SVG is drawn using D3 v5 selections and the `arc` generator for the mouth path, with transitions applied to the eyebrow's vertical position over two timed stages. The face is centered at 960 by 500 pixels, using pure SVG shapes without any external data.

Mmukundakrishna.r@gmail.com
74% match
Loading thumbnail…

Fork of homework smiley face

This SVG visualization shows a stylized smiley face centered on a 960-by-500 canvas. The face is constructed from a large circle for the head, two smaller circles for eyes with green and purple pupils, and an arc for the mouth. Additional line elements form eyebrows and short hair-like strokes at the top, all rendered with heavy black strokes. Built with React and D3 v7, the code uses the `arc()` API to generate the mouth path and relies on SVG primitives for all shapes, with the entire composition translated to the canvas center via a `transform` group.

SSaiSree0122
73% match
Loading thumbnail…

svg smile

A cheerful cartoon face appears as a yellow circle with black outline, two black eyes, and white pupils that shift side to side before settling. The mouth is drawn as an arc path using the d3 `arc()` helper with specified inner and outer radii. Built with d3 v5, the visualization renders entirely in SVG and uses chained `transition().duration()` calls to animate the pupils horizontally across each eye. The code selects elements with d3’s `select`, appends shapes with `attr`, and relies on the `arc` generator to create the curved smile.

Ssivakaman
73% match
Loading thumbnail…

Sara Maria - Fork 2 of #Utrecht2024 TASK: First steps in Svelte

This scatterplot shows the relationship between GDP per capita and life expectancy across countries, with bubble size encoding population and color distinguishing continents. It renders each country as a circle positioned by linear x and y scales, while a square-root scale maps population to radius and an ordinal scale assigns continent colors. Built with Svelte and D3, the visualization imports CSV data, converts string values with `autoType`, and renders SVG circles through a reusable `Datapoint` component featuring radial gradient definitions.

Ssam.jumphouses@gmail.com
72% match
Loading thumbnail…

Smile

A yellow circle face with black eyes and animated eyebrows renders as an SVG in D3 v5. The code uses `select`, `arc`, and chained `transition` calls to lower and raise the rectangular brows over two seconds. A mouth path built from an arc with reversed inner and outer radii completes the expression. The static image shows a cheerful face, while the eyebrow animation adds a dynamic, playful smile effect.

BBeeehive
72% match