Skip to main content
SimilarExport ZIP
100%

Fork of #Utrecht2024 TASK: SVG

✓ Published0🌍 Public
SSebastian Graeff
Last edited Jul 1, 2024
Created on Jul 1, 2024

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.

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
89% 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
89% 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
87% 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…

example fork

This example demonstrates a minimal Svelte visualization that creates a blank SVG canvas with d3.select, setting its width and height to match the container’s client dimensions. It applies a semi-transparent gray background style via the selection’s attr and style methods. The code, authored by LikithaRatna under an MIT license, uses the d3 library (version 7.8.5) to render an empty, static SVG element, serving as a starting point for customizing themes or adding interactive circles. The included README suggests forking the example and modifying it for creative variations.

Rratnach@outlook.com
76% match
Loading thumbnail…

Fork of Hello HTML

This example draws a simple smiley face using Scalable Vector Graphics (SVG). It shows a large blue circle outlined in green for the face, with two smaller green circles serving as eyes. The drawing is rendered directly within an HTML page using inline SVG elements. The code sets the SVG canvas to 960 by 500 pixels and positions the circles using explicit x and y coordinates. The page uses minimal CSS styling to remove margins and hide overflow, and the approach is purely declarative, relying on the SVG markup rather than any JavaScript libraries or external data sources.

Sseanmdalrymple@protonmail.com
75% match
Loading thumbnail…

Fork of Hello HTML

This example renders a static SVG smiley face, composed of a large yellow circle with two smaller black circles for eyes, using nothing but an HTML page and inline SVG markup. The visualization demonstrates how raw SVG elements—`<svg>`, `<circle>`, and presentation attributes like `fill`, `stroke`, and `r`—can be used directly without any JavaScript libraries. The code sets a fixed viewport of 960 by 500 pixels and positions each shape explicitly via `cx` and `cy` coordinates. The page is a minimal fork of the classic “Hello HTML” template, showing a hand-coded shape as a starting point for SVG-based data art.

MMushraf Altaf
75% match