nib does not support filter vendor yet

CSS 3D cube

This example shows a wireframe-style cube rendered in 3D using CSS transforms and perspective. The cube is composed of six square faces, each positioned and rotated with the `rotateY` and `rotateX` functions applied to `translateZ` values, creating a three-dimensional structure. The code relies on CSS variables and the `-webkit-transform-style: preserve-3d` property to maintain depth. It uses only static HTML and CSS, with no JavaScript or external libraries, and the faces are given semi-transparent backgrounds and inset shadows for visual clarity.

65% match

3D CSS Camera

A 3D CSS cube rotates in perspective within a bounded screen, its six labeled faces built from styled divs using CSS 3D transforms. The camera’s field of view, position, and model-view-projection matrix are computed with gl-matrix’s `mat4.perspective`, `mat4.translate`, `mat4.rotate`, and `mat4.multiply` in a CoffeeScript `Camera` class. A DAT.GUI slider adjusts the camera’s `fov` live, while the world itself is rotated via inline `-webkit-transform`.

59% match

CSS frame portrait

This example renders a wireframe cube as a portrait frame using pure CSS 3D transforms. The six faces of the cube are positioned with `rotateX`, `rotateY`, and `translateZ` properties, while the `frame-portrait` class adds borders to each face to create the frame effect. The page sets a perspective on the `html` element and uses `preserve-3d` on the body and all children, making the cube visible in three-dimensional space. No JavaScript or external libraries are used; the visualization relies entirely on CSS transforms and the static HTML markup.

58% match

gauge

A single cube, rendered with nested faces, appears to rotate continuously in 3D space while its inner cube repeatedly shrinks and expands. The visualization uses CSS 3D transforms, including `rotateX`, `rotateY`, and `translateZ`, combined with keyframe animations (`@-webkit-keyframes`) to create the motion. The outer container applies a persistent rotation via the `presenter` animation, while the inner cube cycles through scale changes with the `shrink` animation. The code relies on plain HTML divs and CSS, with no JavaScript libraries or external data sources.

Episode 3: Sol LeWitt in Vanilla JavaScript version 4

This example displays a full-screen generative composition of vertical and horizontal color grids overlaying a central white circle. Built with vanilla JavaScript and the SVG API, it creates 200 animated vertical rectangles that jitter horizontally behind a masked grid of horizontal bars. The code uses `document.createElementNS` for SVG elements, CSS transforms for the infinite animation loop, and a mask to confine the horizontal grid within a circular boundary.

NNita

My thing

This example demonstrates how SVG elements are constructed and layered directly in the browser using the Document Object Model (DOM) and the `createElementNS` API. It shows a series of vertical black lines evenly spaced across the viewport, followed by a single blue rectangle that fills the entire screen, obscuring the lines beneath it. The rendering approach relies on manual SVG creation via `document.createElementNS`, setting attributes for line coordinates and rectangle dimensions, and appending nodes to the document body. No external libraries are used; the code runs on raw JavaScript and SVG.

Ccniekel

Rubix Cube

This example renders a classic 3x3x3 Rubik’s Cube in Three.js using WebGL, with all standard color faces (white, yellow, red, orange, green, blue) applied to the outermost cubies. It uses three directional lights and ambient light to illuminate the scene, plus edge outlines to accentuate each cubelet. The user can rotate and zoom via OrbitControls, while an animation loop applies slow continuous rotation to the entire group. The code constructs the cube by positioning 26 small box meshes and assigns per-face materials based on their spatial position.

CCurran Kelleher