Shapes-Logo

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Shapes-Logo</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

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

  
</head>

<body>

  <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <style>
    .st0{fill:#F15B26;} .st1{fill:#FFFFFF;} .hexagon{fill:none;stroke:#0D71BA;stroke-width:3;stroke-miterlimit:10;}
  </style>
  <circle class="st0" cx="151" cy="150.5" r="57.5"/>
  <path class="st1" d="M108.3 151.2l.2-.4.6-.6c.3-.5.6-.8.8-.9 0-.1.1-.2.1-.3.1-.1.1-.3.1-.5l.2-.4.1-.1s-.1-.1-.2-.3l-.1-.5c0-.1-.4-.5-1.2-1.2h-.2l-1.7-.8-.1-.2h-.2l-.2.1-.8-.2c-.6-.2-1-.3-1.2-.4h-.1l-.9-.2c-.3-.1-.4-.1-.5-.2-.1-.1-.2-.1-.4-.2s-.3-.1-.4-.2c-.1-.1-.2-.1-.4-.1l-.6.1s-.2-.1-.6-.2c-.1-.1-.1-.2-.1-.2l-.7.1c-.4-.2-.7-.3-.7-.3-.1 0-.3 0-.8-.1s-.8-.2-.9-.3c-.1-.1-.3-.2-.6-.3l-.1-.1s-.1-.1-.3-.1H96c-.1 0-.2-.1-.4-.2s-.4-.3-.6-.4-.5-.4-.7-.7-.3-.6-.3-1v-.1l.1-.7c.1-.9.6-1.7 1.3-2.5.1-.4.4-.7.8-.9l.1-.3c.4-.4.8-.7 1-.9.2-.2.4-.4.7-.5.2-.1.4-.3.6-.4l.4-.2c0-.1.3-.4 1-.9s1.2-.8 1.6-1c.4-.2.7-.3.8-.3.1-.1.5-.2 1.1-.3.2-.4.4-.6.7-.6h.3l.5-.4h.6l.3-.3c.1-.2.4-.2.7-.2l2.8-.8h.4c.1 0 .3-.1.5-.3.2-.2.4-.3.8-.3.1 0 .2.1.3.2l.6-.2h.7l.9-.2c.6 0 1.1.1 1.5.4v-.2c0-.2.1-.4.4-.4.1 0 .2 0 .2.1l.3.2h.2l.6.3.4-.2c.3 0 .5.1.7.4h.4l.2-.2c.1 0 .2.1.4.4h.7s.1 0 .2.1l.3.2.3.3c0 .1.1.1.2.2.4-.2.6-.2.6-.2.2 0 .3.1.3.4 0 .2.1.4.4.6.3.2.4.4.4.6.3.1.5.4.5.7l.4 1.1-.1.4.2.4-.1.8.1.9c0 .5-.2.8-.7 1.2-.1 0-.2.1-.5.2-.2.1-.3.2-.4.2-.4 0-.7-.1-.8-.3-.1-.2-.3-.3-.4-.4-.1-.1-.2-.2-.2-.4 0-.3.2-.7.7-1 .2 0 .4-.1.5-.2 0-.3-.1-.5-.2-.6l-.5-.5c-.2-.2-.3-.4-.5-.5-.2-.1-.3-.3-.5-.5-.1-.2-.2-.3-.3-.3h-.3l-.7-.1c-.7-.1-1.4-.2-1.9-.5h-.5l-1.2-.2c-.2.1-.5.1-.9.1l-1.5.2h-.6s-.5.1-1.3.4h-.8s-.2.1-.6.2c-.4.1-.7.2-.9.3l-.2.1h-.5l-2 .9-.3-.2c-.3-.1-.4-.2-.4-.2-.2 0-.3.1-.3.3v.4c-.2.1-.3.2-.4.3-.1.1-.1.1-.2.1h-.3c-.2 0-.4.1-.5.2-.2.2-.3.2-.4.3-.1 0-.3.1-.5.2 0 .1-.2.1-.4.2s-.4.2-.5.4c-.1.2-.3.3-.4.3l-.5-.1-.3.4c-.3.1-.5.1-.6.1l-.6.6c-.2.1-.4.3-.6.4-.2.2-.3.3-.4.5-.1.2-.2.3-.4.4-.2.1-.3.3-.4.6l-.2.2c-.4.3-.6.6-.6 1 0 .2.2.4.6.5.4.1.6.2.7.3.1.1.2.1.4.1s.4 0 .5.1c.2.1.5.2.9.4l.2.4.2-.2c.1-.1.2-.2.4-.2s.4.1.6.4l.2-.1h.1l.3.1.3-.1h.1s.3.1.7.2c0 0 .2 0 .4-.1.2.1.4.1.4.1l.3.2s0 .1.1.1.2 0 .3-.1c.1-.1.2-.1.3-.1.1 0 .3.1.4.2l.4-.2c.1 0 .4.1.7.3l.4.1h.5l.8.1c.2.2.4.4.7.5 0-.2.1-.2.3-.2.2 0 .6.1 1.1.3h.2l.2.1c.3-.1.4-.1.5-.1.3 0 .5.1.5.3 0 .2 0 .4-.1.7 0 0 .1 0 .1.1.1-.1.2-.1.3-.2l.4-.2.1-.1c.4 0 .9.2 1.5.7.6.5 1 1 1.1 1.6 0 .2.1.4.2.6l-.1.3v.4s0 .1-.1.3v.3c0 .1-.1.1-.1.2-.1 0-.1.1-.1.2l.1.4v.1c0 .1-.1.1-.2.2s-.2.2-.2.3c0 .1-.1.2-.2.3-.1.1-.1.2-.2.3 0 .1-.2.3-.4.5-.3.2-.4.3-.4.4s0 .1.1.1c.2 0 .4-.1.6-.3.2-.2.4-.3.5-.3s.3-.1.6-.3l2.2-1c1.6-.7 2.5-1.1 2.7-1.1.2 0 .4.1.4.4 0 .1-.1.3-.3.5 0 .7-.3 1.1-.9 1.2-.2.1-.4.3-.5.5h-.2c-.4.4-.8.6-1.3.6h-.1c-.6.5-1.3.8-2.1.9-.5.5-1 .8-1.3.8l-.4.1c-.4.1-.7.2-.8.2l-.2.2-.3.2c-.3.1-.6.2-.9.5-.3.3-.6.4-.8.5s-.4.1-.6.2c-.2.1-1 .6-2.4 1.5l-.3.1c-.6.3-1 .5-1.1.6-.2.2-.3.3-.6.4h-.1c-.4 0-.8.2-1.2.7 0 .1-.4.2-1 .4s-1.3.4-1.8.8c-.4.1-.8.2-1.4.4-.5.1-.9.2-1.2.3l-1.6.3c-.4.1-.8.1-1.2.3-.3-.1-.5-.1-.7-.1h-.4c-.1 0-.2-.1-.3-.2-.1-.1-.3-.2-.5-.3-.2-.1-.3-.3-.3-.8 0-.4.4-.7 1.3-1.1.8-.4 1.4-.6 1.7-.8.1-.2.3-.3.6-.3s.6-.1.8-.3c.2-.1.5-.3 1-.4l.9-.5h.4c.1 0 .3-.1.5-.2.2-.2.4-.3.7-.4h.3s.1 0 .1-.1c.1-.1.2-.2.4-.3H102.1l.6-.3c.2-.1.5-.2.7-.4l1.8-.7h.4c.1 0 .2-.1.4-.2.1-.1.5-.3 1-.4.1-.1.2-.3.5-.4.2-.2.5-.4.9-.7l-.1-.2zm-8.1 5.5h-.3c-.2.1-.4.2-.6.2-.2 0-.5.2-1 .4-.4.3-.9.5-1.5.7-.6.2-.9.4-.9.5.8-.1 1.5-.3 2.4-.6l1.7-.4c.2-.1.4-.1.5-.2s.3-.1.5-.2l.4-.3c.1 0 .2-.1.5-.2s.4-.2.4-.3c0-.1 0-.1-.1-.1-.6 0-1 .1-1.3.2-.4.2-.6.3-.7.3z"/>
  <path class="st1" d="M117.6 148.7l.2-.2c.4-.1.7-.2.8-.4 0-.1.4-.5 1.2-1.1.7-.7 1.1-1 1.2-1.1.5-.8.8-1.5.9-1.9.2-.1.3-.2.3-.3l.2-.4h.2l.1-.1v-.2c0-.3.3-.9.9-1.8l1-2c0-.1.1-.3.3-.5.1-.2.3-.7.6-1.4s.7-1.4 1.3-2.1c.1 0 .2-.2.3-.5.1-.3.3-.6.6-.9l.3-.5c.1-.1.3-.4.5-.8s.4-.7.6-.9c.2-.2.3-.4.4-.7.1-.2.2-.4.4-.5.1-.1.3-.3.4-.6.1-.3.4-.4.7-.4.6 0 1 .2 1.3.7.3.5.4.9.4 1.2 0 0-.1.4-.3.9l-.3 2c-.3.1-.5.3-.5.5 0 .8-.3 1.6-.9 2.4-.1.1-.1.2-.2.6 0 .3-.2.6-.4.8-.2.2-.4.5-.6 1l-2.1 2.9-.2.2c-.1.1-.2.2-.3.4l-.4-.1c-.4 0-.6.1-.6.4 0 .1 0 .2.1.4 0 0-.6.8-1.7 2.3-.1.1-.2.4-.3.9l-.3.7c-.3.4-.6.8-.7 1.2-.1.4-.3.7-.5 1-.3.7-.5 1-.5 1 0 .1 0 .1.1.1s.3-.2.7-.7c.3-.4.6-.7.9-.9.2-.1.4-.4.6-.6l.2-.2c.1 0 .2-.1.4-.3h.2c.1-.1.2-.2.2-.3s.1-.2.1-.3c.4 0 .7-.2.8-.4.1-.2.2-.4.4-.4.1 0 .3-.1.5-.4.2-.3.5-.5.8-.7l.8-.4c.2-.1.5-.3 1.1-.5.5-.2.9-.3 1.1-.3H131.5c.5 0 1.1.1 1.6.4.5.3.8.7.7 1.3l-.2 1.4-.3 1.1c0 .2-.2.6-.4 1.2s-.3.9-.3 1l-.1.4.1.6v.5c0 .1.1.2.2.2s.2-.1.5-.4c.2 0 .3-.1.5-.3l.6-.6c0-.1.1-.1.3-.2.2-.1.5-.2.8-.5.1-.1.4-.4.9-.8s1.1-.8 1.5-1l.1-.2c.3-.2.5-.4.7-.4s.3.1.3.3c0 .1 0 .3-.1.5s-.1.4-.2.6-.2.6-.5 1.1l-.1.2c-.1.2-.2.4-.4.4s-.3.2-.5.4-.5.4-1.1.6c-.2.4-.4.7-.6.7l-.4-.2c-.3.2-.5.5-.5.8-.4.3-.6.5-.7.6h-.5c-.1 0-.2.2-.2.5 0 0-.2.1-.5.3s-.6.3-.7.4-.5.2-1.1.2c-.1 0-.2-.1-.3-.2-.1-.1-.3-.2-.5-.3-.2-.1-.4-.2-.5-.5s-.2-.5-.3-.6c-.1-.2-.2-.3-.2-.4v-.4l-.1-.5.2-.3c-.1-.2-.1-.3-.1-.4l.2-1.3c.2-1 .3-1.6.4-1.9v-1.1c0-.2-.1-.3-.2-.4-.2 0-.2-.1-.3-.1-.2-.1-.3-.1-.3-.1-.1 0-.2.1-.3.3s-.2.3-.4.5l-.6-.1c0 .1-.2.3-.6.7-.4.1-.7.3-1 .6-.1 0-.3.1-.6.3-.3.2-.5.4-.6.4l-.2.4-.4.1c-.1.3-.4.5-.8.6l-.2.4c-.3 0-.5.2-.7.5-.1.3-.2.4-.3.4 0 0-.1 0-.2-.1-.1 0-.1-.1-.2-.1-.3 0-.5.2-.6.7 0 .1-.3.4-.9 1l-1 1s-.1.2-.3.4c-.1.3-.3.5-.5.6-.2.1-.4.3-.5.3-.1.1-.2.1-.3.1-.3 0-.6-.2-.8-.7-.2-.4-.3-.7-.3-.7l.1-.5v-.4l.3-.9c.2-.6.4-1 .7-1.4.2-.3.4-.9.6-1.6-.7.4-1.1.7-1.2.7-.3 0-.5-.2-.5-.6.3-.1.5-.7 1-1.3zM155.3 151l.4-.3c.2 0 .4-.1.4-.3 0-.2.2-.4.5-.5s.5-.4.8-.7.5-.5.8-.5c.1 0 .2.1.3.2.1.1.2.3.2.4 0 .5-.2 1-.5 1.5l-.1.6-.2.3c-.2.1-.4.2-.5.4l-.5.5-.2.3c-.3.1-.6.3-.7.5-.1.2-.3.4-.5.4s-.4.2-.7.4c-.2.1-.3.1-.6.2v.2c-.2.1-.4.3-.7.4-.3.1-.6.2-.7.3-.2.1-.3.1-.3.1-.3 0-.6-.1-.8-.2-.2-.1-.5-.2-.8-.2-.1-.1-.1-.2-.2-.3 0-.1-.1-.2-.2-.4s-.2-.4-.2-.7l.1-.4c0-.1 0-.1-.1-.2s-.1-.2-.1-.2v-.1-.1-.2-.2l.1-1.1c0-.1 0-.1-.1-.1s-.2.1-.3.2c-.2.1-.4.2-.6.2-.1.1-.2.3-.3.5-.1.1-.3.3-.5.4l-.1.1c0 .1-.1.2-.3.3-.2.1-.3.2-.4.3l-.2.2h-.4s-.1.2-.3.4-.3.4-.5.6l-1.8 1.4c-.2.1-.5.3-.8.4l-.1.1c-1.2.8-2.1 1.2-2.6 1.2-.4 0-.9-.1-1.5-.3-.6-.2-.9-.5-.9-.8l-.2-.9c-.1-.2-.2-.5-.2-.9v-1.2c0-.2.1-.3.4-.3v-.6c0-.1.1-.3.4-.7.3-.4.5-.6.5-.7l.2-.3c0-.2.1-.4.3-.6l.6-.6c.1-.2.4-.4.8-.7l.7-.7c.5-.5 1.1-.9 1.8-1.2.1 0 .3-.2.6-.4.3-.3.6-.5 1-.6.4-.1.7-.3 1.1-.5.3-.2.6-.3.8-.3h.2c.1 0 .5-.2 1.2-.5h.1c.1 0 .2.1.4.2l.4-.2h.2c1 0 1.5.6 1.6 1.9 0 .3.1.4.2.4.2 0 .4-.3.7-.8s.9-.8 1.8-.8c.7 0 1 .4 1 1.2 0 1-.4 1.9-1.3 2.7-.1.1-.1.2-.1.4l-.3.9c0 .1-.1.2-.2.4s-.2.3-.2.4v.5l-.1.6c0 .3.1.5.2.5.5-.1.8-.3 1.1-.6s.4-.4.5-.4l.2-.1c-.1-.3.1-.5.3-.7zm-7.7 0c.1-.3.3-.6.6-.7s.5-.3.6-.5c.3-.2.7-.6 1.3-1.1s.8-.8.8-1c0 0 0-.1-.1-.1l-.2.1h-.8l-.3-.2h-.3l-.5-.1c-.2 0-.5 0-.6.1-.2.1-.5.2-1 .3-.5.1-1 .3-1.4.6s-.7.4-.9.4c-.1.2-.5.5-1.1.9-.4.1-.6.4-.7.8-.4.3-.6.5-.6.5l-.2.4c-.1.1-.3.2-.5.3s-.3.2-.3.5-.1.5-.3.7c-.2.2-.3.4-.3.5 0 .7.1 1.1.4 1.1.1 0 .4-.1.8-.2.4-.2.6-.3.7-.3.1-.1.2-.1.4-.2l.4-.2c.1-.1.1-.1.2-.1s.2-.1.2-.1.2-.2.4-.3c.2-.1.4-.2.5-.4.3-.1.7-.4 1.3-.7l.5-.4c.3-.1.5-.3.6-.4s.2-.1.4-.2z"/>
  <path class="st1" d="M160.4 155.5l.3-.3c.1-.1.1-.2.1-.4l.6-1.6.3-.9.1-.4.3-.5.1-.6c.1-.4.3-1.1.7-1.9v-.3l.2-.5v-.1c0-.1 0-.2-.1-.2h-.2c-.3 0-.4.1-.5.2l-.2.6c0 .2-.1.3-.4.3 0 0-.1 0-.2-.1s-.2-.1-.2-.1c-.1.2-.2.4-.4.7-.2.1-.4.2-.8.5h-.2c-.2.2-.4.5-.8.7l-.1.1c-.2.3-.5.5-.9.5-.5 0-.8-.3-.8-1 0-.4.2-.7.6-.9.4-.2.7-.4.8-.6.1-.2.5-.4 1-.7l.2-.3c.1-.2.2-.2.3-.2l.4-.1c.1-.1.2-.1.4-.1v-.3c0-.1.2-.2.6-.3.1-.1.3-.2.6-.5.3-.2.9-.9 1.7-1.9.1-.1.2-.3.4-.3.2-.1.3-.2.5-.3h.5c.1 0 .4.2.8.6.4.4.6.9.6 1.5l-.7 2.8v.4c0 .1 0 .1.1.1s.2-.1.4-.4c.1-.3.3-.5.6-.6.3-.1.5-.3.6-.5s.3-.3.6-.4c.2-.1.6-.3.9-.6.4-.3.8-.5 1.1-.5l.2-.1.1-.3.9-.6.6-.4c.7-.2 1.2-.3 1.5-.3.2 0 .3-.1.4-.2l.5.2s.1 0 .2-.1h.1c.6 0 1.2.2 1.6.7.4.5.7 1 .7 1.5 0 0 0 .1-.1.2 0 .1-.1.2-.1.3l.1.4-.5 1.3c0 .1-.1.6-.3 1.2-.3.4-.6.9-1 1.3s-.7.7-.8.9c.1.1.1.1.2.1s.3-.1.6-.4l1.1-.6.2.1c.2-.1.4-.3.7-.5.2-.2.4-.3.6-.3.1-.1.3-.3.5-.4l.2-.2c.1 0 .2-.1.3-.2.1-.1.3-.2.4-.2s.3-.1.5-.3c.2-.2.3-.3.4-.3.1 0 .2-.1.2-.2.5-.5.9-.8 1.2-.8l.3-.1h.1c.2 0 .3.2.4.5l-.3.4v.2l.1.2c0 .1-.1.3-.3.6s-.4.3-.6.3c-.3.1-.4.2-.5.4-.1.1-.3.3-.7.6s-.6.5-.7.7c-.1.2-.2.3-.4.3l-.4-.1c-.4.4-.6.6-.7.6h-.2l-.3.5c-.2 0-.3.1-.4.1h-.2c-.9.9-1.5 1.3-1.8 1.3h-.4s-.1.1-.2.3-.2.3-.3.4l-.3.3h-.5c-.1 0-.4.1-.7.4l-.3-.1c-.2 0-.4.1-.6.4l-.7.3-.5-.1c-.1 0-.2.1-.4.2l-.2.1c-.1 0-.3.1-.5.2l-.7.3H168l-.4-.1c-.1 0-.2.1-.3.3h-.1-.5l-.5.1c-.1 0-.3-.1-.7-.4-.3-.2-.5-.4-.6-.6l-.2-.4c-.2-.1-.4-.2-.4-.3l-.2.1c0 .1-.1.2-.2.3s-.2.2-.2.3c0 .2-.1.4-.2.8s-.4.9-.6 1.7l-.3.4c-.1.1-.1.1-.1.2s-.1.4-.4.7c0 .4-.2.7-.4 1.1l-.1.2v.3c0 .1-.2.4-.5 1.1v.5c-.1 0-.3.3-.5.9-.2.6-.5 1-.8 1.4l-.2.7-.2.4-.1.4c0 .1-.1.1-.1.2v.2l-.1.1c0 .2-.1.6-.4 1.1 0 .1-.1.2-.2.3-.2.1-.3.4-.5.6-.2.3-.5.5-.9.8l-1 .6c-.7 0-1.2-.4-1.5-1.1 0-.1-.2-.3-.5-.7-.3-.4-.4-1-.4-1.8l.2-.9c.1-.8.3-1.3.5-1.5l.3-.6c0-.1.1-.2.2-.3s.2-.3.2-.5c.1-.2.3-.4.6-.6.2-.5.4-.9.7-1.2l.3-.6c0-.2.2-.4.5-.6.1-.3.3-.6.6-.8s.4-.5.5-.5.1-.2.2-.6c.1-.3.2-.5.4-.6.2-.1.3-.2.4-.3l.2-.4c.2-.1.3-.3.5-.5.1-.2.3-.4.5-.5-.5-.9-.3-1-.1-1zm-5.5 12.1c.1 0 .5-.6 1.2-1.7l.2-.4c.1-.2.3-.4.4-.6v-.2c.1-.1.2-.2.2-.3l1.3-3.2c.2-.5.3-.8.4-1 .1-.2.3-.8.6-1.8-.1 0-.2.1-.3.3-.1.2-.2.3-.2.3h-.3s-.2.3-.4.8l-.1.1c-.2 0-.4.1-.5.4l-.4.8v.3c0 .4-.3.7-.8 1l-.3.6h-.2l.1.4c0 .3-.1.6-.3.9-.2.2-.3.4-.3.4v.8c-.2.4-.3.9-.3 1.5v.6zm11.1-14.7l.8-.1c.4-.1.7-.1.7-.1s.1 0 .2.1c.1 0 .2.1.4.1.1 0 .3.2.4.5.8-.3 1.2-.6 1.4-.7.2-.1.3-.2.4-.2h.1c0-.1.1-.2.1-.3 0-.1.2-.2.3-.4.2-.1.5-.5.8-1l.8-.8.8-1.1c.2-.3.4-.6.5-1l.1-.3c.1-.2.1-.3.1-.3 0-.1-.1-.3-.3-.7l-.6.2c-.2-.1-.3-.2-.5-.2-.1 0-.2.1-.3.2s-.2.2-.3.2-.3.1-.4.2-.3.2-.4.2c-.2 0-.4.1-.6.3h-.3l-.2.1-.3-.1c-.3.4-.6.6-.7.6s-.3.3-.5.6h-.3c-.1 0-.2.2-.3.5-.2.1-.3.2-.5.4l-.4.2c-.1.2-.3.3-.4.4l-.9 1.1c-.1.1-.1.1-.2.1s-.2 0-.2.1l.1.4h-.1c-.4.2-.6.5-.7 1l-.1.5c0 .1 0 .1.1.1s.1-.1.3-.2c.1-.1.3-.2.6-.4.2-.1.4-.2.5-.2z"/>
  <path class="st1" d="M182.3 147.8l.5-.4c.4 0 .6-.2.6-.5s.3-.6.8-.9l.3-.4c.2-.2.9-.5 1.9-.9.3-.1.4-.3.5-.4h.1l.4.1c.2 0 .5-.1.8-.2.3-.1.6-.2.9-.2h1c.1 0 .2 0 .4.1s.4.1.7.1c.3 0 .6.1.9.4.3.3.4.6.4.8 0 .5-.2.9-.7 1.4s-.9.7-1.2.8c-.3.2-.5.4-.6.5-.1.1-.3.2-.4.3-.1.1-.3.2-.4.2-.1 0-.1 0-.1-.1l-.1-.1c-.2 0-.5.3-.8.9h-.4c-.3.2-.4.3-.5.5-.1.2-.2.3-.5.3-.6.5-1 .8-1.2.8 0 0-.1 0-.3-.1-.1.1-.2.3-.2.5s-.1.3-.4.3l-.3.3h-.2l-.5.5c-.2 0-.5.1-.7.2 0 .2-.1.4-.1.7-.1.3-.1.4-.1.5 0 .4.4.6 1.2.6l1.1-.2c.3 0 .6-.1.8-.2.3-.1.5-.2.8-.2.1 0 .2 0 .4-.1l.2.1c.1-.2.3-.4.6-.6.3-.2.5-.3.7-.3l.2-.1c.1-.2.2-.3.3-.4l.2-.2c.1-.1.2-.2.3-.2h.4c.2-.4.4-.6.8-.7.3-.1.5-.2.6-.3.1-.1.2-.2.5-.3.2 0 .4-.1.5-.3.1-.2.3-.3.5-.5.2-.1.4-.3.5-.3.1-.1.2-.1.2-.1.1 0 .1.1.1.2s0 .2.1.2.1 0 .1-.1v-.4c0-.2.1-.4.4-.4l1-.6c0-.3.1-.5.3-.5.1-.1.3-.1.3-.2.1-.1.2-.1.3-.1.2 0 .3.1.3.3l-.1.6.1.6c0 .1-.1.2-.2.4s-.3.4-.3.7-.2.5-.3.5h-.1c-.3.3-.5.4-.7.5-.2.1-.3.1-.4.3l-.8.9c-.2.1-.3.3-.4.4-.1.1-.2.2-.3.2l-.2-.2h-.1c-.2 0-.3.1-.3.3 0 .2-.1.3-.2.5-.5.2-.8.4-.9.6h-.5c-.2 0-.3.1-.4.4s-.3.5-.7.5c-.4 0-.6.1-.8.3 0 0-.1.1-.2.1s-.3.1-.6.4l-1.9.7c-.2.1-.3.1-.3.1l-.6.1c-.1 0-.2-.1-.3-.2l-.2-.2-.4.1c-.3.1-.6.1-.9.1-.2 0-.3-.1-.5-.2s-.3-.2-.4-.2c-.4 0-.8-.3-.9-1h-.3c-.1 0-.3-.5-.6-1.6-.1-.1-.2-.2-.4-.3-.2-.1-.3-.2-.3-.4 0-.7.1-1.1.5-1.3.3-.2.5-.4.5-.5l.3-1.1c.1 0 .1-.2.2-.4l.5-.9c-.1-.3 0-.5.2-.9zm4.9-1.3l-.3.1c-.1 0-.2.2-.5.4s-.6.4-.9.5c-.3.1-.6.5-.9 1.1s-.5.9-.5 1 0 .1.1.1l.8-.3c.3-.1.6-.3.8-.5.3-.2.6-.5 1.1-.7l.2-.2c0-.1.2-.2.4-.3.3-.2.4-.3.6-.5l.2-.1c.3-.4.5-.6.8-.7.3-.1.4-.2.4-.3 0-.2-.1-.3-.4-.3-.1 0-.3.1-.6.2h-.5c-.1 0-.2.1-.5.3l-.3.2z"/>
  <path class="st1" d="M198.2 146.2l.3-.5c.1-.1.2-.3.4-.4.1-.1.3-.5.5-1.1.2-.6.4-1 .6-1.2s.5-.3.9-.3c.2 0 .5.1.9.3s.7.9 1.1 1.9c.4 1.1.5 1.8.5 2.3 0 .2.1.4.2.7.1.3.2.5.2.6l-.2.4v.9l-.3.7v.5c-.2.3-.3.5-.3.5 0 .1 0 .2.1.3.7-.3 1.2-.5 1.3-.7.2-.2.3-.3.5-.3.1 0 .4-.2.7-.6l.4-.2c.2-.2.3-.3.4-.5s.2-.2.4-.3c.1-.1.3-.2.5-.3.2-.1.5-.3.9-.5l.2-.3c.2-.2.5-.4.8-.6.3-.1.5-.2.5-.2.1 0 .2.1.3.4.1.3.2.5.2.8 0 .2-.2.5-.5.7s-.5.4-.6.5-.4.2-.7.3c0 0-.3.3-.8.9l-.5.3-.2.3c0 .1-.2.1-.6.2 0 0 0 .1-.1.2s-.2.2-.5.3c-.6.5-.8.8-.9.8l-.5.1c-.1.3-.2.4-.2.5-.4.1-.6.2-.6.4 0 0-.1.1-.2.1l-.1.1c-.4.3-.7.4-1 .5l-.5.1-.2.3c0 .1-.2.2-.6.3-.4.1-.7.3-.8.4l-.4.3c-.5.2-.8.3-.9.5h-.3c-.2 0-.6.2-1 .5-.5.3-.8.4-1.1.4-.9 0-1.5-.1-1.8-.3-.3-.2-.6-.5-.8-.8-.2-.3-.4-.6-.6-.8-.2-.2-.3-.3-.3-.5 0-.1.1-.2.2-.3s.3-.3.5-.6.6-.5 1.3-.6c0 0 .1 0 .3-.1.2-.1.3-.1.5-.1s.3.1.6.4h.5c.2.1.3.2.3.2.4 0 .8-.2 1.2-.5H198.6s.1-.1.2-.4l.4-.8.8-1v-.2s0-.2.1-.4v-.3c0-.1.1-.2.3-.3.2 0 .3-.1.3-.3v-.2c-.1-.2-.2-.3-.2-.4l.2-.4v-.5l.1-.2c-.1-.2-.1-.3-.1-.4l.1-.5s0-.2-.1-.4c-.1-.3-.1-.4-.2-.4s-.4.2-.9.7-.8.8-.9 1c-.1.2-.3.4-.6.5-.3.2-.5.3-.6.5-.1.2-.2.3-.4.3l-1.5 1.2-1.7 1.2-.2.2c-.6 0-.9-.3-.9-.9 0-.2.1-.5.3-1 .1-.1.2-.1.2-.1.1 0 .1-.1.1-.1l.1.1c.6-.4.9-.6 1.1-.6.2-.1.3-.2.5-.5l1-.7c.2-.2.6-.5 1.1-1 .5-.4.8-.7 1-1z"/>
  <path class="hexagon" d="M151 75l65 37.5v75L151 225l-65-37.5v-75z"/>
  <path class="square" fill=none stroke=#F15B26 stroke-width=3 stroke-miterlimit="10"  d="M66.5 64h168.6v168.6H65.5z"/>
</svg>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/MrPaulG/shapes-logo-xgpYQE */
svg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.square {
  stroke-dasharray: 700;
  stroke-dashoffset: -700;
  animation: draw-square 2s infinite;
  transform-origin: 50% 50%;
}

@keyframes draw-square {
  from {
    stroke-dashoffset: 700;
    transform: rotate(0deg);
  }
  to {
    stroke-dashoffset: 0;
    transform: rotate(720deg);
  }
}
.hexagon {
  stroke-dasharray: 500;
  stroke-dashoffset: -500;
  animation: draw-hexagon 1.5s infinite;
  transform-origin: 50% 50%;
}

@keyframes draw-hexagon {
  from {
    stroke-dashoffset: -500;
    transform: rotate(0deg);
  }
  to {
    stroke-dashoffset: 0;
    transform: rotate(360deg);
  }
}


/*Downloaded from https://www.codeseek.co/MrPaulG/shapes-logo-xgpYQE */
var shape = document.querySelector('.hexagon');
var shapelength = shape.getTotalLength();
console.log(shapeLength);

Comments