.emoji { font-size: 2.5rem; } textarea { width: 300px; max-width: 90%; } .heart { height: 250px; /* adjust to control the size */ aspect-ratio: 1; --_m: radial-gradient(#000 69%,#0000 70%) 84.5%/50%; -webkit-mask-box-image: var(--_m); mask-border: var(--_m); clip-path: polygon(-41% 0,50% 91%, 141% 0); background: #fb6f92; } /* fallback until better support for mask-border */ @supports not (-webkit-mask-box-image: var(--_m)) { .heart { mask: radial-gradient(at 70% 31%,#000 29%,#0000 30%), radial-gradient(at 30% 31%,#000 29%,#0000 30%), conic-gradient(#000 0 0) bottom/100% 50% no-repeat; } }