Skip to main content
SimilarExport ZIP
100%

#Utrecht2024 TASK: SVG

• Draft7🔗 Unlisted
MMatthias Stahl
Last edited Jun 30, 2024
Created on Jun 30, 2024
Forked from #Utrecht2024: SVG

An empty SVG canvas framed in light blue invites the viewer to complete the task: a simple smiley face. The Svelte component renders a 500 by 500 pixel SVG element with no graphic content, leaving the drawing entirely to the user. This minimal setup uses Svelte's component structure and SVG markup, with no data binding or D3 logic, serving as a blank starting point for the visualization gallery's exercise.

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 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
89% match
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
87% 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
84% match
Loading thumbnail…

Fork of #Utrecht2024 TASK: SVG

This example presents a minimalist abstract composition inspired by the works of Dick Bruna and Marlow Moss, featuring black-outlined rectangles, a blue square, a black rectangle, and a central yellow square arranged on a white canvas. Rendered as a static SVG using Svelte, the code defines geometric shapes with `<rect>` elements, applying translations and explicit coordinate attributes to position each form precisely. The visualization demonstrates how basic vector primitives can construct a balanced, color-blocked image without interactivity or data binding.

Kkatha.hofbauer@t-online.de
83% match
Loading thumbnail…

#Utrecht2024: SVG

This example demonstrates basic SVG shape rendering using Svelte, showing circles, a rounded rectangle, and a triangular path with a rotation transform. The visualization features overlapping coral circles with opacity, a black rounded rectangle, and a pink triangle with a blue stroke, all composed within a bordered 500x500 SVG canvas. The code uses native SVG elements directly in a Svelte component, with the d3 library available as a dependency but not utilized in the visual output. Styling centers the graphic and adds a black border with rounded corners to the SVG container.

MMatthias Stahl
82% match
Loading thumbnail…

Steven#Utrecht2024 TASK: SVG

A minimalist SVG drawing features a single continuous black path that outlines a stylized shape resembling the letter "Z" or a geometric composition, rendered on a 500x500 canvas. The path uses explicit coordinate commands (`M`, `L`) to create angular segments, with a thick stroke and white fill. Built with Svelte and the d3 library available in the environment, the example demonstrates how to construct basic vector graphics programmatically. The code is displayed within a bordered, rounded container, showcasing a simple yet precise exercise in SVG path syntax.

SSteven Nijman
79% match
Loading thumbnail…

SaraMaria - Fork of #Utrecht2024 TASK: SVG

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.

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

SVG Fundamentals

This example demonstrates a minimal smiley face constructed from basic SVG elements, including circles for the face, eyes, and a stroke outline in yellow and black. The code shows how raw SVG markup in an HTML file can render static vector graphics without any external libraries. It uses standard SVG APIs for shapes and styling, with the face centered at (480, 250) within a 960×450 viewport. A small console.log statement in the script tag reveals basic JavaScript integration, but the visualization itself relies purely on SVG’s declarative rendering.

EEmnaAbbes
73% match