Make gmail User Logo

Introduction

This is my first tip, excuse me if I made a mistake. When we go to gmail, we look at the first letter of username in circle. In this post, I am trying to explain this object.

is shown as the picture.

Earlier, I thought that this picture cuts a cylindrical shape, but I learned that it is not like this.

Using the Code

CSS Code

div {
    background-color: #d715fd;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    font-size: 80px;
    color: #fff;
    text-align: center;
}

Now, I am going to get first letter of username and write div container.

$(document).ready(function () {
                var url = document.URL;
                var user = url.split('?')[1]; //I got username with GET.
                user = user.split('=')[1];
                $('#userlogo').html(user[0]);
                $('#welcom').html("Welcome " + user); 
            });

Thanks for reading!