CSS Animated SVG logo idea

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

A logo idea utilising SVG shapes (and filters) animated with CSS animations.Slowly working on a decent library of Jade SVG mixins / functions!

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>CSS Animated SVG logo idea</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<div class="container">
  <svg class="virus" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet" id="virus">
    <defs>
      <clipPath id="clipPath">
        <circle cx="50" cy="50" r="45"></circle>
      </clipPath>
    </defs>
    <filter x="0" y="0" id="noise">
      <feTurbulence type="fractalNoise" baseFrequency="0.3" numOctives="2" stitchTiles="stitch"></feTurbulence>
    </filter>
    <circle cx="50" cy="50" r="45" clip-path="url(#clipPath)" filter="url(#noise)"></circle>
    <circle class="rna" cx="61" cy="60" r="8" id="rna1"></circle>
    <circle class="rna" cx="59" cy="71" r="8" id="rna2"></circle>
    <circle class="rna" cx="39" cy="57" r="6" id="rna3"></circle>
    <circle class="rna" cx="57" cy="82" r="6" id="rna4"></circle>
    <circle class="circle" cx="50" cy="50" r="45"></circle>
  </svg>
  <h1 class="heading">pathogen</h1>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/pathogen/css-animated-svg-logo-idea-ojwXXe */
html {
  box-sizing: border-box;
  font-size: 32px;
  height: 100%;
}

*, *::before, *::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Quicksand', sans-serif;
  overflow: hidden;
}

.container {
  margin: 2.5rem 0 0 0;
  text-align: center;
}

.heading {
  display: inline-block;
  font-size: 3.125rem;
  font-weight: 400;
}

.virus {
  height: 1.665rem;
  width: 1.665rem;
}

.circle {
  fill: none;
  stroke: black;
  stroke-width: 0.25rem;
}

.rna {
  fill: white;
  -webkit-transform-origin: 1.5rem 1.5rem;
          transform-origin: 1.5rem 1.5rem;
}

#rna1 {
  stroke: rgba(0, 0, 0, 0.85);
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-animation: move1 9.99s linear infinite;
          animation: move1 9.99s linear infinite;
}

#rna2 {
  stroke: rgba(0, 0, 0, 0.85);
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-animation: move2 9.99s linear infinite;
          animation: move2 9.99s linear infinite;
}

#rna3 {
  stroke: rgba(0, 0, 0, 0.85);
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-animation: move3 9.99s linear infinite;
          animation: move3 9.99s linear infinite;
}

#rna4 {
  stroke: rgba(0, 0, 0, 0.85);
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-animation: move4 29.97s linear infinite;
          animation: move4 29.97s linear infinite;
}

@-webkit-keyframes move1 {
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}

@keyframes move1 {
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
@-webkit-keyframes move2 {
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
@keyframes move2 {
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
@-webkit-keyframes move3 {
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
@keyframes move3 {
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
@-webkit-keyframes move4 {
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
@keyframes move4 {
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}

Comments