JSFiddle - React, Tailwind, and code Playground
by Scott Kaye
HTML
<svg class="candlelight-logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 135.625 143.796">
<defs>
<linearGradient id="a">
<stop offset="0" stop-color="#ff9800"/>
<stop offset="1" stop-color="#5e2400" stop-opacity="0"/>
</linearGradient>
<radialGradient id="c" cx="506.654" cy="239.153" r="33.914" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 1.27805 -1959.575 -280.344)" fy="239.153" fx="506.654" xlink:href="#a"/>
<filter id="d" width="1.186" height="1.145" x="-.093" y="-.073" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation="2.627"/>
</filter>
<filter id="b" width="1.842" height="1.659" x="-.421" y="-.329" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation="18.547"/>
</filter>
</defs>
<g transform="translate(1520.734 46.593)">
<circle class="bg" cx="-1452.922" cy="25.305" r="67.812"/>
<path fill="#ff9800" fill-rule="evenodd" d="M595.874 128.912s-55.36 32.898-65.576 59.813c-7.29 19.206-5.508 44.416 7.54 60.738 3.158 3.95 7.515 6.96 12.437 9.197-1.407-.98-2.67-2.104-3.71-3.404-7.867-9.842-8.94-25.043-4.544-36.625 6.16-16.22 39.55-36.06 39.55-36.06s-7.92 21.81-2.92 31.11c3.88 7.23 17.91 4.73 22.08 12.72 4.18 7.98 3.15 21.367-3.39 28.876-5.15 5.927-14.23 8.258-22.84 8.71 16.68.658 37.02-2.412 47.54-14.503 10.836-12.453 12.545-34.65 5.627-47.885s-30.18-9.1-36.616-21.08c-8.287-15.42 4.843-51.583 4.843-51.583z" transform="translate(-1824.272 -100.732) scale(.64147)" filter="url(#b)"/>
<path fill="#ff9800" fill-rule="evenodd" d="M-1442.037-18.04s-35.512 21.105-42.065 38.37c-4.677 12.32-3.533 28.49 4.836 38.96 2.026 2.536 4.82 4.465 7.978 5.9-.902-.628-1.712-1.35-2.38-2.183-5.046-6.313-5.734-16.064-2.914-23.494 3.95-10.41 25.364-23.135 25.364-23.135s-5.08 13.986-1.874 19.952c2.49 4.634 11.487 3.035 14.163 8.155 2.68 5.12 2.02 13.705-2.17 18.522-3.31 3.802-9.12 5.298-14.65 5.588 10.7.42 23.75-1.548 30.5-9.304...
SCSS
svg.candlelight-logo {
width: 300px;
path.glow {
animation: pulse 2s ease infinite alternate;
}
}
@keyframes pulse {
0% { opacity: 0 }
100% { opacity: 1 }
}