In this example below you will see how to do a Logo with some HTML / CSS and Javascript

This awesome code was written by Cory2911, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Cory2911 ©


  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Playfair+Display+SC:700i'>
<link rel='stylesheet prefetch' href='https://www.toptal.com/designers/subtlepatterns/patterns/spiration-dark.png'>

      <link rel="stylesheet" href="css/style.css">



  <div class="logo-container">
  <div class="logo-contents">
  <h1 class="logo-initial">S</h1>    



/*Downloaded from https://www.codeseek.co/Cory2911/logo-oqWewm */
h1 {
  margin: 0px;
  font-family: 'Playfair Display SC', serif;

.logo-container {
  background: lightblue;
  border-radius: 300px;
  width: 600px;
  height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0px auto;

.logo-contents {
  max-height: 100%;
  padding-bottom: 150px;

.logo-initial {
  text-align: center;
  font-size: 33em;
  -webkit-mask-image: linear-gradient(to bottomright, transparent 25%, black 75%);
  mask-image: linear-gradient(to bottom, transparent 25%, black 75%);