Communiqaid logo

by PhilQ

HTML

<script src="https://fonts.googleapis.com/css?family=Cabin|Fredoka+One|Raleway:300,400|Varela+Round"></script>
<div id="logo">

<!-- Icon by: Icon O' Foxy @ https://www.instagram.com/iconofoxy/ -->
<svg version="1.1" id="bubbles" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="408.83px" height="372.05px" viewBox="0 0 408.83 372.05" enable-background="new 0 0 408.83 372.05" xml:space="preserve">
<g id="Layer_2">
	<path d="M260.436,0H148.819C66.63,0,0.001,66.628,0.001,148.82S66.63,297.64,148.819,297.64h34.23l84.082,70.131
		c3.348,2.773,7.559,4.287,11.905,4.279c2.695,0.014,5.361-0.557,7.813-1.674c6.594-3.053,10.809-9.664,10.789-16.93v-60.645
		c65.346-17.078,110.998-76.02,111.188-143.559C409.065,67.054,342.627,0.234,260.436,0z M111.615,172.914
		c-13.307,0-24.094-10.787-24.094-24.095c0-13.307,10.787-24.095,24.094-24.095s24.094,10.788,24.094,24.095
		C135.709,162.126,124.922,172.914,111.615,172.914z M204.627,172.914c-13.305,0-24.094-10.787-24.094-24.095
		c0-13.307,10.788-24.095,24.094-24.095c13.309,0,24.096,10.788,24.096,24.095C228.723,162.126,217.935,172.914,204.627,172.914z
		 M297.642,172.912c-13.307,0-24.095-10.786-24.095-24.093s10.786-24.094,24.095-24.094c13.308,0,24.094,10.787,24.094,24.094
		S310.948,172.912,297.642,172.912z"/>
</g>
</svg>
<svg version="1.1" id="bubbles3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="408.83px" height="372.05px" viewBox="290.727 37.205 408.83 372.05" enable-background="new 290.727 37.205 408.83 372.05"
	 xml:space="preserve">
<g id="Layer_2">
	<path d="M551.162,37.205H439.546c-82.19,0-148.819,66.629-148.819,148.82c0,82.191,66.629,148.82,148.819,148.82h34.23
		l84.082,70.131c3.348,2.773,7.559,4.287,11.906,4.279c2.695,0.014,5.361-0.557,7.813-1.674c6.594-3.053,10.809-9.664,10.789-16.93
		v-60.643c65.346-17.078,110.998-76.02,111.189-143.56C699.792,104.259,633.353,37.439,551.162,37.205z...

SCSS

*,:before,:after{margin:0;padding:0;box-sizing:border-box}

@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Raleway:ital,wght@0,300;1,300&display=swap');

//$suitcase: #aaa;
//$textcolor: #666; //#30B6F2;
//$iconcolor: #D12937; //#666;

$iconsize: 80px; //60px;
$iconcolor: #fff;

$textcolor: #fff;
$texthighlightcolor: rgba(255,255,255, 0.75);

$handleradius: 50%;
$handlewidth: 10px;
$handlecolor: #D12937; //#aaa;

$caseradius: 15px;
$casecolor: #D12937;
$caseborderwidth: 0px;
$casebordercolor: darken(#D12937, 15%);

$slogancolor: #666;
$sloganhighlightcolor: darken(#D12937, 15%);

#logo {
  position: fixed;
  bottom: 45%;
  left: 50%;
  display: inline-block;
  width: 240px;
  height: 180px;
  border: $caseborderwidth solid $casebordercolor;
  border-radius: $caseradius;
  background-color: $casecolor;
  color: $iconcolor;
  transform: translate(-50%, 0%);
  //transform: scale(.3);

	// Handle
  &:before {
    z-index: 1;
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, -$caseborderwidth+15);
    display: inline-block;
    width: 100px;
    height: 30px;
    border: $handlewidth solid $handlecolor;
    border-radius: $handleradius;
  }

	// Belts
  &:after {
    z-index: 1;
		opacity: 0;
    content: '';
    position: absolute;
    top: -$caseborderwidth;
    bottom: -$caseborderwidth;
    left: 10%;
    right: 10%;
    display: inline-block;
    border: $handlewidth solid #fff;
    border-top: 0px;
    border-bottom: 0px;
    border-radius: 0px;
  }
  
  svg {
    fill: currentColor;
    position: absolute;
    top: unquote("calc( 36% - #{$iconsize/2} )");
    z-index: 2;
    width: $iconsize;
    height: $iconsize;
  }
  #mic {
    left: unquote("calc( 23% - #{$iconsize/2} )");
		display: none;
  }
  
  #brush2, #brush3, #brush4, #mic2, #bubbles2, #bubbles3 {display:none;}
  #brush {
    left: unquote("calc( 50% - #{$iconsize/2} )");
		display: none;
  }
  
  #mouse {
    left:...