<div id="badge">
  <div id="base"></div>
  <div id="outer-ring">
  </div>
  <div id="outer-ring-text">
    <div id="upper">
      <span id="o-r-char1">I</span>
      <span id="o-r-char3">S</span>
      <span id="o-r-char4">w</span>
      <span id="o-r-char5">a</span>
      <span id="o-r-char6">l</span>
      <span id="o-r-char7">l</span>
      <span id="o-r-char8">o</span>
      <span id="o-r-char9">w</span>
      <span id="o-r-char10">e</span>
      <span id="o-r-char11">d</span>
      <span id="o-r-char12">a</span>
      <span id="o-r-char13">l</span>
      <span id="o-r-char14">l</span>
      <span id="o-r-char15">m</span>
      <span id="o-r-char16">y</span>
      <span id="o-r-char17">p</span>
      <span id="o-r-char18">i</span>
      <span id="o-r-char19">l</span>
      <span id="o-r-char20">l</span>
      <span id="o-r-char21">s</span>
    </div>
    <div id="lower">
      <span id="o-r-char22">w</span>
      <span id="o-r-char23">i</span>
      <span id="o-r-char24">t</span>
      <span id="o-r-char25">h</span>
      <span id="o-r-char26">o</span>
      <span id="o-r-char27">u</span>
      <span id="o-r-char28">t</span>
      <span id="o-r-char29">g</span>
      <span id="o-r-char30">a</span>
      <span id="o-r-char31">g</span>
      <span id="o-r-char32">g</span>
      <span id="o-r-char33">i</span>
      <span id="o-r-char34">n</span>
      <span id="o-r-char35">g</span>
    </div>
  </div>
  <div id="water">
    <div id="water-top"></div>
    <div id="liquid"></div>
    <div id="top"></div>
    <div id="bottom"></div>
    <div id="left-side"></div>
    <div id="right-side"></div>
  </div>
  <div id="pills">
    <div id="pill-one">
      <div class="bevel"></div>
    </div>
    <div id="pill-two">
      <div class="bevel"></div>
    </div>
    <div id="round-pill">
      <div class="bevel"></div>
    </div>
  </div>
</div>
$body-bg: #fff;
$badge-bg: #fff;
$base-bg: #F4F3EE;
$outer-ring-bg: #727B84;
$outer-ring-text: #F6F4DA;
$water: #b2c8e7;
$water-outline: #727B84;
$water-outline-line-width: 3px;
$big-pills: #fff;
$big-pills-shadow: #727B84;
$big-pills-bevel: 2px solid #C1DAD6;
$big-pills-texture: #D9E2E1;
$round-pill: #DF9496;
$round-pill-bevel: 1px solid #606060;
$round-pill-shadow: 1px 3px 5px 1px #727B84;

html,
body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: $body-bg;
  display: flex;
  align-items: center;
  justify-content: center;
}

#badge {
  height: 350px;
  width: 350px;
  background: $badge-bg;
  position: relative;
  z-index: -99;
}

#base {
  height: 300px;
  width: 300px;
  position: absolute;
  top: 25px;
  left: 25px;
  background: $base-bg;
  border-radius: 50%;
  z-index: -2;
}

#outer-ring {
  position: absolute;
  top: 25px;
  left: 25px;
  border: 30px solid $outer-ring-bg;
  border-radius: 50%;
  width: 240px;
  height: 240px;
}

#outer-ring-text {
  span {
    font-size: 24px;
    font-family: Roboto;
    text-transform: uppercase;
    font-weight: 800;
    color: $outer-ring-text;
    width: 22px;
    height: 149px;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  #upper span {
    transform-origin: bottom center;
  }
  
  #lower span {
    display: flex;
    align-items: flex-end;
    transform-origin: top center;
  }
  
  #upper {
    transform: rotate(-90deg);
    position: absolute;
    left: 25px;
    top: 184px;
  }
  
  #lower {
    transform: rotate(-55deg);
    position: absolute;
    left: 169px;
    top: 186px;
  }
  
  #o-r-char1 {
    transform: rotate(0deg);
  }

  #o-r-char3 {
    transform: rotate(7deg);
  }

  #o-r-char4 {
    transform: rotate(14deg);
  }

  #o-r-char5 {
    transform: rotate(23deg);
  }

  #o-r-char6 {
    transform: rotate(31.5deg);
  }

  #o-r-char7 {
    transform: rotate(38.5deg);
  }

  #o-r-char8 {
    transform: rotate(45deg);
  }

  #o-r-char9 {
    transform: rotate(52.5deg);
  }

  #o-r-char10 {
    transform: rotate(62deg);
  }

  #o-r-char11 {
    transform: rotate(69deg);
  }

  #o-r-char12 {
    transform: rotate(80deg);
  }

  #o-r-char13 {
    transform: rotate(88deg);
  }

  #o-r-char14 {
    transform: rotate(94.5deg);
  }

  #o-r-char15 {
    transform: rotate(105deg);
  }

  #o-r-char16 {
    transform: rotate(114.5deg);
  }

  #o-r-char17 {
    transform: rotate(125.5deg);
  }

  #o-r-char18 {
    transform: rotate(133deg);
  }

  #o-r-char19 {
    transform: rotate(138deg);
  }

  #o-r-char20 {
    transform: rotate(145deg);
  }

  #o-r-char21 {
    transform: rotate(151.5deg);
  }

  #o-r-char22 {
    transform: rotate(90deg);
  }

  #o-r-char23 {
    transform: rotate(79.5deg);
  }

  #o-r-char24 {
    transform: rotate(74.5deg);
  }

  #o-r-char25 {
    transform: rotate(67deg);
  }

  #o-r-char26 {
    transform: rotate(58.5deg);
  }

  #o-r-char27 {
    transform: rotate(50deg);
  }

  #o-r-char28 {
    transform: rotate(41.5deg);
  }

  #o-r-char29 {
    transform: rotate(28deg);
  }

  #o-r-char30 {
    transform: rotate(20deg);
  }

  #o-r-char31 {
    transform: rotate(12.5deg);
  }

  #o-r-char32 {
    transform: rotate(5deg);
  }

  #o-r-char33 {
    transform: rotate(-3deg);
  }

  #o-r-char34 {
    transform: rotate(-7deg);
  }

  #o-r-char35 {
    transform: rotate(-15deg);
  }
}

#water {
  position: absolute;
  top: 100px;
  left: 135px;
  position: relative;
  
  #top {
    position: absolute;
    top: 0;
    left: 0;
    width: 70px;
    height: 20px;
    border: $water-outline-line-width solid $water-outline;
    border-radius: 50%;
  }
  
  & #left-side,
  & #right-side {
    width: $water-outline-line-width;
    height: 100px;
    background: $water-outline;
    position: absolute;
    top: 14px;
  }
  
  #left-side {
    left: 8px;
    transform: rotate(-9deg);
  }
  
  #right-side {
    left: 65px;
    transform: rotate(9deg);
  }
  
  #liquid {
    width: 65px;
    height: 60px;
    background: $water;
    position: absolute;
    top: 30px;
    left: 6px;
    -webkit-clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
    clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
    z-index: -1;
  }
  
  #water-top {
    width: 80px;
    height: 30px;
    background: $base-bg;
    border-radius: 50%;
    position: absolute;
    top: 8px;
    left: -2px;
  }
}

#pills {
  position: absolute;
  top: 170px;
  left: 105px;
}

#pill-one,
#pill-two {
  width: 100px;
  height: 45px;
  background: $big-pills;
  box-shadow: 1px 1px 5px 3px $big-pills-shadow;
  border-radius: 25px;
}

#pill-one {
  position: absolute;
  left: 0;
  top: 0;
  transform: rotate(-10deg);
  position: relative;
}

#pill-two {
  position: absolute;
  left: 40px;
  top: 25px;
  transform: rotate(10deg);
}

#pill-one .bevel,
#pill-two .bevel {
  width: 100px;
  height: 45px;
  border-bottom: $big-pills-bevel;
}

#pill-one .bevel,
#pill-two .bevel,
#round-pill .bevel {
  position: absolute;
  top: -15px;
  border-radius: 15px;
}

#round-pill .bevel {
  width: 40px;
  height: 40px;
  top: -9px;
  border-bottom: $round-pill-bevel;
}

#pill-one .bevel:after,
#pill-two .bevel:after {
  content: "||||";
  letter-spacing: 10px;
  color: $big-pills-texture;
  position: absolute;
  top: 20px;
  left: 28px;
  font-size: 10px;
}

#round-pill {
  width: 40px;
  height: 40px;
  background: $round-pill;
  position: absolute;
  top: 40px;
  left: 15px;
  border-radius: 50%;
  transform: rotateX(30deg);
  box-shadow: $round-pill-shadow;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.