Aurelia

100%

✓ Published0🌍 Public

Last edited Sep 21, 2016

Created on Sep 21, 2016

This example demonstrates interactive SVG manipulation within an Aurelia application, using an embedded heart-shaped path drawn with Inkscape. It shows mouseover and mouseout events changing the SVG fill color from green to blue while the surrounding object’s background shifts, and a click triggering an alert. The code relies on Aurelia’s event delegation (`mouseover.delegate`, `click.delegate`) and accesses the SVG document via `getSVGDocument()` to modify style properties.

AI-generated description

Similar vizzes

Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamentals of SVG rendering and interactivity using a simple heart shape drawn with SVG path commands. The heart’s geometry is defined with arcs and quadratic Bézier curves within a 100×100 viewBox, while CSS handles layout centering and a hover effect that scales the shape and changes its fill color. The code uses inline SVG elements and CSS transitions for smooth animations. It shows how basic vector graphics can be created and styled without additional libraries, relying purely on the browser’s native SVG and CSS support.

IIndranil Biswas

72% match

Loading thumbnail…

SVG fundamentals

This example demonstrates fundamental SVG shapes and CSS styling, showing a green rectangle with a thick black outline and a blue path. The code uses raw SVG elements within an HTML page, including `circle`, `path`, and `rect`, and applies CSS transitions and `:hover` pseudo-classes to animate changes in stroke color, width, and path data. The rectangle transitions from green to red over eight seconds on hover, while the path’s stroke shifts to red and its `d` attribute morphs over two seconds, illustrating basic vector graphic interactivity and styling.

Aavia62490

71% 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

70% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and styling within an HTML page, showcasing interactive hover effects that animate color changes over time. It includes a blue rectangle, a red circle, and a white vertical line, all defined directly in the markup. CSS transitions handle the smooth color shifts, such as the rectangle turning purple and the circle turning white on hover. The SVG canvas scales to full width with a fixed height, and the page uses embedded JavaScript and CSS within a minimal HTML structure, highlighting a straightforward approach to creating responsive, animated vector graphics.

Hhelloelectro

70% match

Loading thumbnail…

svg

This example shows a collection of basic SVG shapes and paths rendered directly in an HTML document. The main view displays two circles, one unfilled and one blue, alongside a rectangle with a blue outline and a blue line segment. The rectangle definition includes CSS-like hover styling and a transition property, though these interactions are not functional here. A second SVG in a separate file uses a path element with elliptical arcs and quadratic Bezier curves to draw a red abstract heart shape. The code relies solely on raw SVG markup and inline attributes to define the graphics.

Pprakashrai02

70% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates the basics of SVG shape styling and interaction, using a single red circle with a thick black stroke on a plain background. Hovering over the circle triggers a CSS transition that gradually changes its fill to green and expands its stroke width over three seconds. The implementation relies on inline SVG elements within an HTML page, styled entirely through CSS, while the accompanying JavaScript uses `select` from D3 version 7 to replace the body's text content, showing a minimal D3 setup.

Aayo

70% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and styling, including circles, a rectangle, and a line. It shows CSS-driven interactivity, where hovering over the rectangle triggers a green fill and expanded stroke width, with a smooth transition over three seconds. The code uses plain SVG elements within an HTML page, styled via CSS selectors like `rect:hover`, and relies on inline attributes such as `fill`, `stroke`, and `stroke-width`. No JavaScript or external libraries are involved; the rendering is purely static SVG with CSS transitions.

JJust-StyX

70% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates core SVG shapes—circles, rectangles, lines, paths, and arcs—along with interactive styling. It applies CSS transitions to rectangles on hover and scales paths via hover transforms, while also showing inline SVG attribute definitions and global style overrides. The code also defines radial and linear gradients with animation elements, though the accompanying `sunshine.html` contains incomplete markup and references undefined gradient IDs, making the animated scene non-functional. The primary `index.html` file serves as a static showcase of SVG fundamentals.

Ccssergio

69% match