CodePen Challenge - Art Inspired

Sébastien Menard — Tue, 25 Jan 2022 22:28:44 +0000

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

Fractal Cube animation !

Sébastien Menard — Sat, 22 Jan 2022 01:04:05 +0000

Fractal Cube was made for the Codepen challenge, Generative Art - Fractals.

The animation was made using CSS with SASS. Circles were made using SVG and used as background in CSS. Each circle position and radius is calculated with recursion.

Sphere of Cubes (Fibonacci)

Sébastien Menard — Sun, 16 Jan 2022 04:58:07 +0000

Sphere of Cubes (Fibonacci) animation was made using CSS with SASS.

Cube Rings animation

Sébastien Menard — Thu, 13 Jan 2022 04:54:38 +0000

Cube Rings animation was made using CSS with SASS.

Flowing Energy animation

Sébastien Menard — Sat, 08 Jan 2022 01:24:56 +0000

Flowing Energy animation was made using CSS with SASS.

Mill's Cubes Wheel animation

Sébastien Menard — Mon, 09 Nov 2020 19:46:30 +0000

Mill's Cubes Wheel animation of cube was made using CSS with SASS. You can play with it using the different settings in the CSS section.

Cube World animation

Sébastien Menard — Sat, 17 Oct 2020 17:01:30 +0000

Cube World animation was made using CSS with SASS. You can play with it using the different settings in the CSS section. It was inspired by Dillon's pen RGB cubes - no library and by Johan Karlsson's pen Cube World SVG | three.js.

Drop Wave animation

Sébastien Menard — Mon, 05 Oct 2020 20:53:30 +0000

Drop Wave animation was made using CSS with SASS. It is a unique element showcasing rainbow colors !

DEV Community: Sébastien Menard

CodePen Challenge - Art Inspired

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

What's needed to realize this Pen ?

Linear gradient

Grid layout

Cube layout

Random

Noise

Animations

Wall Drawing 684A Cube

Fractal Cube animation !

Sphere of Cubes (Fibonacci)

Cube Rings animation

Flowing Energy animation

Mill's Cubes Wheel animation

Cube World animation

Drop Wave animation