How I made SVG-logo for my site (spoiler: like a nerd, lol)
Tags: logo, design, svg, css
Published: 2020-03-09 01:06:32

---
title: How I made SVG-logo for my site (spoiler: like a nerd, lol)
published: true
description: The note about design process, that takes time and experimentation
tags: logo, design, svg, css
---

# Hello
My name is Artem Shar (Sharyukov), I'm Web/Fron-End developer since 2016. In the end of 2019 I decided it was time to make a new personal website with a blog like as usual... The new site is not ready yet. But to make process more interesting and faster, I want to share my experience of logo creating, because this thing was really done. Now it looks like this and I like it.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ell5tfciubapzf6kuxzc.png)

This logo, made by using SVG and CSS without tools.

```html

<div class="logo-wrap">
  <svg class="logo-svg" viewBox="0 0 200 200" width="50px" height="50px">
     <circle cx="100" cy="100" r="100" fill="#313131"></circle>
     <circle cx="100" cy="100" r="75" fill="#ccc"></circle>
     <circle cx="100" cy="100" r="50" fill="#fff"></circle>
  </svg>
</div>

```

```css
.logo-wrap {
  --color-glow-1: #080808;
  --color-glow-2: #D9FBFF;
  ...
}
.logo-wrap:after {
  ...
  box-shadow: 8px 10px 30px var(--color-glow-1), 5px 5px 20px var(--color-glow-2);
}
.logo-wrap:before {
  ...
  box-shadow: 8px 7px 20px var(--color-glow-1), 7px 7px 15px var(--color-glow-2);
}
```

That's simple and controlled, if I want to add some interactive behaviour or change colors or play with shadows, etc.


Rewind the tape a bit back. Before this version, I have something similar, but without shadows. If remove CSS-code, it will looks like this. I lived with this logo for a while, putting them on avatars of some social networks. And I didn't want to delete it.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0cim1fh1g1pzyi2gj8m7.png)


Now let's rewind the tape to the beginning, a 4 of months ago (october of 2019).

## First steps

The first thing I started with was a simple pen and paper. Because I didn't want to be limited to any digital tool. And I just experimented during about one week. The first thing that occurred to me was to play with the letters of my first and last name. Also, I was inspired by the [Zeit company](https://zeit.co/)  design. Their style is clear, simple and strong. But I didn't want to create something too strong or sharp. Lot of times I tried to use the triangle - in the end I dropped it. I thought about something, that contain my character: nature, forever favorite things, maybe roots. It was sun, sea, because I grew up near [Gulf of Finland](https://en.wikipedia.org/wiki/Gulf_of_Finland), sunrises and sunsets and something modest, clear, dark. Also, I wrote to my friend asked for help me with ideas with letters A and S, and she threw something. That's what came out of it. Sorry for the poor quality.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9na5u5clpoj100f5go7d.jpg)

## Inkscape SVG + React App

Next stage I've took [Inkscape](https://inkscape.org/ru/) - the good free tool for creating vector-graphics. And I started trying to repeat something I'd drawn with a pen.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6grmx2wf83gj2izn30rq.png)

And they looked so bad... then I realized that I should try to use the tool's features. After all, the pen is also a somewhat limited tool. It wasn't easy, I started playing around fonts, forms and shadows, In general, it looks dilatant, but I liked some of them, here are some good examples.

Here you can see the first version of my "sun circles" :)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wy6wum0orsaae9tf7xns.png)

I made a lot of variants in Inkskape. Make clear filenames - no, it is immpossible :D
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ht4r63igqwpgjs9spjqg.png)


And I settled on that. I really liked this translucent glass, the color of which I played when I inserted it on the site.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vini1pfbxv2m4ksdnarh.png)

After a time, I stopped like it, because I feel instability and uncertainty with it. I've back to circles. I did animated colors on my page, because I couldn't choose just two colors.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3zf0lvoxwtknf9kt968z.gif)

The next thing that I did, I turned these circles into a theme switch on the site, which is like sunset or sunrise.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h90prd5ahjjtkauyhu22.gif)

Recently, I realized again that I was playing too much, that I was stuck in all this and I'm not move to my goal - to make a simple, static site. This project with theme switcher was stopped, because I complicated it. I've took HTML, CSS and I made current SVG logo by hands. And I'm happy with this simple and volume result.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rmr4t112g6l4oljpesrk.png)

Maybe I'll do something interesting with shadows later, but that's less important.


I continue do my site, next step is blog part, where I'm goint to put this article and smth else, for start.

## The conclusion

* Don't limited to design tools, but start with paper and pen for generate ideas
* When you are your own customer, design process is can be too long (in my case, about 4 of month in free time with breaks). Rememeber your goal
* Listen to your feelings about the forms, colors and design process. E.g. it seems, circles I likes more than triangles :D

Feel free to fix my English.
Thanks for your attention! Have a nice coding and design!