How to make a resizable heart in CSS with a border

Question

I want to make a heart shape which can be resized by usersr to any width and height and have a border of 1 px.

1. I tried a heart made in pure CSS: https://stackoverflow.com/a/17386187/1404447

2. I tried using a font, like this: https://www.w3schools.com/charsets/tryit.asp?deci=9829&ent=hearts

3. and also tried an SVG picture: https://css-tricks.com/hearts-in-html-and-css/#inline-svg

However here are my problems:

1. It cannot be freely and easily scaled to lets say 500x200 px. It's hard to add a border around it

2. It cannot be stretched to other proportions and cannot be enlarged to fit into for eg. 500x400 box

3. It's almost perfect but the border (stroke) stretches with the size. I want the border to be always 1px wide, no matter the scale

I also tried making another copy of the shape as a shadow (filled with black color and slightly offset, with lower z-index) but it isn't perfect (the border is not the same width everywhere):

Answer 1

Probably my heart will do a better job even if still not perfect

.heart {
  width:200px;
  height:200px;
  background:
   radial-gradient(90% 90% at 60% 65%, transparent calc(64% - 1px), black 64%, transparent calc(64% + 1px)) top left,
   radial-gradient(90% 90% at 40% 65%, transparent calc(64% - 1px), black 64%, transparent calc(64% + 1px)) top right,
   linear-gradient(to bottom left,     transparent calc(43% - 1px), black 43%, transparent calc(43% + 1px)) bottom left ,
   linear-gradient(to bottom right,    transparent calc(43% - 1px), black 43%, transparent calc(43% + 1px)) bottom right;
  background-size:50% 50%;
  background-repeat:no-repeat;
  border:2px solid red;
  overflow:hidden;
  resize:both;
}

<div class="heart">
</div>