Skip to main content
SimilarExport ZIP
100%

responsive do you feel the heat tablet

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

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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
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…

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
82% 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
82% 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
76% 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
75% 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
73% match
Loading thumbnail…

test css

This example demonstrates responsive scaling of an inline SVG graphic and an embedded iframe using CSS media queries. The SVG text element, styled with the Roboto font, is paired with an absolute-positioned iframe that sits behind it. Through breakpoints at various viewport widths, the code adjusts the SVG’s width and padding, along with the iframe’s dimensions, to maintain a consistent layout. It uses plain HTML, CSS, and inline SVG, with no external JavaScript libraries or data sources.

Ssirenajbpearl@gmail.com
71% match