LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

pathogen

CSS
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 19.98s linear infinite;
          animation: move2 19.98s linear infinite;
}

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

#rna4 {
  stroke: rgba(0, 0, 0, 0.85);
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-animation: move4 19.98s linear infinite;
          animation: move4 19.98s 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);
  }
}

Description

A logo idea utilising SVG shapes (and filters) animated with CSS animations.
Term
Wed, 12/06/2017 - 19:43

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv