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="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 M402.342,204.627
		c-10.274,0-18.603-8.329-18.603-18.603s8.329-18.603,18.603-18.603s18.603,8.329,18.603,18.603S412.616,204.627,402.342,204.627z
		 M495.354,204.627c-10.273,0-18.603-8.329-18.603-18.603s8.329-18.603,18.603-18.603s18.603,8.329,18.603,18.603
		S505.627,204.627,495.354,204.627z M588.368,204.627c-10.274,0-18.603-8.329-18.603-18.603s8.328-18.603,18.603-18.603
		s18.603,8.329,18.603,18.603S598.642,204.627,588.368,204.627z"/>
</g>
</svg>
<svg version="1.1" id="bubbles2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="556.58px" height="520.871px" viewBox="142.978 37.205 556.58 520.871"
	 enable-background="new 142.978 37.205 556.58 520.871" xml:space="preserve">
<g id="Layer_2">
	<path...

SCSS

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

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

$greendark: #124835;
$green: #017941;

$iconsize: 100px;
$iconcolor: #fff;

$textcolor: $greendark; //darken(#D12937, 15%);
$texthighlightcolor: $green; //#D12937;

$handleradius: 20px;
$handlewidth: 10px;
$handlecolor: #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: 260px;
  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);
    display: inline-block;
    width: 100px;
    height: 25px;
    border: $handlewidth solid $handlecolor;
    border-bottom: 0px;
    border-radius: $handleradius $handleradius 0px 0px;
  }

	// Belts
  &:after {
    z-index: 1;
		opacity: 1;
    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} )");
    top: unquote("calc( 52% - #{$iconsize/2} )");
    z-index: 2;
    width: $iconsize;
    height: $iconsize;
  }
  #mic {
    left: unquote("calc( 23% - #{$iconsize/2} )");
		display: none;
  }
  
  #brush2, #brush3, #brush4, #mic2, #bubbles2 {display:none;}
  #brush {
    left: unquote("calc( 50% - #{$iconsize/2} )");
		display: none;
  }
  
  #mouse {
   ...