JSFiddle - React, Tailwind, and code Playground
by luka kupunia
HTML
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="89.231" height="87.635" viewBox="0 0 89.231 87.635">
<defs>
<clipPath id="clip-path">
<path id="Clip_4" data-name="Clip 4" d="M0,0H34.966V53.062H0Z" transform="translate(0.57 0.088)" fill="none"/>
</clipPath>
<clipPath id="clip-path-2">
<path id="Clip_7" data-name="Clip 7" d="M0,0H61.908V19.133H0Z" transform="translate(0.27 0.222)" fill="none"/>
</clipPath>
</defs>
<g id="Group_9" data-name="Group 9" transform="matrix(0.469, 0.883, -0.883, 0.469, 55.322, 2.187)">
<path id="Fill_1" data-name="Fill 1" d="M29.461,32.836c.27,2.8.411,4.254-1.859,6.648-2.347,2.474-8.263,7.06-14.318,10.556a51.59,61.591,0,0,1-8.6,4.2c-1.938.7-3.568.994-4.378-.408A2.7,2.7,0,0,1,.31,51.361C2.416,45.654,8.483,35,12.434,28.073q.605-1.063,1.247-2.171C19.764,15.4,27.832,2.553,29.419.494c.229-.3.645-.646,1.033-.422a.749.749,0,0,1,.273.817c-.008.045-.1.422-.138.57-2.614,10.61-2.333,21.009-1.125,31.377" transform="matrix(0.07, 0.998, -0.998, 0.07, 44.06, 11.508)" fill="#fff"/>
<g id="Group_5" data-name="Group 5" transform="translate(30.968 0.266)">
<path id="Clip_4-2" data-name="Clip 4" d="M0,0H34.966V53.062H0Z" transform="translate(0.57 0.088)" fill="none"/>
<g id="Group_5-2" data-name="Group 5" transform="translate(1.408 -2.649)" clip-path="url(#clip-path)">
<path id="Fill_3" data-name="Fill 3" d="M6.811,35.749c-2.558-1.166-3.89-1.771-4.828-4.935C1.014,27.546,0,20.129,0,13.137A61.636,61.636,0,0,1,.666,3.586C1.03,1.558,1.589,0,3.209,0A2.69,2.69,0,0,1,5.343,1.241C9.232,5.918,15.423,16.5,19.45,23.384q.617,1.057,1.255,2.165C26.756,36.066,33.851,49.48,34.842,51.884c.143.348.237.882-.151,1.1a.75.75,0,0,1-.844-.171c-.036-.03-.315-.3-.425-.405C25.541,44.842,16.395,39.886,6.811,35.749" transform="translate(0.57 0.088)" fill="#fff"/>
</g>
</g>
<g id="Group_8" data-name="Group 8" transform="translate(0.941 43.945)">
<path id="Clip_7-2"...
CSS
body {
background: black;
margin: 50px;
}