How can I wrap text around a heart shape (not just a circle)?

October 31, 2023

I have an image of a heart that is square image and I’d like the text to wrap around the heart in a heart shape/pattern so it hugs close to the heart in the image. The issue I think is that the heart is heart shaped (how I want the text to wrap around on one side) and the image itself is square/square-ish so when I use border-radius: 35%; and shape-outside: margin-box; for example, the text wraps to a circle around the image, not the heart in the image or in a heart pattern. (Difficult to explain, but basically I want it to look professional with text outlining the heart, not the image necessarily.)

Possible solution: modifying the image so it is/is more heart-shaped, but I use this image a lot so I’d like to not do that because it might mess up some other stuff.

Here is what it looks like now at the top of this website: confluenceinfinite.org. It’s not terrible, but not professional enough for me. The text outlines a circle, not a heart shape on the right side. I think it would be much cooler looking if it were tighter to the heart.

What am I missing?

* {
  padding: 0;
  box-sizing: border-box;
  box-sizing: border-box;
  font-family: Arial;
  text-align: left;
  font-size: 14px;
}

p {
  margin: 30px 30px 30px 30px;
}

#black_heart_globe_top {
  border-radius: 35%;
  max-width: 15vw;
  min-width: 100px;
  margin: 0px 30px 30px 30px;
  float: left; /* this keeps the text wrapping around the heart as a cirlce */
  shape-outside: margin-box;
}

<img id="black_heart_globe_top" src="https://confluenceinfinite.org/images/Color_globe_trans_on_black_upright_heart_small.png" />

<p>sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text
  sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text
  sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text
  sample text </p>

Edit: I am not a css/html/markup expert at all.

>Solution :

Adjusting the border radius property to give the bottom right a larger value does nicely.

* {
  padding: 0;
  box-sizing: border-box;
  box-sizing: border-box;
  font-family: Arial;
  text-align: left;
  font-size: 14px;
}

p {
  margin: 30px 30px 30px 30px;
}

#black_heart_globe_top {
  border-radius: 35% 35% 200%;
  max-width: 15vw;
  min-width: 100px;
  margin: 0px 30px 30px 30px;
  float: left; /* this keeps the text wrapping around the heart as a cirlce */
  shape-outside: margin-box;
}

<img id="black_heart_globe_top" src="https://confluenceinfinite.org/images/Color_globe_trans_on_black_upright_heart_small.png" />

<p>sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text
  sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text
  sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text
  sample text </p>