<svg xmlns=“http://www.w3.org/2000/svg” viewBox=“0 0 800 480” width=“100%” height=“100%”> <defs> <filter id=“shadow” x=“-5%” y=“-5%” width=“110%” height=“110%”> <feDropShadow dx=“0” dy=“1” stdDeviation=“1” flood-color=“#000000” flood-opacity=“0.08” /> </filter>

<style>
  .bubble-right { fill: #DCF8C6; filter: url(#shadow); }
  .bubble-left { fill: #FFFFFF; filter: url(#shadow); }
  .text-main { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 26px; fill: #111111; }
  .text-time { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; fill: #888888; }
  .check { fill: none; stroke: #888888; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
</style>

</defs>

<g transform=“translate(0, -5)”> <polygon class=“bubble-right” points=“760,40 780,40 760,55” /> <rect class=“bubble-right” x=“515” y=“40” width=“245” height=“55” rx=“8” /> <text class=“text-main” x=“535” y=“77”>hey</text> <text class=“text-time” x=“655” y=“80”>10:30 AM</text> <path class=“check” d=“M 723 75 L 727 79 L 735 70 M 730 79 L 734 83 L 742 74” /> </g>

<g transform=“translate(0, 10)”> <rect class=“bubble-right” x=“350” y=“85” width=“410” height=“55” rx=“8” /> <text class=“text-main” x=“370” y=“122”>are you busy</text> <text class=“text-time” x=“655” y=“125”>10:30 AM</text> <path class=“check” d=“M 723 120 L 727 124 L 735 115 M 730 124 L 734 128 L 742 119” /> </g>

<g transform=“translate(0, 5)”> <polygon class=“bubble-left” points=“40,185 20,185 40,200” /> <rect class=“bubble-left” x=“40” y=“185” width=“245” height=“55” rx=“8” /> <text class=“text-main” x=“60” y=“222”>Yea</text> <text class=“text-time” x=“195” y=“225”>10:31 AM</text> </g>

<g transform=“translate(0, 15)”> <rect class=“bubble-left” x=“40” y=“240” width=“485” height=“85” rx=“8” /> <text class=“text-main” x=“60” y=“280”>I’m at work but I can quit</text> <text class=“text-time” x=“440” y=“310”>10:31 AM</text> </g>

<g transform=“translate(0, 15)”> <rect class=“bubble-left” x=“40” y=“335” width=“375” height=“55” rx=“8” /> <text class=“text-main” x=“60” y=“372”>what’s up?</text> <text class=“text-time” x=“325” y=“375”>10:31 AM</text> </g>

</svg>