Skip to main content
SimilarExport ZIP
100%

Gist 280440

✓ Published0🌍 Public
CCaged
Last edited Jan 18, 2010
Created on Jan 18, 2010

This visualization demonstrates a custom hover effect for navigation links, where each link reveals a small dot marker on its left side. The effect is implemented using CSS pseudo-elements, specifically `:hover:before`, which injects the dot image via the `content` property. The dot is positioned absolutely using `top: 6px` and `left: 4px` relative to the link, and the rule applies only when the user hovers over the link. No JavaScript or data libraries are involved; the example relies purely on CSS styling. The `gistfile1.css` file contains the styling, and the dot image is loaded from an external path.

AI-generated description

Similar vizzes

Loading thumbnail…

linked-hover

Linked-hover displays two line charts drawn side by side from randomly generated data, each with 100 points. Hovering over a circle in either chart emphasizes the corresponding point in both charts by enlarging it and adding a blue stroke, while also updating the URL hash to reflect the selected index. The visualization uses D3.js v3 for SVG rendering and axes, with lodash helpers for data manipulation. The linked selection is driven by mouseover events and a shared setHover function that applies transitions to all circles, ensuring synchronized highlighting across charts.

11wheel
70% match
Loading thumbnail…

MouseOverMyColorIS

Twenty semi-transparent circles scatter randomly across an SVG canvas, each filled with a distinct color from D3’s `d3.scale.category20` palette. Hovering over any circle triggers a native browser tooltip via an appended SVG `<title>` element, displaying that circle’s specific color name. The example uses D3’s data join to bind randomly generated coordinates and radii, then appends circles and their tooltips. It demonstrates adding interactive title elements directly within D3 selections, with no additional libraries beyond the core `d3.js` script.

BBAvlino
68% match
Loading thumbnail…

Untitled

A red circle remains static until hovered, at which point it smoothly scales to twice its size. This interaction is achieved through a CSS `transition` on the `transform` property, triggered by the `:hover` pseudo-class. The example uses raw HTML and SVG within a single `index.html` file, with no external JavaScript or libraries, demonstrating a simple yet effective hover effect in a React-compatible format.

Ppratyush giri
67% match
Loading thumbnail…

181202_04_ Nice hoevering effect

A grid of colored shapes on a large SVG canvas demonstrates a hovering effect, with white rectangles and concentric circles in steel blue, blue, dark blue, yellow, and light green arranged across vertical and horizontal green and red lines. The visualization divides the viewport into a parameterized grid using D3 v5's selection API, appending paths and circles via `append`, while styling lines through CSS classes. It uses `d3.zoom` to enable interactive panning and zooming, which updates the group's transform attribute based on the zoom event.

LLudovicGouverneur
66% match
Loading thumbnail…

SVG inline only Gooey Effect

The example demonstrates a gooey effect in SVG, where multiple pairs of circles merge and separate with a smooth, organic visual transition. A clickable button triggers transformations that animate the circles’ positions, while paired goop paths dynamically generate stretched, fluid-like connections based on the distances and radii of each circle pair. Built with D3 v4, the visualization uses custom functions `goopGen` and `goopTransform` to compute path geometries, along with SVG attributes and D3’s data-binding capabilities to render the interactive animation. The code defines three circle pairs with specified coordinates and keys, all rendered in a 100x100 viewBox.

IIsaKiko
66% match
Loading thumbnail…

TestHoverNita

This example shows a single red rectangle with a blue border on an SVG canvas. When hovered, the rectangle smoothly transitions its fill to green and its stroke to black while reducing the border width, using CSS transitions over 2000 milliseconds. The page is built with React in a minimal HTML setup, though the visible interaction relies entirely on native SVG and CSS hover styling rather than JavaScript or d3 APIs. The file is authored by PierreNiberon as part of a VizHub example.

PPierreNiberon
65% match
Loading thumbnail…

Fork of SAP_SVG_FUNDAMENTALS

This example demonstrates how CSS hover effects can be applied directly to SVG elements, changing the fill color of individual rectangles when the mouse passes over them. Four black-outlined squares, defined using the SVG `<rect>` element, respond to hover with different colors (blue, red, green, gold) via CSS ID selectors. The visualization also includes a complex curved line rendered with an SVG `<path>` element, using cubic Bézier curves (C commands) to create an intricate silhouette. The code is plain HTML and CSS with no JavaScript libraries, showcasing basic SVG interactivity and styling.

Ssapan3004
65% match
Loading thumbnail…

Circles

This visualization presents a list of names as hyperlinks on a black background, accompanied by animated red and blue circles that drift and pulse. The cursor and a smaller mouse follower are custom-styled elements that respond to mouse movement, with the follower scaling in size based on a frame counter. The name list skews horizontally when the mouse moves far from the center. The implementation uses vanilla JavaScript with `requestAnimationFrame`, CSS animations with `@keyframes`, and DOM manipulation via `querySelector` and `style.transform`.

Aanniehoshi18
65% match