JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<i class="ww-icon ww-icon-graph"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve">
  <g class="ww-icon-graph-disc">
    <path style="stroke:#374750;stroke-width:16;stroke-miterlimit:10;" d="M400,9c215.943,0,391,175.057,391,391
      S615.943,791,400,791S9,615.943,9,400S184.057,9,400,9z"/>
  </g>
  <g class="ww-icon-graph-bars">
    <path style="fill:#374750;" d="M236.719,309.141h81.938V603h-81.938V227.141z"/>
    <path style="fill:#859AA8;" d="M358.658,309.141h81.938V603h-81.938V227.141z"/>
    <path style="fill:#D3DDE7;" d="M481.342,309.141h81.938V603h-81.938V227.141z"/>
  </g>
  <g class="ww-icon-graph-axis">
    <path d="M187,187h11.954v425H187V187z"/>
    <path d="M187,601h425.046v11.953H187V601z"/>
  </g>
</svg></i>
<p><strong>Interest</strong></p>
<p><sup>Wealth Wizards dynamic icon</sup></p>

CSS

@import url(https://fonts.googleapis.com/css?family=Ubuntu);
body {
  text-align: center;
  margin: 50px;
  background-color: #D3DDE7;
  color: #859AA8;
  font-family: 'Ubuntu', sans-serif;
  font-size: 20px;
}

* {
  box-sizing: border-box;
}

body > * + * {
  margin-top: 1em;
}

.ww-icon {
  display: inline-block;
  width: 100%;
  max-width: 16em;
  cursor: pointer;
}

.ww-icon-graph {
  transform-origin: center center;
  transition: transform 300ms ease-in-out;
}

.ww-icon-graph-disc path {
  fill: rgba(255, 255, 255, 0.5);
  transition: fill 300ms, stroke 300ms;
}

.ww-icon-graph-axis path {
  fill: #374750;
  transition: fill 300ms, stroke 300ms;
}

.ww-icon-graph-bars path {
  transform-origin: bottom center;
  transition: transform 300ms, fill 300ms, stroke 300ms;
}

.ww-icon-graph-bars path:nth-child(1) {
  transform: scaleY(1.2);
}

.ww-icon-graph-bars path:nth-child(2) {
  transform: scaleY(0.8);
}

.ww-icon-graph-bars path:nth-child(3) {
  transform: scaleY(0.4);
}

.ww-icon-graph:hover .ww-icon-graph-disc path {
  fill: #fff;
}

.ww-icon-graph:hover .ww-icon-graph-axis path {
  fill: #D52027;
}

.ww-icon-graph:hover .ww-icon-graph-bars path {
  animation-name: ww-icon-graph-bars;
  animation-duration: 4s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

.ww-icon-graph:hover .ww-icon-graph-bars path:nth-child(1) {
  animation-delay: 0s;
}

.ww-icon-graph:hover .ww-icon-graph-bars path:nth-child(2) {
  animation-delay: -2s;
}

.ww-icon-graph:hover .ww-icon-graph-bars path:nth-child(3) {
  animation-delay: -0.5s;
}

@keyframes ww-icon-graph-bars {
  0% {
    transform: scaleY(1.2);
  }
  10% {
    transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(0.4);
  }
  30% {
    transform: scaleY(1);
  }
  40% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.8);
  }
  60% {
    transform: scaleY(0.8);
  }
  70% {
    transform: scaleY(0.2);
  }
  80% {
    transform: scaleY(0.2);
  }
  90% {
    transform:...

JavaScript

/**
 * Wealth Wizards - Icon - Interest
 */