JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<span class="burger"></span>

<br><br>

<span class="heart"></span>

<svg height="0" width="0">
	<defs>
		<clipPath id="svgPath">
			<path fill="#FFFFFF" stroke="#000000" stroke-width="1.5794" stroke-miterlimit="10" d="m64.302 24.739c5.8914 0 8.1844-3.7042 8.1844-7.0203 0-2.0461-1.1994-4.1628-3.3867-4.7272 2.8575-0.28222 5.3622-2.9986 5.3622-6.1383 0-2.9986-2.2931-5.6444-6.3853-5.6444h-11.43l-5.1858 23.53zm1.6228-14.182h-6.3147l1.0936-4.9389h6.0325c1.3053 0 2.3636 0.91722 2.3636 2.1167 0 1.3758-0.74083 2.8222-3.175 2.8222zm-1.9756 9.772h-6.4911l1.1642-5.3622h6.2794c1.5875 0 2.5753 0.9525 2.5753 2.2931 0 1.6581-1.27 3.0692-3.5278 3.0692z"/>
		</clipPath>
	</defs>
</svg>





<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="250" height="auto" version="1.1" viewBox="0 0 191 41" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<defs>

<linearGradient id="linearGradient1410" x1="34" x2="78" y1="83" y2="83" gradientTransform="translate(-26 -77)" gradientUnits="userSpaceOnUse">

<stop stop-color="#ff851b" stop-opacity="0" offset="0"/>

<stop stop-color="#ff851b" offset="1"/>

</linearGradient>



</defs>

<g transform="translate(8.698e-7 -.27969)">

<g transform="translate(.59108 -1.2569)" >

<rect transform="matrix(1 0 -.20798 1 0 0)" x="8" y="2" width="44" height="8" fill="url(#linearGradient1410)"/>

<rect transform="matrix(1 0 -.20798 1 0 0)" x="8" y="18" width="44" height="8" fill="url(#linearGradient1410)"/>

<rect transform="matrix(1 0 -.20798 1 0 0)" x="8" y="34" width="44" height="8" fill="url(#linearGradient1410)"/>

</g>

<g transform="translate(.59108 -.54062)" fill="#ff851b"  aria-label="BROKER">

<path d="m64.302 24.739c5.8914 0 8.1844-3.7042 8.1844-7.0203 0-2.0461-1.1994-4.1628-3.3867-4.7272 2.8575-0.28222 5.3622-2.9986 5.3622-6.1383 0-2.9986-2.2931-5.6444-6.3853-5.6444h-11.43l-5.1858 23.53zm1.6228-14.182h-6.3147l1.0936-4.9389h6.0325c1.3053 0...

CSS

.burger {width:50px;height:50px;margin:auto;display:block;
clip-path: polygon(0% 0%,100% 0%,100% 20%,0% 20%,0% 40%,100% 40%,100% 60%,0% 60%,0% 80%,100% 80%,100% 100%,0% 100%);
transform: skew(-15deg);
background: rgb(255,133,27);
background: linear-gradient(90deg, rgba(255,133,27,0) 0%, rgba(255,133,27,1) 100%);
}

.heart {width:100px;height:100px;margin:auto;display:block;

clip-path: url(#svgPath);

background: rgb(255,133,27);

}