Sébastien Menard

Posted on

# CodePen Challenge - Art Inspired

## This week's challenge : Generate art that is inspired by another artist.

This Pen was inspired by Wall Drawing 684A from the artist Carlos Cruz-Diez.

Squares bordered and divided horizontally and vertically into four equal squares, each with bands in one of four directions.

### What's needed to realize this Pen ?

A gradient is drawn using the function gradient-lines. It splits the surface equally with each color and returns a linear-gradient with the angle provided.

``````@function gradient-lines(\$colors, \$angle) {
\$length: length(\$colors);
\$percent: 100% / \$length;

@for \$i from 0 to \$length {
\$start: \$i * \$percent;
\$end: \$start + \$percent;
\$color: nth(\$colors, \$i + 1);
}

}
``````

For example :

``````background: gradient-lines(90deg, (red, green, blue));
``````

### Grid layout

The grid layout is made using the mixin grid-wall. It splits the wall by a grid of squares x squares and calculates the gap to be approximately the same size as one gradient line.

``````@mixin grid-wall(
\$lines,
\$squares,
\$size,
\$border-width,
\$border-color,
\$background
) {
\$gap: \$size / (\$lines * \$squares + \$squares + 1);

display: grid;
grid-gap: \$gap;
grid-template-rows: repeat(\$squares, 1fr);
grid-template-columns: repeat(\$squares, 1fr);

height: \$size;
width: \$size;
border: \$border-width solid \$border-color;
background: \$background;
}
``````

For example :

``````@include grid-wall(3, 2, 500px, 5px, yellow, black);
``````

### Cube layout

The cube layout is made using the mixin cube. It places each face (6) using a combination of rotateX or rotateY and translateZ.

``````@mixin cube(\$size) {
\$t-z: translateZ(\$size / 2 - 0.05);

display: grid;
transform-style: preserve-3d;

> * {
place-self: center;
position: absolute;

&:nth-of-type(1) { transform: \$t-z; }
&:nth-of-type(2) { transform: rotateY(180deg) \$t-z; }
&:nth-of-type(3) { transform: rotateY(90deg) \$t-z; }
&:nth-of-type(4) { transform: rotateY(-90deg) \$t-z; }
&:nth-of-type(5) { transform: rotateX(90deg) \$t-z; }
&:nth-of-type(6) { transform: rotateX(-90deg) \$t-z; }
}
}
``````

For example :

``````@include cube(200px);
``````

### Random

The function random-angle provides one of the four possible direction.

``````@function random-angle() {
\$angles: (0, 90, 45, -45);

@return nth(\$angles, random(length(\$angles)));
}
``````

The function random-color provides a RGB color with each canal being a random number between 0 and 255.

``````@function random-color() {
@return rgb(random(256) - 1, random(256) - 1, random(256) - 1);
}
``````

The function random-colors provides a list of random colors.

``````@function random-colors(\$length) {
\$colors: ();

@for \$i from 0 to \$length {
\$colors: append(\$colors, random-color());
}

@return \$colors;
}
``````

The function random-gradient provides a gradient using the other random functions. If the angle is 45 or -45, it adds 2 lines to keep consistency across line size.

``````@function random-gradient(\$lines) {
\$angle: random-angle();
\$length: \$lines + if(abs(\$angle) == 45, 2, 0);
\$colors: random-colors(\$length);

}
``````

For example :

### Noise

The noise is made using the mixin noise-texture. It adds a layer to each wall with a pseudo-element and provides a texture with background-image.

``````@mixin noise-texture(\$texture, \$ratio: 0.2) {
&::before {
content: "";
height: 100%;
width: 100%;
position: absolute;
opacity: \$ratio;
background-image: \$texture;
}
}
``````

For example using this texture :

### Animations

On the cube, to rotate the cube.

``````@keyframes rotation {
to { transform: rotate3d(1, 1, 1, 360deg); }
}
``````

On the body, to keep the cube size consistent.

``````@keyframes perspective {
10%, 90% { perspective: \$size; }
50% { perspective: \$size * 4; }
}
``````

On the scene, to move the cube.

``````@keyframes translate {
10%, 90% { transform: translatez(\$size); }
50% { transform: translatez(0); }
}
``````

### Wall Drawing 684A Cube

The final result !

That's it for the challenge !