Some Benefits of CSS-Based Graphics

CSS came across as a surprising replacement for static images and media files when it emerged in contemporary web design as a means of expressing animated aesthetics. The process of having lines of code instruct clients' web browsers to directly produce the effects is decidedly superior because it avoids the common performance issues that result from how files must be transferred over from the server side in whole before they can render.

On top of offering performance perks that are friendly to users and useful for SEO, CSS-based visual effects also remove any possibility that an element might appear grainier if the user views it through a magnification feature. Perhaps most appealingly, the code that comprises CSS animations can be adjusted by code located elsewhere within a web page's files, making it easier to have the visual effects dynamically change in response to external stimuli such as user interactivity.

The dynamically generated nature of art based on a CSS sheet allows for different experiences to manifest whenever the user not only loads a page but also reaches a particular section of a page. A website dedicated to hosting one web designer's CSS-based art exhibits showcases various ways of using CSS to produce a large variety of different effects that can collectively be labeled "generative art." While the earliest two exhibits simply use CSS to host image files depicting actual art pieces, a page displayed shortly after has a handful of lines situated under a pair of kanji characters automatically define their own lengths whenever that page is loaded.

When the arrow keys are used to scroll through the individual exhibits, many display pieces of CSS code off to the side that represent aspects of what is responsible for the effects in question. Among other CSS-driven effects, the 23rd exhibit on the site has a patterned square shape that smoothly reacts to the user's cursor position, and the 28th exhibit shows how a shape with 160 sides resembles a perfect circle. Applying complex mathematical formulae through CSS can change this same circular shape into that of a Valentine's Day heart. For more information click here https://yuanchuan.dev/talk/generative-art-with-css/.