<svg class="heart" viewBox="0 0 512 512" width="100" title="heart">
  <path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z" />
</svg>
.heart {
  position: fixed;
  inset: 0;
  margin: auto;
  width: 100px;
  height: 100px;
  fill: #f99;
}

body {
  height: 1200px;
  background: url('https://images.unsplash.com/photo-1519750783826-e2420f4d687f?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTM4MTQyOTF8&ixlib=rb-4.0.3&q=85') no-repeat center / cover;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.