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 ?
- SASS, a preprocessor to generate CSS.
- Linear gradient, to paint each squares.
- Grid layout, to place each squares.
- Cube layout, to place each walls.
- Random, to create each gradient.
- Noise, to add a drawing/painting texture.
- Animations, to move the cube.
Linear gradient
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;
$gradient: ();
@for $i from 0 to $length {
$start: $i * $percent;
$end: $start + $percent;
$color: nth($colors, $i + 1);
$gradient: append($gradient, $color $start $end, comma);
}
@return linear-gradient($angle, $gradient...);
}
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;
padding: $gap;
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);
@return gradient-lines($angle + deg, $colors);
}
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 !
I hope you enjoyed reading this article, if so, please leave a ❤️ or a 🦄.
For anything else or if you would like to read more articles like this one, please let me know in the comments.
Seb
Top comments (0)