Skip to main content
SimilarExport ZIP
100%

responsive do you feel the heat

✓ Published2🌍 Public
Ssirenajbpearl@gmail.com
Last edited Aug 4, 2024
Created on Aug 4, 2024

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.

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

responsive do you feel the heat tablet

This example shows a responsive SVG title graphic with the text "do you feel the heat" overlaid on a gradient-filled bar, designed to adapt to various screen widths. The visualization uses CSS media queries to adjust the SVG's width and padding, along with an iframe for the backdrop, ensuring the layout fits mobile and desktop viewports. The SVG defines a linear gradient that transitions through multiple colors, from white to yellow, orange, pink, purple, and dark blue, while the text uses the Myriad Pro font family. The code relies on standard HTML, CSS, and inline SVG elements without any external JavaScript libraries.

Ssirenajbpearl@gmail.com
88% 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
87% 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
85% 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…

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

Fork of Fork of HTML Starter

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.

Ssirenajbpearl@gmail.com
79% match