DEV Community

loading...
Cover image for How to create Geometric objects - 11 Trees 🌳 Pure CSS

How to create Geometric objects - 11 Trees 🌳 Pure CSS

Roden
Frontend developer from Russia
・Updated on ・3 min read

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
…

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



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

Discussion (9)

Collapse
jaredcodesalot profile image
Jared Becker

These look amazing! ^o^

Collapse
kerthin profile image
Roden Author

Thanks

Collapse
meo3w profile image
Phil Hasenkamp

Well done!

Collapse
kerthin profile image
Roden Author

Thanks

Collapse
alvinpeter9 profile image
alvinpeter9

Wow. This is on another level... Thumbs up

Collapse
kerthin profile image
Roden Author

Thanks 😊

Collapse
codalreef profile image
Oranda

Nice job with the CSS implementation. Also just wondering, how did you do the squirrel icon for your Github page? Love that little guy

Collapse
kerthin profile image
Roden Author

the post pattern is just a photo of an open menu in which you can select a tree.