Aprendiendo html

100%

Aprendiendo html

✓ Published0🌍 Public

Last edited Jul 29, 2020

Created on Jul 29, 2020

This example shows a simple SVG scene titled “Aprendiendo SVG,” combining a circle, rectangle, and path within a translated group. It demonstrates basic SVG shapes and attributes like `fill`, `stroke`, and `stroke-width` directly in the markup. The HTML file links an external stylesheet (`estilos.css`) that sets page margins and heading typography. Rendering relies on inline SVG inside a 600×600 viewport, with no JavaScript libraries or data sources involved.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Learning HTML

This example shows a single static SVG composed of three circles arranged as a face-like figure, rendered directly in plain HTML. It demonstrates foundational web technologies—the SVG markup is embedded in `index.html`, with CSS setting the page margin and overflow, and no JavaScript is used. The drawing is created using primitive SVG elements, including a large magenta circle with a black stroke and two smaller stroked circles positioned as eyes, with the `fill` attribute left empty for the latter, leaving their centers transparent. The visualization is a minimal, hand-coded exercise in SVG syntax and styling.

GGRAVES1425

80% match

Loading thumbnail…

HTML Starter

This example demonstrates a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged within groups and styled with inline attributes and CSS classes. It shows how HTML structures SVG geometry with coordinates, transforms like scaling and translation, and shape-specific properties such as fill, stroke, and stroke-width. The code uses plain SVG elements directly in an HTML file, with CSS selectors like `.lines` to apply stroke styling. The rendering approach relies on the browser’s SVG engine without JavaScript libraries.

RRafael

80% match

Loading thumbnail…

SVG With HTML

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—arranged in groups with inline and CSS styling. It shows how SVG elements can be transformed using `scale` and `translate` attributes, and how CSS classes like `.lines` control stroke appearance and line joins. The code uses raw SVG markup with no external libraries, alongside a minimal HTML page and a console script that logs a message. The rendering approach relies entirely on SVG’s native coordinate system and styling properties.

Aalobry

80% match

Loading thumbnail…

SVG

This example demonstrates basic SVG shape drawing and grouping within an HTML page, using raw SVG elements such as `circle`, `rect`, `line`, and `path`. The code shows how attributes like `fill`, `stroke`, `stroke-width`, and transforms (`translate` and `scale`) affect appearance, while CSS classes style the line group and its path. Static coordinates and colors define the composition, with no data binding or interactive behavior. The page also loads a bundled script that sets text content, though the target element is not present in the HTML.

ZZhipeng Xu

79% match

Loading thumbnail…

HTML Starter

This example demonstrates a minimal SVG scene composed of basic geometric shapes—circles, rectangles, lines, and a path—rendered within an HTML page. The SVG elements use attributes and CSS classes to control fill color, stroke, and stroke width, including a nested `<g>` element that applies a translation transform. Styling is handled via an external stylesheet, which also sets page-level layout and font properties. The code relies on native SVG APIs and standard HTML/CSS, with no external libraries or data sources.

Aannoab

78% match

Loading thumbnail…

HTML CSS SVG

This example demonstrates how to draw basic SVG shapes—circle, rectangle, line, and path—within an HTML page, using CSS for styling. The SVG element is scaled and includes nested groups, with the inner group translated and filled with steel blue. JavaScript is not used; only the markup and stylesheet are presented. The CSS applies default margins, hides page overflow, and styles the path with a green stroke while the highlighted class is defined but unused.

PPioustu

78% match

Loading thumbnail…

HTML CSS SVG

This example demonstrates how SVG shapes and CSS styling combine within an HTML document. It shows circles, rectangles, lines, and a path, with some shapes grouped together and styled with attributes like fill, stroke, and stroke-width. The rendering uses raw SVG elements, while CSS classes such as `.lines` apply strokes and line joins to grouped paths. The code uses basic SVG APIs and CSS selectors to control visual properties.

Nnobbak

78% match

Loading thumbnail…

SVG Learning

This example demonstrates fundamental SVG shapes and transformations in a static scene. It displays circles, rectangles, lines, and a path, with attributes like fill, stroke, and stroke-width controlling appearance. The SVG element uses nested `<g>` groups with `scale` and `translate` transformations to position elements, while the `lines` group shows a polyline and an open path. Styling comes from inline attributes and a simple external CSS file. The code directly uses the SVG API, with no external scripting libraries.

EEdwin

78% match