Microsoft SVG+ CSS logo

In this example below you will see how to do a Microsoft SVG+ CSS logo with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ⓐⓛⓟⓗⓔⓝⓛⓘⓑⓘ, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ⓐⓛⓟⓗⓔⓝⓛⓘⓑⓘ ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Microsoft SVG+ CSS logo</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
    <head>
        <title>css and svg microsoft logo</title>
    </head>
    <body>
       <div id="logo">
<svg width="100px" height="100px"> 
<rect width="100px" height="100px" fill="#ff0000">
</svg>
<svg  width="100px" height="100px"> 
<rect width="100px" height="100px" fill="#00ff00">
</svg>
<br/>
<svg  width="100px" height="100px"> 
<rect width="100px" height="100px" fill="#0000ff">
</svg>
<svg width="100px" height="100px"> 
<rect width="100px" height="100px" fill="#ffff00">
</svg>
</div>
    </body>
</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Ykthecoder/microsoft-svg-css-logo-gedeXo */
body {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
}  
svg {
    box-shadow:5px 5px 10px black;
  height: 100px;
  width: 100px;
  animation: rotate 6.3s infinite ease-in-out alternate;
}

@keyframes rotate {
  0% {
    transform: perspective(120px) rotateX(150deg) rotateY(150deg);
  }
  25%{
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);  
  }
  50% {
    transform: perspective(120px) rotateX(-300deg) rotateY(-300deg);
  }
  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
  }
}

Comments