Border Animation

100%

Border Animation

✓ Published1🌍 Public

Last edited Sep 27, 2022

Created on Sep 27, 2022

This example demonstrates a dynamic, organic border using CSS animations. A white, irregularly-shaped blob continuously morphs through different border-radius configurations, including a perfect circle at the midpoint, before shifting to a yellow hue. The animation is driven by the `borderrr` keyframes within the stylesheet. The page uses a minimal HTML structure with an SVG element and a `bundle.js` script, though the primary visual effect is achieved through pure CSS, not JavaScript or D3. The code references D3 v5 via CDN but the actual animation relies on CSS `@keyframes` and the `border-radius` property.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Animate

This example shows a single yellow rectangle centered on a gray SVG canvas, dynamically resizing and skewing through a looping animation against a pink page background. The rectangle’s fill, stroke, and dimensions transition smoothly via CSS transitions, while a keyframe animation named `grow` drives its scale and skew transformations. The code uses plain HTML, CSS, and JavaScript, with the SVG rendered directly in the markup and styled through embedded styles.

AAlim Bolar

74% match

Loading thumbnail…

Page ROller

This example shows a looping CSS animation of four rotating lines that form a rolling square shape. The animation uses custom keyframes named `desno`, `desno2`, and `desno3` to rotate each line sequentially around different origins, with staggered opacity changes creating the illusion of a continuous page-turning effect. The code relies on CSS transforms, animation properties, and positioning, with the lines styled as rounded rectangles in a yellow-green palette on a green background. While the HTML includes an SVG element and D3.js, the visual effect is driven entirely by CSS.

AAndrew-Kiwa

73% match

Loading thumbnail…

SVG Animation using CSS Transition

A single red rectangle with a black border animates smoothly when hovered, transitioning its fill color to green and expanding its stroke width over three seconds. This simple example demonstrates SVG animation achieved through CSS transitions, applied directly to the `rect` element using the `transition: all 3000ms` property. The page is a bare HTML document with embedded CSS and JavaScript, showcasing how CSS can drive SVG property changes without explicit JavaScript animation logic. The HTML includes a minimal SVG canvas of 960 by 500 pixels, with the rectangle's styling and hover state defined entirely in the stylesheet.

Ddaigou65

72% match

Loading thumbnail…

SVG Experiment

This example demonstrates the interactive styling capabilities of SVG graphics, using CSS transitions to create a smooth visual response when the user hovers over a blue circle, which gradually turns red and thickens its border over three seconds. The visualization composes a variety of SVG primitives, including lines, a circle, and a path, all rendered directly within the HTML page using inline SVG markup. The implementation relies on vanilla CSS and JavaScript, with no external libraries, and is built using React as indicated by the project metadata, though the code itself is a standalone HTML file.

MMinchan Jun

72% match

Loading thumbnail…

SVG Transition rectangle

This example shows how CSS transitions can animate SVG shapes when a user hovers over them. A red rectangle changes its fill color to blue, increases its stroke width, and shifts its stroke color to grey over 3 seconds, while a circle fades to light green and scales up over 2 seconds. A second yellow rectangle remains static, illustrating contrast. The code uses plain HTML, CSS, and JavaScript with inline SVG, leveraging CSS `transition` and `:hover` pseudo-classes. No JavaScript libraries are used; the rendering relies on the browser’s native SVG support.

Gguththered

72% match

Loading thumbnail…

CSS Transitions

This example demonstrates CSS transitions applied to SVG elements, showing how a yellow rectangle scales, changes fill color, and alters stroke properties when hovered. The rectangle’s transition is defined for fill (0.5s), transform (1s), stroke (1s), and stroke-width (2s), with a hover state triggering red fill, 1.2× scale, and thicker green stroke. The code uses a plain HTML page with inline CSS and JavaScript, embedding an SVG element directly in the markup. The SVG has a grey background with a red border, centered on a pink page.

AAlim Bolar

72% match

Loading thumbnail…

Fork of SVG Animations using CSS transitions1

A single red rectangle with a thick yellow border occupies the center of an SVG canvas. When hovered over, the rectangle smoothly transitions its fill color to green and expands its border width to 100 pixels. The animation is implemented using pure CSS transitions applied to the SVG `<rect>` element, with a 3000-millisecond duration for all property changes. The example demonstrates how CSS properties like `fill` and `stroke-width` can animate SVG shapes without JavaScript.

Aalisaipsoc

71% match

Loading thumbnail…

Untitled

This example shows a set of overlapping circles and ellipses inside an SVG canvas, demonstrating CSS-driven interactivity and animation. Three yellow circles with green strokes transition their radius and stroke-width over five seconds when hovered, while three nested ellipses change their fill color to blue on hover. Built with React and rendered using SVG markup, the visualization relies on CSS properties like `transition`, `r`, and `stroke-width`, applied directly to SVG elements. The source code uses a basic HTML structure with inline styles, illustrating how CSS can directly manipulate SVG shapes without JavaScript logic.

Kkaline

71% match