Carrond

by Simon Hi

HTML

<svg height="0" width="0">
  <defs>
    <clipPath id="carrond" clipPathUnits="objectBoundingBox">
      <path transform="scale(0.01 0.01)" d="m 47.1,87.8 c -2.6,-0.1 -3.1,-0.1 -5.6,-0.3 -11.6,-1.1 -19.3,-4.9 -23.7,-11.8 -2.4,-3.9 -4.1,-8.8 -4.8,-14.9 -0.8,-6.3 -0.8,-15.2 0,-21.5 2.2,-17 10.6,-24.8 28.5,-26.6 4.7,-0.4 12,-0.5 16.8,0 13.3,1.1 21.3,5.7 25.5,14.4 2.4,5 3.7,11.4 3.9,20 0.1,6.9 -0.2,12.9 -1.2,17.7 -2.6,12.4 -9.3,19 -22,21.6 -4.6,0.9 -10.7,1.3 -17.4,1.1 z" />
    </clipPath>
  </defs>
</svg>
<div>A</div>
<div>B</div>

CSS

div {
  width: 10rem;
  height: 10rem;
  background: #f66;
  clip-path: url(#carrond);
  text-align: center;
  line-height: 10rem;
  font-size: 5rem;
}