JSFiddle - React, Tailwind, and code Playground
by msfrisbie
HTML
<style>
html, body {
height: 100%;
margin: 0;
}
/*
baby blue: rgb(66,134,244)
yellow: #edda0e
*/
body {
background-color: white;
padding: 0;
margin: 0;
}
div{
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
svg {
height: 400px;
}
g {
fill: rgb(66,134,244);
/*rgb(66,134,244);;*/
}
g#logo {/*
stroke: orange;
stroke-width: 2.0;
}
g#name {
stroke: orange;
stroke-width: 0.6;
} */
g#slogan {
}
</style>
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-5 -5 270 80"><g id="logo" transform="matrix(0.7,0,0,0.7,0,0)"><path xmlns="http://www.w3.org/2000/svg" d="M50,0C22.4,0,0,22.4,0,50s22.4,50,50,50s50-22.4,50-50S77.6,0,50,0z M55.8,65.3L44,77c-3.2,3.2-7.5,5-11.8,5h0 c-3.9,0-7.5-1.5-10.2-4.1c-5.8-5.8-5.8-15.3,0-21.1l14.1-14.1L36,44.9c-0.2,2.6,0.1,5.1,0.9,7.4l0.2,0.5l-9.5,9.5 c-1.4,1.4-2.1,3.2-2.1,5.1c0,1.9,0.7,3.7,2.1,5.1c1.2,1.2,2.9,1.9,4.7,1.9c2.3,0,4.6-1,6.3-2.7l11.7-11.7c3.3-3.3,3.7-8.2,0.9-11 c-0.7-0.7-1-1.9-0.8-3.1c0.2-1.2,0.8-2.3,1.7-3.2l1.5-1.5l0.5,0.3c0.9,0.6,1.8,1.3,2.5,2c0.8,0.8,1.4,1.6,2,2.6 C62.3,51.9,61.1,60,55.8,65.3z M77.9,43.2L63.8,57.3l0.2-2.1c0.2-2.6-0.1-5.1-0.9-7.4L63,47.2l9.5-9.5c1.4-1.4,2.1-3.2,2.1-5.1 c0-1.9-0.7-3.7-2.1-5.1c-1.2-1.2-2.9-1.9-4.7-1.9c-2.3,0-4.6,1-6.3,2.7L49.7,40.1c-3.3,3.3-3.7,8.2-0.9,11c0.7,0.7,1,1.9,0.8,3.1 c-0.2,1.2-0.8,2.3-1.7,3.2L46.4,59l-0.5-0.3c-0.9-0.6-1.8-1.3-2.5-2c-0.8-0.8-1.4-1.6-2-2.6c-3.6-5.9-2.4-14.1,2.9-19.4L56,23 c3.2-3.2,7.5-5,11.8-5c3.9,0,7.5,1.5,10.2,4.1c2.8,2.8,4.4,6.6,4.4,10.5C82.3,36.6,80.7,40.4,77.9,43.2z"></path></g><g id="name" transform="matrix(1.9935147742696224,0,0,1.9935147742696224,93.12609694869865,1.1154187622605054)"><path d="M0.94 19.08 l0 0 l0.36 -3 c1.64 1.16 3.42 1.2 4.08 1.14 c0.84 -0.06 1.56 -0.66 1.48 -1.44 c-0.06 -0.82 -0.68 -1.18 -1.48 -1.46 c-2.24 -0.82 -4.24 -1.96 -4.24 -4.36 s1.66 -4.24 4.04 -4.36 c0.74 -0.04 1.72 -0.04 3.56 0.6 l-0.36 2.76 c-1.58 -0.64 -2.48...