Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
BBhumika Srinivas
Last edited Feb 2, 2022
Created on Feb 1, 2022
Forked from HTML Starter

This example renders a static yellow rectangle on a gray canvas using the p5.js library. The sketch creates a 500 by 500 pixel drawing surface and draws a single filled shape with a fixed position and size. It loads a chocolate ratings dataset from a CSV file but does not visualize the data. The code uses p5.js functions including `createCanvas`, `background`, `fill`, and `rect` in the `setup` and `draw` methods.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example showcases a simple static shape: a yellow rectangle positioned on an SVG canvas. The HTML file directly embeds an SVG element with a width and height of 960 by 500 pixels, and the rectangle is drawn at the specified coordinates with a defined width and height. The rendering relies on SVG’s native `rect` element, styled with a yellow fill and a black stroke, demonstrating basic vector graphics within an HTML page without any dynamic behavior or data source.

Aankxxit
81% match
Loading thumbnail…

Untitled

This example shows a single large yellow circle with a black outline centered on an SVG canvas, rendered at 960 by 500 pixels. The circle is drawn using a React component that directly outputs SVG markup, with its position and radius set via the `cx`, `cy`, and `r` attributes. The code relies on React and ReactDOM to mount the SVG into the page’s root element, while the circle’s fill, stroke, and stroke width are specified as SVG presentation attributes. No data source or interaction is present beyond the static shape.

NNuman Shabir
76% match
Loading thumbnail…

Untitled

This example renders a static yellow circle with two black circular eyes on an SVG canvas, mimicking a simple face. The visualization is built using React 17, with the outer shape and facial features defined directly as SVG circle elements. The page loads React from a CDN and logs the imported React object to the console, though no dynamic state or interactivity is implemented. The drawing is purely declarative, using fixed coordinates and radii for each shape.

EEUHaq
76% match
Loading thumbnail…

Untitled

This example presents a minimal canvas-based visualization that renders a blank drawing surface within an HTML page. The code combines D3 v6 for potential data-driven operations, jQuery for DOM manipulation, and Papa Parse for CSV parsing, though no actual data or visual elements are drawn. The canvas element is set to 200 by 100 pixels and displays the default white background, with a commented-out color property suggesting incomplete styling. The page loads the D3 library from a CDN and includes a separate Papaparse script reference, indicating readiness for future data loading and rendering tasks.

SSMIT9102
75% match
Loading thumbnail…

p5.js example

This example displays a static red canvas with a single black ellipse at its center. The page is built with a minimal HTML structure and styled with CSS to remove default margins and padding. The sketch uses the p5.js library, specifically the `createCanvas`, `background`, and `ellipse` functions within the `setup` and `draw` calls. The code currently contains commented-out sections for loading and processing CSV data, but they are not active in this version.

BBhumika Srinivas
75% match
Loading thumbnail…

p5.js example

This example displays a simple animated scene where a yellow circle moves horizontally across an 800×500 canvas. It uses the p5.js library, loading it via CDN and the `createCanvas()` and `draw()` functions, with the circle’s x-position incremented each frame and reset when it exits the screen. The sketch sets a gray background and draws the moving shape using p5.js’s `background()` and `circle()` methods, demonstrating basic animation and state management in a blank HTML page with a "Hello!" message.

AAlark Joshi
75% match
Loading thumbnail…

Untitled

This visualization demonstrates a simple HTML page that displays the text “Hello HTML!” in large, centered type. Built using plain HTML and CSS, it loads the p5.js library and a separate sketch file, although no p5.js drawing or CSV data loading is actively implemented in the displayed output. The example serves as a minimal starter template for integrating p5.js into a React-based project, with the main visual being a static styled message.

SSimon Hackbert
75% match
Loading thumbnail…

Untitled

A yellow circle with a black outline dominates the center of a 960-by-500 SVG canvas, flanked by two smaller unfilled circles positioned symmetrically above its midpoint. The visualization uses React 18.2.0 via the UMD production build, though no React components are defined; instead, static SVG elements are placed directly in the markup. The code sets the body overflow to hidden and logs "jello" to the console, while an external stylesheet specifies a 2em font size. The chart shows only primitive geometric shapes with no data binding or interaction.

AadnaneAkk
75% match