How create Geometric objects – 11 Trees ? Pure CSS

Introduction

2 years ago, wandering through the expanses of Behance, I came across an interesting work from the studio Flöra. And in it I saw interesting geometric objects that reminded me of trees. I really liked the style of these illustrations and …


This content originally appeared on DEV Community and was authored by Roden

Introduction

2 years ago, wandering through the expanses of Behance, I came across an interesting work from the studio Flöra. And in it I saw interesting geometric objects that reminded me of trees. I really liked the style of these illustrations and decided to try to implement them using CSS.

DEMO

You can also download the project from my GitHub repository. (There is also a demo on GitHub Pages).

GitHub logo Kerthin / trees-templateSait

The geometric representation of trees

Kerthin logo

Build Status completion Status Version Version Version
Size Size Version

Description

This site is an example of work created specifically for the portfolio. If you want to take a look at it, then you can follow the link given below.

Use technology.

The following technologies were used to create this project:

Task-Manager

Software platform

Preprocessors

Libraries

Package manager

Plugins

To develop the project through gulp, I used the following types of NPM plugins:

Plugin Status Description
gulp-sourcemaps gulp-sourcemaps-status Intended for generation of css source maps which will be necessary at debugging of a code.
gulp-imagemin gulp-imagemin-status Minify PNG, JPEG, GIF and SVG images with imagemin
gulp-autoprefixer gulp-autoprefixer-status Prefix CSS with Autoprefixer
imagemin-pngquant imagemin-pngquant-status Pngquant imagemin plugin
gulp-uglify gulp-uglify-status Minify JavaScript with UglifyJS3.
gulp-rigger gulp-rigger-status Rigger is a build time include engine for Javascript, CSS, CoffeeScript.
gulp-minify-css gulp-minify-css-status Gulp plugin to minify CSS
rimraf rimraf-status The UNIX command rm -rf for node.
gulp-watch gulp-watch-status File watcher that uses super-fast chokidar and emits vinyl
…
View on GitHub

Full Page Demo (GitHub Pages)

01. Seedling

Alt Text

Creating this tree took the most time because of the need to create the lower oval dotted lines. Since to create such lines, I needed to create 16 hemispheres, each of which had a different size.

02. Sepal

Alt Text

A very simple tree. There are no complicated shapes or lines.

03. Linden

Alt Text

04. Pine

Alt Text

To create winding lines with two or more corners, it is enough just to use several blocks with rounded corners that need to be connected in the necessary sequence.

05. Palm

Alt Text

To create winding lines, the same method was used here as in the fourth tree.

06. Fir

Alt Text

To create the moon, I used a round invisible block, which had the box-shadow property set with the value 20px 20px 0 0 #000.

I used the same method in my other works with illustrations

kerthin

CodePen - CSS Illustration (Animation)

Roden ・ May 19 ・ 1 min read

#codepen #css #html #webdev


kerthin

CodePen - CSS Icons (Animation)

Roden ・ May 21 ・ 2 min read

#codepen #webdev #css #html

In order to create curved lines, you just need to set the properties for rounding individual corners. For example: border-bottom-left-radius or border-bottom-right-radius.

07. Rose

Alt Text

08. Willow

Alt Text

09. Sunflower

Alt Text

To create such petals, you just need to use the border-radius property and set it to 50% 100px 0 80px or 100px 50% 80px 0. Depending on which way you need a slope.

10. Bell

Alt Text

To create winding lines, the same method was used here as in the fourth tree.

11. Poplar

Alt Text

THE END

Well, that's it. I just wanted to share my old work and nothing more. Thanks for attention.

Goodbye
Alt Text


This content originally appeared on DEV Community and was authored by Roden


Print Share Comment Cite Upload Translate Updates
APA

Roden | Sciencx (2021-07-23T18:40:07+00:00) How create Geometric objects – 11 Trees ? Pure CSS. Retrieved from https://www.scien.cx/2021/07/23/how-create-geometric-objects-11-trees-%f0%9f%8c%b3-pure-css/

MLA
" » How create Geometric objects – 11 Trees ? Pure CSS." Roden | Sciencx - Friday July 23, 2021, https://www.scien.cx/2021/07/23/how-create-geometric-objects-11-trees-%f0%9f%8c%b3-pure-css/
HARVARD
Roden | Sciencx Friday July 23, 2021 » How create Geometric objects – 11 Trees ? Pure CSS., viewed ,<https://www.scien.cx/2021/07/23/how-create-geometric-objects-11-trees-%f0%9f%8c%b3-pure-css/>
VANCOUVER
Roden | Sciencx - » How create Geometric objects – 11 Trees ? Pure CSS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/07/23/how-create-geometric-objects-11-trees-%f0%9f%8c%b3-pure-css/
CHICAGO
" » How create Geometric objects – 11 Trees ? Pure CSS." Roden | Sciencx - Accessed . https://www.scien.cx/2021/07/23/how-create-geometric-objects-11-trees-%f0%9f%8c%b3-pure-css/
IEEE
" » How create Geometric objects – 11 Trees ? Pure CSS." Roden | Sciencx [Online]. Available: https://www.scien.cx/2021/07/23/how-create-geometric-objects-11-trees-%f0%9f%8c%b3-pure-css/. [Accessed: ]
rf:citation
» How create Geometric objects – 11 Trees ? Pure CSS | Roden | Sciencx | https://www.scien.cx/2021/07/23/how-create-geometric-objects-11-trees-%f0%9f%8c%b3-pure-css/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts