!! Click anywhere to exit fullscreen mode !!
Pixel Weaver 2.0 is a generative art toy and tool that exploits fundamental properties of the CSS programming language to create dynamic compositions.
By changing a CSS property and setting a transition time, the CSS property automatically interpolates from one state to the next.
Numerous CSS properties can be combined to create complex outcomes.
A pixel is like a unit in a grid. Images are made up of pixels, and when you zoom into an image you start to lose the subject and just see its pixels. Weave those pixels into your own dynamic composition.
Pixel Weaver 2.0 was designed and developed by Gabriel Drozdov.
Pixel Weaver 1.0 was designed and developed by Gabriel Drozdov at RISD as part of the Graduate Studio I course during the Fall 2022 semester with the guidance of Bethany Johns and Ramon Tejada.
This website uses the font VT323 designed by Peter Hull.
All patterns are created by Gabriel Drozdov.
The following artworks are sourced from Wikipedia and qualify as fair use under United States copyright law:
The following textures are sourced from Unsplash:
Pixel Weaver cannot recording your dynamic compositions directly.
Record your creation using one of the following shortcuts:
Screenshot / Screen Recording
Command + Shift + 5
Screenshot
Windows Key + PrtScn
Fullscreen Recording
Windows Key + Alt + R
For More Controls
“Snipping” application
Screenshot
Volume Up + Power
Screenshot (older models)
Home + Power
Screen Recording
Shortcut in Control Center
Screenshot
Volume Down + Power
Screen Recording
Shortcut in Device Controls
Modify sliders to set properties
Toggle to alternate between static and dynamic motion
Click on setting value to manually enter exact value
Click setting label to reset value
Reset all settings
Select source files or upload your own images
Define grid layout and assign source files to cells
Modify settings groups individually and observe outcomes
Record your composition (see “Record” menu for instructions)
Experiment with advanced settings
; : ;
. \_,!,_/ ,
`.,' `.,'
/ \
~ -- : : -- ~
\ /
,'`._ _.'`.
' / `!` \ `
; : ;
_ _ _
>(')____, >(')____, >(')____,
(` =~~/ (` =~~/ (` =~~/
~^~^~^``---'~^~^~^`---'~^~^~^`---'~^~^~^`