JSFiddle - React, Tailwind, and code Playground
by Graham Dixon
HTML
<div class="MML---text">MML - Assetinfo</div>
<div class="MML---logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 220 220" enable-background="new 0 0 47.6 59.8" >
<defs>
<filter id="filter1" x="-1" y="-1" width="200" height="200">
<feGaussianBlur result="blurOut" in="SourceAlpha" stdDeviation="2.7" />
<feOffset dx="0" dy="0"/>
<feComponentTransfer>
<feFuncA type="linear" result="blurOutter" in="blurOut" slope="1"/>
</feComponentTransfer>
<feMerge>
<feMergeNode in="blurOutter"/>
</feMerge>
</filter>
</defs>
<path d="M196.3 60.2v79.9c-.6.3-1.1.9-1.4 1.1-18.4 18.4-36.8 36.8-55.2 55.4H59.8c-.3-.6-.9-1.1-1.1-1.4l-22.1-22.1c-10.9-10.9-22.1-21.8-33-33V60.2c1.4-1.4 2.9-2.6 4.3-4C24.9 39.3 41.8 22 58.8 5.1c.3-.3.9-.9 1.1-1.4H140c.3.3.6.9.9 1.1 17.5 17.5 35.3 35 52.9 52.6.5 1.1 1.3 1.9 2.5 2.8zm-40.8 17.2c-11.2-11.2-22.1-22.4-32.7-33.3H77.4C65.8 55.3 54.9 66.2 44 77.1v45.7c11.2 11.2 22.1 22.1 32.7 33h45.7c11.2-11.2 22.1-22.1 33-32.8V77.4z" filter="url(#filter1)" fill="black" ></path>
<path d="M196.3 60.2v79.9c-.6.3-1.1.9-1.4 1.1-18.4 18.4-36.8 36.8-55.2 55.4H59.8c-.3-.6-.9-1.1-1.1-1.4l-22.1-22.1c-10.9-10.9-22.1-21.8-33-33V60.2c1.4-1.4 2.9-2.6 4.3-4C24.9 39.3 41.8 22 58.8 5.1c.3-.3.9-.9 1.1-1.4H140c.3.3.6.9.9 1.1 17.5 17.5 35.3 35 52.9 52.6.5 1.1 1.3 1.9 2.5 2.8zm-40.8 17.2c-11.2-11.2-22.1-22.4-32.7-33.3H77.4C65.8 55.3 54.9 66.2 44 77.1v45.7c11.2 11.2 22.1 22.1 32.7 33h45.7c11.2-11.2 22.1-22.1 33-32.8V77.4z" fill="white"></path>
</svg>
</div>
CSS
body {
background: #69a2d1;
color: black;
}
.container {
width:100%;
height: 100%;
}
.MML---text {
position:absolute;
margin-top: 5.6vw;
margin-left:26vw;
font-family:"Helvetica", Helvetica, Arial, sans-serif;
color:white;
font-weight: 300;
font-size:8vw;
text-shadow: 0px 0px 0.6vw rgba(0,0,0,1);
}
.MML---logo {
height: 10vw;
width: 20vw;
margin-left: 5vw;
}