Skip to main content
SimilarExport ZIP
100%

Fork of Fork of HTML Starter

✓ Published1🌍 Public
Ssirenajbpearl@gmail.com
Last edited Aug 3, 2024
Created on Aug 3, 2024

This visualization presents a minimal embedded Observable notebook within an HTML page, using an SVG graphic to display a simple heat-level indicator. The SVG shows a gradient bar marked with the number “1” on the left, “5” on the right, and the text “DO YOU FEEL THE HEAT?” centered above a line. The page uses CSS via Google Fonts for Roboto typography and includes an iframe that loads an Observable notebook cell, leveraging the Observable runtime for interactive content. The SVG is hand-authored with inline styles and defs, while the embedded iframe handles the interactive data.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This example visualizes a survey-like question, "DO YOU FEEL THE HEAT?", presented as a horizontal gradient bar with numeric endpoints (1 to 5) and a central line marker. The SVG drawing uses embedded CSS classes and a linear gradient definition to style the graphic. The visualization is embedded in an HTML page that also loads a Roboto font and an external Observable notebook iframe. The rendering relies on SVG elements like `<rect>`, `<line>`, and `<text>` with custom styling, while the iframe fetches data from Observable. The static SVG structure is fixed, with no interactive or dynamic behavior.

Ssirenajbpearl@gmail.com
88% match
Loading thumbnail…

Fork of responsive do you feel the heat tablet

This visualization presents a simple question—"DO YOU FEEL THE HEAT?"—as a horizontal gradient bar ranging from 1 to 5, overlaid with white tick marks and a line chart-like annotation. The code embeds an Observable notebook iframe alongside an inline SVG, using CSS media queries for responsive sizing. The SVG applies a linear gradient from white through yellow, orange, pink, and purple to dark blue, with text rendered in the Myriad Pro font. The implementation uses plain HTML, CSS, and SVG, with no external JavaScript libraries.

Ssirenajbpearl@gmail.com
85% match
Loading thumbnail…

Fork of responsive do you feel the heat tablet

This example shows a short text prompt (“DO YOU FEEL THE HEAT?”) overlaid on a horizontal gradient bar, with numeric endpoints 1 and 5, and thin white lines marking a segment of the scale. The visualization compares the prompt against an embedded Observable notebook, likely for temperature-related data. The SVG is rendered with React and plain HTML/CSS, using a linear gradient defined in SVG defs and Roboto font styling. It demonstrates responsive sizing via CSS media queries, pulling an external iframe from Observablehq.com to display the underlying interactive chart.

Ssirenajbpearl@gmail.com
84% match
Loading thumbnail…

Fork of do you feel the heat2

This example presents a minimal HTML page that displays a stylized question, "DO YOU FEEL THE HEAT?", alongside a numeric scale ranging from 1 to 5. The visualization incorporates a linear gradient bar and simple line elements to suggest a color or intensity scale. The page is structured as an SVG graphic with embedded CSS for styling text, using the Roboto font. The layout includes an iframe that embeds an external Observable notebook, integrating interactive content alongside the static SVG elements within the same page.

Ssirenajbpearl@gmail.com
84% match
Loading thumbnail…

Fork of Fork of do you feel the heat2

This visualization presents a minimalist color scale and typographic poster asking “DO YOU FEEL THE HEAT?” within an SVG rendered via React. The scale uses a linear gradient from white through yellow, orange, pink, purple, and blue, labeled with endpoints 1 and 5, flanked by thin white lines. The text and gradient are drawn directly in SVG markup, styled with CSS using the Roboto font. An embedded iframe loads an Observable notebook cell, suggesting additional interactive heat mapping content.

Ssirenajbpearl@gmail.com
83% match
Loading thumbnail…

responsive do you feel the heat

This responsive visualization uses an embedded Observable notebook to explore a color gradient that transitions from white through yellow, orange, pink, and purple. The SVG layout displays a linear gradient bar with scale numbers from 1 to 5 and the question "DO YOU FEEL THE HEAT?" centered above. CSS media queries adjust the SVG and iframe dimensions for tablet and mobile screens. The code relies on SVG elements, CSS styling with Roboto and Myriad Pro fonts, and an iframe embedding an Observable cell for content.

Ssirenajbpearl@gmail.com
79% match
Loading thumbnail…

Fork of HTML Starter

This example displays a decorative SVG illustration composed of an abstract background, scattered circular points, and text elements rendered in the Roboto font. The visualization uses static SVG shapes with CSS styling for gradients, stroke effects, and typography. The code defines a hidden iframe positioned behind the graphic and applies font loading via Google Fonts API. The SVG includes a linear gradient with multiple color stops, various styled shapes, and text elements, all hardcoded within the HTML structure using inline SVG markup.

Ssirenajbpearl@gmail.com
78% match
Loading thumbnail…

do you feel the heat

This example presents a minimalist, typographic visualization titled "DO YOU FEEL THE HEAT?" rendered as an SVG graphic. It displays a horizontal gradient bar alongside a scale from 1 to 5, framed by black and white lines. The design uses embedded CSS for styling and relies on the Roboto font. The visualization is embedded within an HTML page that also incorporates an iframe linking to an Observable notebook, suggesting an interactive component despite the static SVG core.

Ssirenajbpearl@gmail.com
78% match