sample svg with 2 "layers"

100%

sample svg with 2 "layers"

✓ Published0🌍 Public

Last edited Dec 6, 2019

Created on Dec 6, 2019

This example shows two text labels, "layer 1" and "layer 2," positioned on an SVG canvas to demonstrate the use of separate group elements for organizing distinct layers. The SVG is rendered with explicit `<g>` tags, each containing a `<text>` element styled with Times New Roman and centered anchor points. The file uses standard SVG APIs, including `viewBox`, `width`, `height`, and inline presentation attributes for font size, fill, and stroke. It is a simple static illustration of layer-based structuring in SVG, with no interactive or dynamic behavior, and the data source is the hand-authored markup itself.

AI-generated description

Similar vizzes

Loading thumbnail…

SVG GROUPS

This example demonstrates how SVG group elements organize and apply shared styling in a D3.js visualization. The code creates a 400-by-400 pixel SVG canvas using d3.select and appends a dark gray rectangle as background. A group (`svg:g`) is then added, containing an orange circle and a large text label, while a second, smaller white text element is appended directly to the canvas outside any group. The visualization relies on d3.v2’s SVG manipulation methods, including `append`, `attr`, and `style`, to show that group-level attributes affect all child elements, whereas ungrouped elements require individual property assignments.

Aanotherjavadude

72% match

Loading thumbnail…

SVG

This example demonstrates layering SVG elements—circles, rectangles, lines, and paths—on a 960x500 canvas, with a large background rect, a horizontal rule, and a complex text path rendered as a filled path. It shows how React integrates with SVG for declarative shape composition, using inline attributes for positioning and styling. The code includes path data for a stylized character and additional white rects, illustrating basic geometric placement without external libraries.

KKj

71% match

Loading thumbnail…

Gist b76b24130b07da4646bdae5db5ec862f

This example shows a static SVG composition of five basic geometric shapes and a text label. It demonstrates fundamental SVG rendering with a green rectangle, red circle, grey ellipse, blue line, and orange text reading "Hello World" on a 400 by 60 canvas. The code uses native SVG elements directly within an HTML file, with styling applied through presentation attributes like `fill`, `stroke`, and `font-size`. No JavaScript libraries or data sources are involved; the visualization relies solely on declarative SVG markup.

Aadamjanes

71% match

Loading thumbnail…

Text example

A single SVG text element renders the word "Hello" centered on a 960×500 canvas, demonstrating basic SVG text placement and styling. The text uses 72-pixel Share Tech font, loaded via Google Fonts, and is positioned using the `x="50%"` and `y="50%"` attributes. The minimal example shows how CSS sets the font family and hides overflow, while the SVG itself handles the centered layout without JavaScript or data binding.

Ggianlucaguerra

71% match

Loading thumbnail…

text example

This example demonstrates basic SVG text placement and shape rendering using D3 v4. It positions three text elements with different anchor alignments (start, middle, end) along a horizontal line, showing how the `dx` and `text-anchor` attributes affect text positioning. A polyline traces a jagged path across the canvas, and a circular dot with a lime-green stroke and Indian Red fill uses CSS hover effects to expand its radius and stroke width. The visualization uses D3's selection methods to append elements to an SVG container, with styling applied through inline attributes and CSS classes.

335degrees

70% match

Loading thumbnail…

text example

This example demonstrates how SVG text elements can be positioned and anchored in different ways within a D3 v4 visualization. It shows three text strings placed at the same x-coordinate but with distinct text-anchor values (start, middle, end) and dx offsets, illustrating how alignment affects placement relative to the anchor point. The code also includes a simple circle with a CSS class that applies a hover effect, increasing its radius and stroke width. Using D3's selection and append methods, the visualization creates an SVG canvas and populates it with static text and a single interactive dot.

335degrees

69% match

Loading thumbnail…

block with text

This example demonstrates two labeled rectangles, one red and one blue, each with a corresponding text caption. It shows how static shapes and text can be placed side-by-side in an SVG canvas using D3.js v4. The code selects the body element, appends an SVG container, and uses `append('rect')` to draw each rectangle with explicit `x`, `y`, `width`, and `height` attributes, while `append('text')` adds monospace labels. The positions are calculated manually with variables, and styling is applied via `.style('fill', ...)`. No data loading or dynamic scales are involved, relying solely on hardcoded values.

IIgathi

69% match

Loading thumbnail…

SVG Me

This example displays two concentric circles rendered directly inside an HTML page using pure SVG. A large blue circle with an orange stroke and a smaller red circle with a teal stroke are positioned together to create a simple layered composition. The code relies on inline SVG markup with standard attributes such as `cx`, `cy`, `r`, and `stroke-width`, avoiding any JavaScript or external libraries. The shape definitions are written directly in the `index.html` file, demonstrating how vector graphics can be embedded without additional frameworks.

Wwgloss

69% match