Amazing! Implementing artistic graphics with CSS
Tags: css, javascript, html, web
Published: 2022-07-24 03:38:08

---
title: Amazing! Implementing artistic graphics with CSS
published: true
description: This article mainly introduces how to use CSS-doodle to quickly create beautiful CSS graphics with CSS.
tags: CSS, Javascript, HTML, Web
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

I’ve been wanting to write an article about the art of CSS creation for a long time. This article mainly introduces how to use CSS to quickly create beautiful CSS graphics with the help of [CSS-doodle](https://css-doodle.com/).

> In short, CSS-doodle is a library based on Web-Component. It allows us to quickly create pages based on CSS Grid layouts and provides a variety of handy commands and functions (random, loops, etc.) that allow us to get different CSS effects with a set of rules. Take a look at its homepage — [Home Page of CSS-doodle](https://css-doodle.com/) — and you can get started quickly in just 5min.

## Create a Center Layout

All the tips in this article will revolve around this layout.

First, we need such a central layout. A simple HTML structure is as follows:

```HTML
<div class="g-container">
    <div class="g-box"></div>
    <div class="g-box"></div>
    <div class="g-box"></div>
    <div class="g-box"></div>
    <div class="g-box"></div>
</div>
```
```CSS
.g-container {
    position: relative;
    width: 300px;
    height: 300px;
}
.g-box {
    position: absolute;
    top:50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -150px;
    width: 100%;
    height: 100%;
    border: 1px solid #000;
}
```
Use absolute positioning and `margin` to center all elements horizontally and vertically (because `transform` will be used later, so this method of horizontal and vertical centering is selected), the result is as follows:

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/671ad72b97074a74819a5a13c5079b26~tplv-k3u1fbpfcp-watermark.image)

Well, it looks flat, but based on this layout, we can derive very interesting patterns.

## Change Elements' Size

The simplest thing is that we can change the size of an element.

CSS code is too tiring to write, so we simply rely on the ``pug`` HTML template engine and SASS.

```pug
div.g-container
    -for(var i=0; i<10; i++)
        div.g-box  
```
```SCSS
$count: 10;
@for $i from 1 to $count + 1 {
    .g-box:nth-child(#{$i}) {
        --width: #{$i * 30}px;
        width: var(--width);
        height: var(--width);
        margin-left: calc(var(--width) / -2);
        margin-top: calc(var(--width) / -2);
    }
}
```
Containing 10 child elements under the container, each of which increases in size incrementally, it is easy to get the following result.

![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27a69553301040a6b16c7749e5827983~tplv-k3u1fbpfcp-watermark.image)

## Change Elements' Color

Next, we proceed to change the color of the element so that it takes on a gradient color progression, which could be **border color**.

```SCSS
@for $i from 1 to $count + 1 {
    .g-box:nth-child(#{$i}) {
         ...
         border-color: hsla(
            calc(#{$i * 25}),
            50%,
            65%,
            1
        );
    }
}
```

Get this effect.

![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/42f2fb8a4aab4416b543f4f2425f1122~tplv-k3u1fbpfcp-watermark.image)

It is also possible to change the color of the background ``background``:

```SCSS
@for $i from 1 to $count + 1{
    .g-box:nth-child(#{$i}) {
        ...
        background: hsla(
            calc(#{$i * 25}),
            50%,
            65%,
            1
        );
        z-index: #{$count - $i};
    }
}
```

![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/13da618ce971401e9b179150dab6f6d9~tplv-k3u1fbpfcp-watermark.image)

## Change Elements' Angle

Okay, next, it's time to start transforming the angle, we use ``transform`` to rotate the element by different angles:

```SCSS
@for $i from 1 to $count + 1{
    .g-box:nth-child(#{$i}) {
        ....
        transform: rotate(#{$i * 7}deg);
    }
}
```

The effect is as follows.

![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d37b0f3c516e419084f9b9a958844f7e~tplv-k3u1fbpfcp-watermark.image)

[CodePen Demo -- CSS Pattern](https://codepen.io/Chokcoco/pen/ZEpdXKP)

OK, here, some basic concepts are introduced almost, in short, the use of multiple elements centered layout, change the size, color, transparency, angle, shadow, filter, blend mode, etc., etc., as long as you can think of, you can.

Next, let's introduce the other main character of this article - CSS-doodle.

[CSS-doodle](https://css-doodle.com/) is a Web-Component based library. It allows us to quickly create pages based on CSS Grid layouts to achieve various CSS effects (or perhaps we can call it CSS art).

The code for the final effect is essentially CSS, and some of the specific concepts can be understood by clicking on the home page.

## Use CSS-doole to achieve multi-element horizontal and vertical centering layout

Let's take the above layout and implement it again using CSS-doodle. To achieve a centered alignment of 50 elements, a simple declaration is needed as follows.

```HTML
<css-doodle>
	:doodle {
		@grid: 1x50 / 100vmin;
	}
	@place-cell: center;
</css-doodle>
```

What this means is that we declare a grid layout of 1x50 under a container of size `100vmin x 100vmin` and use `@place-cell: center` to center them all horizontally and vertically, which means they will be stacked together.

This may not look good, so we'll set different sizes for each element and give them all a simple `border`.

```HTML
<css-doodle>
	:doodle {
		@grid: 1x50 / 100vmin;
	}
	@place-cell: center;
	@size: calc(100% - @calc(@index() - 1) * 2%);
	border: 1px solid #000;
</css-doodle>
```

+ `@size: calc(100% - @calc(@index() - 1) * 2%)` indicates the size of the width and height of each child element (or you can set the height and width separately), `@index` is a variable that indicates the number of the current element, from 1 - 50, indicating that each element is 2% of the container's height and width, 4% of the container's height and width all the way up to 100% of the container's height.
+ `border: 1px solid #000` is the normal CSS code, there is no variable inside, it works on each element

The effect is as follows.

![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3cece719fe4643cb9dcfda273a313bb0~tplv-k3u1fbpfcp-watermark.image)

Oh No, the eyes are starting to glaze over. In this way, we have quickly implemented the graphical effect that was generated using HTML code and tedious CSS during the previous layouts.

## Create CSS Art

Next, the wonderful CSS art begins.

## Change the rotation angle of the element and the border color

Let's use the above code to continue down the page, first changing the base color of the overall container to black for better presentation, and then changing the rotation angle of the elements. Each element is rotated by ``30deg x @index``.

The code is very short and looks like this.

```HTML
<css-doodle>
	:doodle {
		@grid: 1x100 / 100vmin;
	}
	@place-cell: center;
	@size: calc(100% - @calc(@index() - 1) * 1%);
	transform: rotate(calc(@index() * 30deg));
	border: 1px solid #fff;
</css-doodle>
```

![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/688218c475fd434cb09b25d5cec6d25a~tplv-k3u1fbpfcp-watermark.image)

Not very good, then we try to set a different ``border`` color progressively for each element, and the transparency opacity decreases, and here we will use the ``hsla`` color representation.

```HTML
<css-doodle>
	:doodle {
		@grid: 1x100 / 100vmin;
	}
	@place-cell: center;
	@size: calc(100% - @calc(@index() - 1) * 1%);
	transform: rotate(calc(@index() * 30deg));
	border: 1px solid hsla(
		calc(calc(100 - @index()) * 2.55), 
		calc(@index() * 1%), 
		50%,
		calc(@index() / 100)
	);
</css-doodle>
```

And look at the effect.

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/18d05a4b99ea43c39ab343f388bd281d~tplv-k3u1fbpfcp-watermark.image)

> All mapping has some color difference, you can click into the Demo to see~

Wow, the first piece of work looks pretty good.

Of course, each different angle can produce a different effect, through CSS-doodle, you can quickly generate different random values, randomly generate different effects. Let's change the above code a bit, changing the `transform` line to introduce a random value:

```
<css-doodle>
	:doodle {
		--rotate: @r(0, 360)deg;
	}
	transform: rotate(calc(@index() * var(--rotate)));
</css-doodle>
```

+ `@r(0, 360)deg`, which generates a random number between 0 and 360, which can be followed directly by a unit, which becomes a random angle value
+ `transform: rotate(calc(@index() * var(--rotate))`, using the `calc` rule to introduce a random CSS variable, but of course, without refreshing the page, the value is fixed every time

This way, we can get a different effect each time we refresh the page (of course, CSS-doodle is optimized to add just a few lines of code to refresh the effect by clicking on the page), and the effect after the transformation, we can get a new effect each time we click:

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e9e986b7dd3416e8a3510cf75c8dd19~tplv-k3u1fbpfcp-watermark.image)

[CodePen Demo -- CSS Doodle - CSS Magic Pattern](https://codepen.io/Chokcoco/pen/QWKXxgB)

> Strongly recommend you click into the Demo and feel it yourself with a click of the mouse :)

## Set Different Background Colors

Okay, let's change our thinking again, this time instead of changing the color of the `border`, we control the odd numbered elements and the even numbered elements by means of a selector, giving them different background colors.

```HTML
<css-doodle>
	:doodle {
		@grid: 1x100 / 100vmin;
	}
	@place-cell: center;
	@size: calc(100% - @calc(@index() - 1) * 1%);
	transform: rotate(calc(@index() * 60deg));

	background: rgba(0, 0, 0, calc((@index * 0.01)));
	@even {
		background: rgba(255, 255, 255, calc((@index * 0.01)));
	}
</css-doodle>
```

Using `@even {}` you can quickly select an element with an even number and give it a white background, while an odd numbered element is given a black background, see the effect.

![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d0101e2fef764e0e8148ea1c7b8b5f97~tplv-k3u1fbpfcp-watermark.image)

In the same way, we can assign random values to the rotation angle of `transform` and use the black and white overlay to see what happens at different angles:

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/266f62101ea34e209d62568887f84473~tplv-k3u1fbpfcp-watermark.image)

[CodePen Demo -- CSS Doodle - CSS Magic Pattern](https://codepen.io/Chokcoco/pen/poEXKmm)

Of course, in the random process, you can also pick your favorite ones and keep them.

CSS-doodle supports many ways to introduce multiple graphics on one page, like this.

![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7ef5bcda7d904b4da30867aab0153294~tplv-k3u1fbpfcp-watermark.image)

[CodePen Demo -- CSS-doodle Pure CSS Pattern](https://codepen.io/Chokcoco/pen/wvzLPoO)

## Summary

A small summary, to generate different patterns, in fact ** just need to find the ability to generate different lines, or modeling pattern graphics, they will be different sizes, different rotation angle, different colors and transparency superimposed on each other can be **.

In this case, some possible ideas.

+ What would it look like to use only one-way borders?
+ The borders that appear are `solid`, what if they were replaced by a dashed line `dashed`? Maybe we could add `border-radius`
+ `text-decoration` also supports some kinds of underscores, so we can try using them too!

OK, putting the above idea into practice, we can get a variety of shapes drawn with various lines. They might look like this.

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4b8c80fef3364909814a7a59de3c21ff~tplv-k3u1fbpfcp-watermark.image)

![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aceb8eccbe8a4164ad436dbcd9745783~tplv-k3u1fbpfcp-watermark.image)

Of course, the effect can be randomized every time, as long as we make good use of the random parameters, you can poke into the following demo to feel it:

[CodePen Demo -- CSS-doodle Pure CSS Patterns](https://codepen.io/Chokcoco/pen/vYXogar)

## Clip-path && Drop-shadow

Hey, when it comes to creating different lines and patterns, it's important to mention two other interesting properties in CSS. They are `clip-path` and `fitler: drop-shadow()`.

Hmmm? What does that mean. Let's have a simple demo, using `Clip-path`, we can crop out different element shapes. For example, to implement a simple polygon.

```CSS
div {
    width: 300px;
    height: 300px;
    clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
    background: #333;
}
```

The effect is as follows.

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/026cf15b27f04ce3b5b02e254a09d865~tplv-k3u1fbpfcp-watermark.image)

Then using this idea, we can try to use `clip-path` to crop out various different shapes for overlaying.

In [CSS-doodle Shapes](https://css-doodle.com/shapes/), there are a very large number of clip-path shapes built in for us to choose from:

![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/70d4b0491e66439e891f18d4eacaf890~tplv-k3u1fbpfcp-watermark.image)

We pick one at random:

![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/453972073ada44b9b679ebf9936ce7cf~tplv-k3u1fbpfcp-watermark.image)

Applying the above rules, try to implement a graphic:

```HTML
<css-doodle>
	:doodle {
		@grid: 1x100 / 100vmin;
	}
	@place-cell: center;
	@size: calc(100% - @calc(@index() - 1) * 1%);
	background: hsla(
		calc(calc(100 - @index()) * 2.55), 
		calc(@index() * 1%), 
		65%,
		calc(@index() / 100)
	);
	clip-path: @shape(
		fill-rule: evenodd;
		split: 200;
		scale: .45;
		x: cos(2t) + cos(π - 5t);
		y: sin(2t) + sin(π - 5t);
	);
</css-doodle>
```

This time instead of rotating the different angles, just giving each layer a different background base color, and being able to get something like:

![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2fee97c518b04d12a90d5f3adba7146c~tplv-k3u1fbpfcp-watermark.image)

[CodePen Demo -- CSS Doodle - CSS Magic Pattern](https://codepen.io/Chokcoco/pen/gOwNjBE)

### Use `Clip-path` and `Drop-shadow` To Create Different Lines Patterns

OK, the above is using `clip-path` to create different patterns, but how do you get the different lines?

Not so fast. Using `drop-shadow`, you can create different shadows for `Clip-path` cropped shapes, but there are some structural constraints.

```CSS
div {
    position: relative;
    width: 300px;
    height: 300px;
    filter: drop-shadow(0px 0px 1px black);

    &::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        right: 0;
        background: #fff;
        clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
    }
}
```

We need to apply `filter: drop-shadow(0px 0px 2px black)` on top of the parent element of the element that utilizes `clip-path`, and the element that utilizes `clip-path:` must have `background` in order to attach a shadow effect to the clipped element.

The above code is as follows.

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/16a4ee3025df4282a97aec5449d2ff3d~tplv-k3u1fbpfcp-watermark.image)

OK, perfect, this way we have greatly enriched our line library, and by applying the above line rules, a whole new wave of patterns will be created.

![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/790fa8368c244a70a4a07cd71ce222b5~tplv-k3u1fbpfcp-watermark.image)

![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cdf63efb0afb4a76865b55ba83430dbe~tplv-k3u1fbpfcp-watermark.image)

[CodePen Demo -- CSS-doodle Pure CSS Pattern - clip-path - drop-shadow](https://codepen.io/Chokcoco/pen/JjRgWVz)

OK, limited to space, not to expand one by one, interested in the above Demo Fork a copy to try for themselves. There are a lot of interesting patterns waiting to be generated.

Finally, let's take a look at the work of CSS-doodle author, [Yuan Chuan](https://codepen.io/yuanchuan), who used the above technique:

![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/70717521571f40d188c1f33a6505d207~tplv-k3u1fbpfcp-watermark.image)

![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f0e089173e7a4c389b69170fab55cc49~tplv-k3u1fbpfcp-watermark.image)

[CodePen Demo -- css doodle art](https://codepen.io/yuanchuan/pen/GxNoME)

## Finally

More wonderful CSS technical articles are summarized in my [Github -- iCSS](https://github.com/chokcoco/iCSS).

And maybe you will love my [CodePen](https://codepen.io/Chokcoco/), which has a large number of amazing CSS effects.

Well, that's all for this article, I hope it helps you. :)