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 ebakernz, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ebakernz ©

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 xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">
  <circle fill="#EF4136" cx="150.128" cy="144.97" r="52.97"/>
  <g fill="#FFF">
    <path d="M102.802 131.98c0 .813.237 1.54.712 2.183s1.104 1.237 1.888 1.786c.783.548 1.672 1.07 2.665 1.563.993.494 2.01 1.003 3.054 1.527 1.043.524 2.062 1.086 3.055 1.684.993.6 1.88 1.274 2.665 2.027.784.754 1.413 1.605 1.888 2.555.475.95.712 2.036.712 3.258 0 1.11-.18 2.132-.537 3.063-.358.932-.85 1.768-1.472 2.508s-1.36 1.395-2.21 1.962c-.852.567-1.772 1.037-2.76 1.407s-2.023.65-3.108.842c-1.086.19-2.178.287-3.276.287-1.542 0-3.042-.188-4.498-.564-1.456-.377-2.752-.944-3.887-1.703s-2.044-1.71-2.73-2.85c-.684-1.142-1.026-2.478-1.026-4.008 0-.79.126-1.483.38-2.083.252-.598.567-1.098.943-1.5.376-.4.787-.702 1.23-.906.444-.204.858-.306 1.24-.306.395 0 .725.108.99.324.265.216.398.553.398 1.01 0 .21-.025.43-.074.666-.05.234-.1.49-.157.768-.055.278-.108.583-.157.917-.05.333-.074.697-.074 1.092 0 .863.197 1.61.592 2.238.395.63.92 1.148 1.573 1.555.654.407 1.407.71 2.258.907.852.197 1.734.296 2.647.296 1.074 0 2.147-.13 3.22-.39 1.074-.258 2.037-.64 2.888-1.146.852-.506 1.542-1.126 2.073-1.86.53-.733.796-1.576.796-2.526 0-.876-.24-1.66-.714-2.35s-1.104-1.33-1.888-1.917c-.784-.586-1.675-1.138-2.675-1.656-1-.518-2.017-1.042-3.054-1.573-1.038-.53-2.056-1.09-3.055-1.675s-1.89-1.23-2.674-1.934c-.783-.704-1.412-1.49-1.887-2.36-.475-.87-.712-1.86-.712-2.97 0-1.037.25-2.058.75-3.064.5-1.006 1.253-1.907 2.26-2.703 1.004-.795 2.26-1.44 3.766-1.933 1.505-.493 3.27-.74 5.293-.74 1.282 0 2.538.19 3.766.574 1.228.384 2.323.926 3.285 1.63.964.703 1.738 1.542 2.324 2.517.586.975.88 2.055.88 3.24 0 .702-.12 1.424-.362 2.165s-.626 1.512-1.157 2.313c-.518.777-1.083 1.354-1.693 1.73-.61.377-1.164.565-1.657.565-.37 0-.673-.108-.907-.324-.234-.215-.352-.54-.352-.972 0-.32.074-.7.222-1.138s.4-.94.76-1.508c.332-.543.58-1.052.74-1.527.16-.474.24-.915.24-1.322 0-.63-.17-1.182-.51-1.657-.338-.474-.808-.872-1.406-1.193-.6-.32-1.317-.56-2.156-.722-.84-.16-1.758-.24-2.758-.24-1.11 0-2.076.126-2.897.378-.82.253-1.504.58-2.053.98-.55.402-.957.85-1.222 1.343-.26.495-.393.983-.393 1.463zM129.363 144.75c.506-.666 1.074-1.38 1.703-2.146.63-.765 1.283-1.478 1.962-2.138.678-.66 1.354-1.21 2.026-1.647s1.305-.658 1.897-.658c.15 0 .315.028.5.083.186.055.362.157.53.305.166.148.304.355.416.62.11.266.167.608.167 1.027 0 .84-.118 1.656-.352 2.452s-.49 1.59-.767 2.387c-.277.796-.53 1.607-.76 2.434-.228.828-.34 1.692-.34 2.592 0 .494.073.89.22 1.185.15.296.34.444.575.444.296 0 .61-.06.944-.185s.667-.284 1-.48.66-.423.98-.676.624-.516.908-.788c.678-.63 1.345-1.345 2-2.147l.313 4.923c-.222.173-.503.39-.842.647-.338.26-.715.534-1.128.824-.414.29-.86.582-1.342.878-.48.296-.966.56-1.453.786-.488.23-.975.417-1.462.565-.487.146-.953.22-1.397.22-.68 0-1.268-.18-1.768-.545-.5-.364-.91-.827-1.23-1.39-.322-.56-.563-1.174-.723-1.84-.16-.667-.24-1.296-.24-1.89 0-.394.05-.834.156-1.322.105-.487.234-.978.39-1.47s.326-.976.518-1.445c.192-.47.37-.89.538-1.26s.312-.67.435-.906c.123-.234.204-.37.24-.407l-.388-.056c-.21.135-.564.48-1.064 1.036-.5.555-1.063 1.256-1.692 2.1-.63.847-1.28 1.796-1.953 2.852-.672 1.055-1.28 2.145-1.823 3.267-.272.556-.494 1.04-.667 1.453-.173.414-.342.753-.51 1.02-.166.264-.348.465-.545.6s-.45.204-.76.204c-.406 0-.727-.117-.96-.352s-.415-.546-.538-.935c-.124-.39-.204-.83-.24-1.323-.038-.494-.057-1-.057-1.52 0-.825.01-1.908.028-3.247s.077-2.823.176-4.45c.098-1.63.24-3.345.425-5.147.185-1.8.447-3.582.787-5.34s.765-3.436 1.277-5.034c.51-1.598 1.134-3.005 1.868-4.22.734-1.215 1.595-2.18 2.582-2.897.987-.715 2.122-1.073 3.406-1.073.667 0 1.212.1 1.638.296.426.198.765.475 1.018.833.252.358.428.787.527 1.287.098.5.147 1.058.147 1.675 0 .914-.13 1.925-.39 3.036-.258 1.11-.6 2.266-1.026 3.462-.424 1.197-.91 2.41-1.452 3.637-.543 1.227-1.1 2.418-1.666 3.57-.568 1.155-1.126 2.244-1.675 3.268-.55 1.024-1.034 1.925-1.453 2.702l.37.26zm1.647-11.438c.728-1.888 1.255-3.48 1.583-4.775.327-1.295.49-2.25.49-2.87 0-.937-.124-1.406-.37-1.406-.32 0-.796.525-1.425 1.574s-1.37 2.573-2.22 4.572c-.21.68-.405 1.382-.584 2.11-.18.73-.34 1.453-.48 2.175-.143.723-.272 1.432-.39 2.13-.118.696-.22 1.36-.306 1.99-.21 1.467-.37 2.905-.48 4.31.332-.776.696-1.622 1.09-2.535s.785-1.817 1.167-2.71l1.083-2.537s.62-1.47.842-2.026z"/>
    <path d="M161.31 151.73c-.283.395-.663.857-1.138 1.388-.476.53-1.01 1.036-1.602 1.518-.592.48-1.228.89-1.906 1.222s-1.357.5-2.036.5c-.814 0-1.493-.263-2.036-.787s-1.012-1.285-1.406-2.285c-.296.346-.66.698-1.092 1.056-.432.358-.904.683-1.416.973s-1.046.527-1.6.713c-.556.185-1.11.277-1.667.277-.59 0-1.168-.12-1.73-.36s-1.058-.587-1.49-1.037c-.432-.45-.777-1-1.037-1.647s-.39-1.38-.39-2.194c0-.925.13-1.875.39-2.85.26-.975.617-1.928 1.074-2.86.456-.932.996-1.81 1.62-2.638.623-.827 1.305-1.548 2.045-2.166.74-.617 1.52-1.107 2.34-1.472.822-.364 1.658-.546 2.51-.546.283 0 .505.056.665.167.16.112.293.24.398.38l.305.417c.1.136.223.235.37.296.148.062.3.102.454.12s.312.028.472.028c.136 0 .274-.002.417-.008.142-.006.28-.01.416-.01.185 0 .356.02.518.057.16.036.302.116.426.24.123.124.22.296.287.518.068.222.103.525.103.907 0 .592-.062 1.25-.186 1.97-.123.723-.26 1.463-.407 2.222-.147.76-.284 1.518-.407 2.277s-.185 1.478-.185 2.156c0 .58.052 1.034.157 1.36.104.327.33.49.676.49.26 0 .53-.064.815-.194.283-.13.57-.3.86-.51.29-.208.58-.446.87-.71.29-.266.564-.54.823-.825.604-.666 1.216-1.418 1.833-2.257l.89 4.106zm-15.807-1.463c0 .31.02.608.065.897.043.29.12.55.23.777.112.23.26.415.445.557.186.142.42.213.704.213.457 0 .87-.197 1.24-.593.37-.395.69-.87.962-1.425.27-.555.49-1.13.656-1.72.167-.593.274-1.087.324-1.482l1.13-5.44c-.507 0-1 .125-1.482.378-.48.253-.935.595-1.36 1.027-.426.432-.818.926-1.176 1.48s-.666 1.14-.925 1.75-.46 1.225-.602 1.842c-.14.617-.212 1.197-.212 1.74z"/>
    <path d="M166.678 152.97c1.246 0 2.382-.124 3.405-.37 1.024-.247 1.953-.58 2.786-1 .832-.42 1.584-.91 2.257-1.472s1.28-1.163 1.823-1.805l.204 4.238c-.396.482-.873.948-1.435 1.398-.563.45-1.177.846-1.843 1.185-.666.34-1.367.61-2.1.814-.735.204-1.46.306-2.176.306-.086 0-.193-.012-.323-.037-.13-.024-.354-.067-.676-.13-.32-.062-.78-.145-1.378-.25-.6-.104-1.41-.23-2.434-.38v.334c0 2.246-.188 4.285-.564 6.117-.377 1.833-.88 3.396-1.51 4.692s-1.35 2.294-2.165 2.997c-.814.704-1.66 1.056-2.536 1.056-.703 0-1.29-.173-1.76-.52-.468-.345-.84-.81-1.118-1.396-.278-.586-.476-1.27-.593-2.055-.117-.783-.176-1.613-.176-2.49 0-.505.08-1.076.24-1.71.16-.637.377-1.303.648-2s.577-1.407.916-2.13c.34-.72.69-1.42 1.047-2.1.84-1.58 1.795-3.208 2.87-4.887l.415-2.96c.142-1.012.32-1.993.537-2.944.215-.95.486-1.85.813-2.7.326-.853.746-1.593 1.26-2.222.51-.63 1.124-1.13 1.84-1.5.716-.37 1.58-.555 2.592-.555.752 0 1.456.102 2.11.306.653.203 1.228.533 1.72.99s.883 1.045 1.167 1.767.426 1.607.426 2.656c0 .84-.123 1.65-.37 2.434-.247.784-.633 1.534-1.156 2.25-.525.715-1.19 1.384-2 2.007-.808.623-1.767 1.182-2.878 1.675l.114.39zm-8.774 11.456c0 .1.02.26.064.48.044.224.114.445.213.668.1.222.23.42.39.592.16.173.358.26.593.26.21 0 .382-.115.52-.343.135-.23.245-.534.332-.916.086-.383.147-.814.185-1.296s.068-.974.093-1.48c.024-.506.04-1 .046-1.48.006-.48.02-.913.046-1.295.037-.667.064-1.23.083-1.694l.046-1.155c.012-.346.024-.636.036-.87-.234.407-.462.88-.685 1.416-.222.538-.432 1.096-.63 1.676-.197.58-.376 1.16-.536 1.74s-.298 1.12-.415 1.62c-.118.5-.21.93-.278 1.295-.07.363-.103.626-.103.786zm6.442-13.326c.74-.37 1.38-.784 1.916-1.24.536-.456 1-.944 1.388-1.462.39-.52.706-1.055.953-1.61.247-.556.444-1.123.593-1.703.062-.27.102-.59.12-.953.02-.364-.02-.706-.11-1.027-.094-.32-.254-.595-.482-.824-.23-.227-.546-.34-.953-.34-.455 0-.856.126-1.202.378-.346.253-.645.596-.897 1.027-.252.432-.462.944-.628 1.536-.167.593-.303 1.23-.407 1.908-.105.68-.18 1.385-.223 2.12-.045.733-.066 1.464-.066 2.192z"/>
    <path d="M181.188 156.264c-1.16 0-2.175-.21-3.045-.63-.87-.42-1.595-.983-2.175-1.693-.58-.708-1.015-1.528-1.305-2.46-.29-.932-.435-1.91-.435-2.934 0-.69.067-1.422.203-2.193.137-.77.344-1.527.62-2.268.28-.74.627-1.446 1.047-2.12.42-.67.91-1.264 1.472-1.776.56-.513 1.19-.92 1.887-1.223.697-.302 1.472-.454 2.323-.454.69 0 1.332.11 1.925.333.592.222 1.107.534 1.546.935.44.402.78.887 1.027 1.454.247.567.37 1.203.37 1.906 0 .765-.187 1.53-.564 2.295-.376.766-.897 1.487-1.563 2.166s-1.46 1.284-2.38 1.814c-.918.53-1.914.944-2.988 1.24.186.333.367.61.547.833.178.222.36.396.545.52.185.122.38.21.583.258.203.05.422.074.657.074.74 0 1.52-.15 2.34-.445s1.62-.667 2.398-1.11c.777-.444 1.51-.93 2.202-1.453s1.277-1.02 1.76-1.49l2.387 2.48c-1.086 1.123-2.24 2.116-3.462 2.98-.53.37-1.1.733-1.712 1.092-.61.357-1.252.676-1.925.953s-1.37.5-2.092.666c-.72.168-1.45.25-2.192.25zm-2.46-8.7c.443 0 .928-.114 1.452-.343.524-.227 1.012-.52 1.463-.878.45-.358.83-.747 1.138-1.166s.464-.827.464-1.222c0-.555-.102-1.012-.306-1.37-.203-.358-.453-.537-.75-.537-.53 0-.983.1-1.36.296-.376.198-.69.454-.943.768-.253.316-.457.674-.61 1.075-.155.4-.27.805-.352 1.212-.08.407-.133.802-.158 1.185-.026.384-.038.71-.038.982z"/>
    <path d="M188.907 149.156c.69-.592 1.252-1.086 1.684-1.48.433-.396.804-.756 1.11-1.084.31-.327.59-.657.844-.99l.897-1.185s.766-1.015 1.26-1.675c.493-.66 1.135-1.483 1.925-2.47.16-.223.34-.44.537-.648.197-.21.416-.398.657-.564.24-.167.505-.302.795-.407.29-.105.613-.158.972-.158.592 0 1.048.065 1.37.194.32.13.555.286.702.47.147.186.233.38.26.584.023.204.036.38.036.527 0 .297-.118.625-.352.982-.235.358-.494.703-.777 1.036-.284.333-.553.64-.806.917-.252.277-.396.484-.434.62 0 .382.027.73.083 1.045.055.315.13.624.22.926.094.302.19.623.288.962s.194.73.287 1.175.167.957.222 1.536c.056.58.084 1.264.084 2.054.445-.297.923-.564 1.436-.805.512-.242 1.045-.492 1.6-.75.557-.26 1.127-.547 1.713-.862s1.175-.694 1.767-1.138l.02 4.146c-.766.593-1.65 1.148-2.657 1.666-1.006.52-2.06.976-3.165 1.37s-2.22.706-3.35.935-2.2.343-3.212.343c-.728 0-1.406-.068-2.035-.204-.63-.136-1.183-.35-1.657-.64s-.86-.668-1.155-1.137c-.297-.47-.476-1.038-.537-1.704-.173.037-.343.062-.51.074-.166.012-.33.02-.49.02-.197 0-.382-.008-.555-.02-.173-.013-.32-.06-.444-.14-.124-.08-.223-.21-.297-.39-.074-.178-.11-.434-.11-.767 0-.297.073-.57.22-.824.15-.254.322-.48.52-.677.197-.197.395-.37.593-.518.194-.145.342-.262.44-.35zm2.37 2.37c.146 0 .31.092.49.276.178.186.385.39.62.61.233.223.505.427.813.61.308.187.66.278 1.055.278.48 0 .88-.08 1.194-.24.313-.16.563-.373.748-.64.186-.264.314-.572.39-.925.073-.35.11-.718.11-1.1 0-.334-.02-.674-.064-1.02-.044-.345-.1-.675-.167-.99-.068-.314-.142-.61-.222-.888-.08-.278-.15-.515-.213-.712l-4.756 4.74z"/>
  </g>
  <path class="hexagon" fill="none" stroke="#2B3990" stroke-width="2" stroke-miterlimit="10" d="M114.66 206.6l-35.342-61.21 35.34-61.214h70.683l35.342 61.213-35.34 61.21z"/>
  <path class="square" fill="none" stroke="#EF4136" stroke-width="2" stroke-miterlimit="10" d="M74.88 68.238h151.486v153.465H74.88z"/>
</svg>
  
  

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




</body>

</html>

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

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

@-webkit-keyframes draw-square {
  from {
    stroke-dashoffset: -650;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    stroke-dashoffset: 0;
    -webkit-transform: rotate(720deg);
            transform: rotate(720deg);
  }
}

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

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

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


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

Comments