Skip to main content
SimilarExport ZIP
100%

Steven#Utrecht2024 TASK: SVG

✓ Published0🌍 Public
SSteven Nijman
Last edited Jul 1, 2024
Created on Jul 1, 2024

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.

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 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
79% 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
79% match
Loading thumbnail…

Steven #Utrecht2024 TASK: First steps in Svelte

This example creates an interactive bubble chart plotting life expectancy against GDP per capita, with bubble size encoding population and color distinguishing continents. It includes a tooltip that appears on hover, revealing the country name. The visualization is built with Svelte components using d3's `scaleLinear`, `scaleSqrt`, `scaleOrdinal`, and `schemeAccent` for scales, and a Voronoi overlay from `Delaunay` for efficient hover detection. Data is loaded from a CSV file and rendered as SVG circles.

SSteven Nijman
74% 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
73% 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
71% match
Loading thumbnail…

SVG and CSS

This example illustrates basic SVG shapes—circles, rectangles, lines, and a path—within a scalable group, using both inline presentation attributes and an external CSS stylesheet for styling. The code relies on the SVG markup language and CSS rules to define fills, strokes, and shape properties, with explicit color values like `red` and hex codes. A separate ES6 module, `myMessage.js`, exports a string, though the visualization itself does not render it. The rendering is entirely SVG-based, scaling the coordinate system via a transform.

Zzuzuzxz
71% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates the basic building blocks of SVG shapes in a static 960x500 scene. It draws a black-outlined circle, a yellow rectangle with a navy border, a diagonal navy line, and a black path with two segments. The SVG is embedded directly in the HTML markup, with the file named index.html. The code uses no external JavaScript visualization libraries, though the included index.js file declares a `main` function that writes an unstyled "Hello World" text into a container, but this script is not referenced or executed by the HTML document.

KKingsLanding
71% match
Loading thumbnail…

SVG ZE Starter

A minimal SVG visualization demonstrates basic shape rendering with two circles and a rectangle. The example uses the native SVG API within an HTML document, drawing a default black circle, a red circle, and a blue rectangle of specific dimensions. The code shows how to structure SVG elements directly in markup with position and size attributes, providing a template for building more complex visualizations. The rendering relies on browser-native SVG support without additional JavaScript libraries.

ZZJNEO
70% match