JSFiddle - React, Tailwind, and code Playground

by zlerp

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

<div class='center'>

<h3>
  HOVER SVG
</h3>


  <svg version="1.1" id="fb-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       viewBox="0 0 300 298.6" style="enable-background:new 0 0 300 298.6;" xml:space="preserve">
    <circle class="social-circle" cx="150" cy="153.2" r="141.4"/>
    <path class="social-path" d="M123.9,203c0-15.7,0-31.3,0-47c0-2.5-0.5-3.6-3.3-3.4c-4.9,0.2-9.8,0-14.7,0.1c-1.9,0-2.8-0.3-2.8-2.5
                                 c0.1-9.8,0.1-19.5,0-29.3c0-2.2,0.8-2.6,2.7-2.5c5.1,0.1,10.2-0.1,15.3,0.1c2.2,0.1,2.8-0.6,2.8-2.8c-0.1-7.5-0.1-15.1,0-22.6
                                 c0.1-8.4,2.2-16.3,6.7-23.4c6.8-10.7,17.2-15.6,29.4-16.1c11.4-0.5,22.9-0.2,34.3-0.3c1.9,0,2.2,0.8,2.2,2.4c0,9.8-0.1,19.5,0,29.3
                                 c0,2-0.8,2.4-2.6,2.3c-5.5-0.1-11.1-0.1-16.7,0c-6.9,0-11.4,3.6-11.9,10.4c-0.5,6.2-0.2,12.4-0.3,18.6c0,2,1.3,1.7,2.5,1.7
                                 c8.3,0,16.7,0.2,25-0.1c3.1-0.1,3.7,0.9,3.4,3.8c-1.1,9.6-1.9,19.2-2.8,28.8c-0.2,2.1-1,2.7-3.1,2.7c-7-0.1-14,0.1-21-0.1
                                 c-2.8-0.1-3.5,0.8-3.5,3.5c0.1,30.9,0,61.7,0.1,92.6c0,3.1-0.6,4.1-3.9,4.1c-11.7-0.2-23.3-0.2-35,0c-2.5,0-3.1-0.7-3.1-3.1
                                 C124,234.4,123.9,218.7,123.9,203z"/>
  </svg>
  

</div>

SCSS

.center{
  top: 0;
  width: 100%;  
}
h3 {
    text-align: center;
    padding-top: 70px;
    color: blue;

}

svg{
  
  height: 100px;
  width: 100px;
  display: block;
  margin: auto;
  padding-top: 30px;
  
  .social-circle {
    fill: none;

  }
  
  .movingCirc {
        stroke-width: 10;
        stroke: blue;
        stroke-dasharray: 900;
        -webkit-animation: dash-circ 2s ease-in-out ;             
         animation: dash-circ 2s ease-in-out;
  }
  
  .social-path {
    fill: none;
    stroke-width: 10;
    stroke: blue;
    stroke-dasharray: 615;
    -webkit-animation: dash 4s linear infinite;             animation: dash 4s linear infinite;

  }
}
  @keyframes dash {
   from{
     stroke-dashoffset:615;
   }
   to{
      stroke-dashoffset: 0;
    }
  }  
  @keyframes dash-circ {
   from{
     stroke-dashoffset:900;
   }
   to{
      stroke-dashoffset: 0;
    }
  }

JavaScript

$(document).ready(function() {
  $('svg').hover(function() {
    /* Stuff to do when the mouse enters the element */
      $(this).find('circle').addClass('movingCirc');
      console.log('on');
  }, function() {
    /* Stuff to do when the mouse leaves the element */
    $(this).find('circle').removeClass('movingCirc');
    console.log("hover off");
  });
});