cross-posted from: https://piefed.world/c/shit/p/1209511/friends-with-drawbacks

SVG Code

<svg xmlns="http://www.w3.org/2000/svg” viewBox="0 0 520 620” width="100%” height="100%"> <defs> <style> .time { font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif; font-size: 12px; fill: #8E8E93; font-weight: 600; text-anchor: middle; } .read { font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif; font-size: 12px; fill: #8E8E93; text-anchor: end; } .msg-text { font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif; font-size: 16px; fill: #FFFFFF; } .bubble-gray { fill: #3A3A3C; } .bubble-blue { fill: #0A84FF; } </style> </defs>

<text x="260” y="30” class="time">Today 3:04 AM</text>

<path d="M 40 86 C 30 86 20 90 15 92 C 22 92 28 88 30 76 Z” class="bubble-gray” /> <rect x="30” y="50” width="180” height="36” rx="18” class="bubble-gray” /> <text x="45” y="74” class="msg-text">Hey bro wyd tonight?</text>

<path d="M 470 136 C 480 136 490 140 495 142 C 488 142 482 138 480 126 Z” class="bubble-blue” /> <rect x="370” y="100” width="110” height="36” rx="18” class="bubble-blue” /> <text x="385” y="124” class="msg-text">Fck all hbu?</text>

<path d="M 40 186 C 30 186 20 190 15 192 C 22 192 28 188 30 176 Z” class="bubble-gray” /> <rect x="30” y="150” width="260” height="36” rx="18” class="bubble-gray” /> <text x="45” y="174” class="msg-text">Having a party tonight you down?</text>

<rect x="290” y="200” width="190” height="36” rx="18” class="bubble-blue” /> <text x="305” y="224” class="msg-text">Hell yea bro I’m down</text>

<path d="M 470 276 C 480 276 490 280 495 282 C 488 282 482 278 480 266 Z” class="bubble-blue” /> <rect x="380” y="240” width="100” height="36” rx="18” class="bubble-blue” /> <text x="395” y="264” class="msg-text">What time?</text>

<path d="M 40 376 C 30 376 20 380 15 382 C 22 382 28 378 30 366 Z” class="bubble-gray” /> <rect x="30” y="290” width="340” height="86” rx="18” class="bubble-gray” /> <text x="45” y="314” class="msg-text">11pm bro and there’s gonna be a</text> <text x="45” y="336” class="msg-text">whole lotta fighting n lotta fuckin😂</text> <text x="45” y="358” class="msg-text">👌🏻</text>

<rect x="290” y="390” width="190” height="36” rx="18” class="bubble-blue” /> <text x="305” y="414” class="msg-text">Lmao can’t wait bro🤣</text>

<path d="M 470 466 C 480 466 490 470 495 472 C 488 472 482 468 480 456 Z” class="bubble-blue” /> <rect x="220” y="430” width="260” height="36” rx="18” class="bubble-blue” /> <text x="235” y="454” class="msg-text">You know who all gon be there?</text>

<text x="475” y="486” class="read">Read 3:09 AM</text>

<path d="M 40 546 C 30 546 20 550 15 552 C 22 552 28 548 30 536 Z” class="bubble-gray” /> <rect x="30” y="510” width="230” height="36” rx="18” class="bubble-gray” /> <text x="45” y="534” class="msg-text">No one bro just me and you</text>

<path d="M 470 596 C 480 596 490 600 495 602 C 488 602 482 598 480 586 Z” class="bubble-blue” /> <rect x="440” y="560” width="40” height="36” rx="18” class="bubble-blue” /> <text x="455” y="584” class="msg-text">?</text>

</svg>