JSFiddle - React, Tailwind, and code Playground

approved svg

by Travis Almand

HTML

<?xml version="1.0" encoding="UTF-8"?>
<svg width="98px" height="90px" viewBox="0 0 98 90" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 48.1 (47250) - http://www.bohemiancoding.com/sketch -->
    <title>Approved</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <rect id="path-1" x="0" y="0" width="17.600398" height="11.7335986"></rect>
        <rect id="path-2" x="0" y="0" width="17.600398" height="11.7335986"></rect>
    </defs>
    <g id="Approved" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-111.000000, -106.000000)">
        <g transform="translate(111.000000, 106.000000)">
            <path d="M40.2184201,10.5611662 C40.6349079,10.4467242 41.0653115,10.6915806 41.1797535,11.1080683 C41.2941955,11.5245561 41.0493391,11.9549597 40.6328514,12.0694017 C38.2498271,12.7242064 35.9570354,13.6501236 33.7937017,14.8261629 C33.4142251,15.0324553 32.9393656,14.8920618 32.7330732,14.5125852 C32.5267808,14.1331087 32.6671742,13.6582492 33.0466508,13.4519567 C35.315003,12.2188269 37.719362,11.2478546 40.2184201,10.5611662 Z M30.0893707,15.2613484 C30.4458157,15.0174101 30.9325226,15.1086148 31.176461,15.4650598 C31.4203993,15.8215049 31.3291946,16.3082118 30.9727496,16.5521502 C22.210233,22.5489057 16.8636278,32.4625832 16.8636278,43.2809949 C16.8636278,61.1558826 31.3540873,75.6463421 49.228975,75.6463421 C67.1038627,75.6463421 81.5943222,61.1558826 81.5943222,43.2809949 C81.5943222,25.4061072 67.1038627,10.9156477 49.228975,10.9156477 C47.4069002,10.9156477 45.6042171,11.066133 43.8333463,11.363255 C43.4073757,11.4347256 43.0041199,11.1473466 42.9326493,10.721376 C42.8611787,10.2954054 43.1485577,9.8921496 43.5745283,9.82067898 C45.4308383,9.50922175 47.3200908,9.35150978 49.228975,9.35150978 C67.9677122,9.35150978 83.1584601,24.5422577 83.1584601,43.2809949 C83.1584601,62.0197321 67.9677122,77.21048 49.228975,77.21048 C30.4902378,77.21048...

SCSS

#star-container {
  animation: 1s pulseStar infinite alternate;
  transform-origin: 50px 43px;
}

#Counter-Clockwise-Circle {
  animation: 6s rotateCircles linear infinite;
  transform-origin: 49px 43px;
}
#Clockwise-Circle {
  animation: 6s rotateCircles linear infinite;
  animation-direction: reverse;
  transform-origin: 49px 43.2px;
}

#Bubble-1 {
  animation: 1.25s popContent 0.75s infinite;
}
#Plus-Sign-1 {
  animation: 1s popContent infinite;
}
#Bubbble-2 {
  animation: 0.75s popContent 0.25s infinite;
}

#Flower-1 {
  animation: 1.25s popContent 0.75s infinite;
}
#Plus-Sign-2 {
  animation: 1s popContent infinite;
}
#Bubble-3 {
  animation: 0.75s popContent 0.25s infinite;
}

@keyframes pulseStar {
  from { transform: scale3d(1, 1, 1); }
  to { transform: scale3d(1.25, 1.25, 1); }
}

@keyframes rotateCircles {
  from { transform: rotate3d(0, 0, 1, 0deg); }
  to { transform: rotate3d(0, 0, 1, 360deg); }
}

@keyframes popContent {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}