animated distortion

100%

animated distortion

✓ Published0🌍 Public

Last edited Jan 4, 2017

Created on Dec 21, 2016

A single kitten image is displayed on an SVG canvas, with its appearance continuously shifting through two different distortion effects. The visualization alternates between two SVG filters, each combining a `feTurbulence` fractal noise generator with a `feDisplacementMap` to warp the image’s pixels. A recursive `setTimeout` function in plain JavaScript toggles the active filter every 400 milliseconds for ten iterations, creating a rhythmic pulsing distortion. The code uses D3 v4 for SVG selection and attribute manipulation, while the image itself is loaded from an external placeholder service.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

hexagon clip + blend

A grid of kitten images, each clipped to a hexagon shape, is arranged in a staggered pattern across the canvas. The images are layered with semi-transparent circles in pink, blue, and green, all using CSS screen blend modes to create overlapping color effects. The visualization is built with D3 v4, using SVG elements such as `clipPath` and `polygon` for the hexagonal clipping, and `append` with `.classed` to apply the clip. The code also references `d3.select` and `d3.scaleOrdinal` for color schemes, though the images come from external placeholder URLs.

PPatrick Wojda

74% match

Loading thumbnail…

#10print

A circular grid of slash marks continuously regenerates inside a black, round SVG canvas, its patterns and opacity driven by 3D Simplex noise. Each cell's rotation flips between slash and backslash, while opacity varies with the noise value, producing an organic, flickering maze. The animation runs via `d3.interval`, updating per-cell values and applying transitions with `attrTween`-like direct attributes. It uses D3 v4, the `simplex-noise.js` library, and draws SVG paths for the line characters.

KKcnarf

71% match

Loading thumbnail…

Gooey egde effect

Shifting circles confined within a hexagon produce a bold, gooey edge effect as they move and merge. The visualization applies an SVG filter chain—including `feGaussianBlur`, `feColorMatrix`, and `feConvolveMatrix`—to blur, threshold, and detect edges from the animated shapes. Built with D3 v4 and SVG, it uses a linear gradient fill and a clip path to constrain the motion, offering a dynamic exploration of filter-based visual styling.

KKcnarf

70% match

Loading thumbnail…

Untitled

A tiny SVG viewport shows 1,000 randomly placed circles bouncing and wrapping around its edges, with a live frames-per-second counter in the corner. The animation runs through `d3.timer`, updating each circle’s `cx` and `cy` attributes based on randomized velocity values. All rendering uses SVG elements and D3’s data join, with positions recalculated on every tick to keep the motion continuous.

KKanishk Mamgain

69% match

Loading thumbnail…

Rorschach effect and morphing using filter elements

An interactive button triggers a morphing Rorschach-like shape, with a red blob transitioning from a randomized scatter into a heart outline using d3.forceSimulation and an SVG filter that applies Gaussian blur and a color matrix for a gooey merging effect. The animation uses SVG circles bound to data points, animating their positions smoothly as the filter creates organic, fluid distortions. The code relies on d3.v4 for simulation and transitions, with the filter defined as an SVG `<filter>` element.

IIsaKiko

68% match

Loading thumbnail…

Motion blur - Diagonal movement & Multiple filters

Fifteen circles radiate outward from a central point, each moving diagonally with a one-directional Gaussian blur filter applied via SVG’s `feGaussianBlur`. Clicking toggles the blur on and off, switching the title between “With” and “Without motion blur filter.” The code builds multiple `<filter>` elements, one per circle, and rotates each circle’s group so the blur aligns with its movement angle. It uses D3.js (v3) for data binding, SVG transforms, and event handling, with filters manipulated via `style("filter", ...)`.

FFrissAnalytics

68% match

Loading thumbnail…

Bubbles gallery #1

A paginated gallery cycles through six kitten photos from placekitten.com, displaying three at a time as circular thumbnails. The `update` function uses D3’s `transition` API to animate new bubbles growing from zero to their full size while exiting bubbles shrink and are removed. Click handlers on the "previous" and "next" buttons rotate the dataset, wrapping around to create a loop.

PPatrick Wojda

68% match

Loading thumbnail…

Gist 8b397c6c25320dd8963daebaa9c8b847

A webcam feed is displayed as a continuously distorted, glitching video stream. The visualization captures the user's webcam video using the `getUserMedia` API and renders it to a canvas, which is then processed in real-time. The glitch effect is achieved by taking the canvas's JPEG data and randomly corrupting individual characters within its base64 encoding using JavaScript, before displaying the result as a dynamically updating image. The animation runs on a timer, cycling the corruption process to create a perpetually shifting, pixelated output.

MMAKIO135

68% match