</AS>

Aleix Soler

2019

Living Squares

The goal of this experiment was to explore how perspectives work in CSS. It all started after watching a conference where true works of art were created using only CSS, and one of the key techniques was precisely the use of perspectives.

Context & Objective

This project was born as a practice to better understand CSS perspectives and see how far visual effects could be achieved using only code. I divided the process into four steps: the first one to understand the basic functionality, and the following ones as a more creative and improvised evolution.

Procedure

Step 1: Exploring perspective

The first step was to apply simple perspectives to basic elements to understand how they deform and react visually.

Step 2: Bringing squares to life

Here, I started playing with interactions and more dynamic transformations, making the elements feel more alive.

Step 3: Multiplying elements

I took the experiment a step further by generating multiple squares and observing how they interacted with each other within the perspective space.

Step 4: Polishing and refining

The final phase was adjusting details and creating a more elaborate visual composition, exploring the limits of what could be achieved using only CSS.

Curiosities

Performance and efficiency: Code optimization was not considered. All rectangles are generated using a single class and remain in memory, making this experiment not scalable in terms of performance. The goal was to explore the concept, not to create an optimal implementation.