Hearts SVG background, flat

Free

Preview on the whole page

Rounded hearts gather loosely in opposite corners around a quiet center. Use it for a Valentine card or a note tucked into a gift.

Fixed colourcurrentColor becomes your colour

Inline styleOne style attribute per shape

Minified

hearts love valentine hand drawn background flat

How to use it

HTML <img>

<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/9NQD-bxcnH67/amnt.svg" alt="Hearts" width="48" height="48">

Inline SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice"><rect width="1600" height="900" fill="#F5F1ED"/><defs><path id="heart" d="M0 5 C-3 2-13-4-13-11 C-13-16-9-19-5-19 C-2-19 0-17 0-14 C0-17 2-19 5-19 C9-19 13-16 13-11 C13-4 3 2 0 5 Z"/></defs><g fill="#DCA6A2"><use href="#heart" transform="translate(78 86) rotate(-17) scale(1.15)"/><use href="#heart" transform="translate(219 63) rotate(12) scale(.72)"/><use href="#heart" transform="translate(157 177) rotate(19) scale(.9)"/><use href="#heart" transform="translate(61 251) rotate(-11) scale(.68)"/><use href="#heart" transform="translate(298 145) rotate(-22) scale(.55)"/><use href="#heart" transform="translate(1527 827) rotate(16) scale(1.12)"/><use href="#heart" transform="translate(1386 849) rotate(-13) scale(.76)"/><use href="#heart" transform="translate(1459 718) rotate(-18) scale(.9)"/><use href="#heart" transform="translate(1550 647) rotate(11) scale(.65)"/><use href="#heart" transform="translate(1304 761) rotate(22) scale(.55)"/></g><g fill="#B8C8C0"><use href="#heart" transform="translate(143 47) rotate(21) scale(.55)"/><use href="#heart" transform="translate(325 75) rotate(-8) scale(.62)"/><use href="#heart" transform="translate(104 329) rotate(15) scale(.52)"/><use href="#heart" transform="translate(243 236) rotate(-14) scale(.57)"/><use href="#heart" transform="translate(1467 870) rotate(-20) scale(.53)"/><use href="#heart" transform="translate(1276 829) rotate(10) scale(.61)"/><use href="#heart" transform="translate(1501 559) rotate(-8) scale(.51)"/><use href="#heart" transform="translate(1370 664) rotate(18) scale(.57)"/></g><g fill="#E8C9AD"><use href="#heart" transform="translate(42 153) rotate(13) scale(.53)"/><use href="#heart" transform="translate(264 30) rotate(-19) scale(.47)"/><use href="#heart" transform="translate(199 303) rotate(8) scale(.43)"/><use href="#heart" transform="translate(367 174) rotate(16) scale(.38)"/><use href="#heart" transform="translate(1566 749) rotate(-14) scale(.49)"/><use href="#heart" transform="translate(1434 796) rotate(15) scale(.48)"/><use href="#heart" transform="translate(1328 694) rotate(-12) scale(.4)"/><use href="#heart" transform="translate(1490 491) rotate(20) scale(.37)"/></g></svg>

CSS background-image

.hearts {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/9NQD-bxcnH67/amnt.svg");
  background-size: contain;
}

React

import HeartsSvg from "./hearts.jsx"; // from the React tab above

<HeartsSvg width={48} height={48} />

Made with AMNT

AMNT SVG 1.1 drew this from the words Hearts: Small rounded hearts cluster loosely in opposite corners, with a quiet center. as part of the pack Hand-Drawn Flat Backgrounds. Want one like it? Make your own in the SVG studio.

Rest of Hand-Drawn Flat Backgrounds

Whole pack

Similar SVGs

Licence: free. A Free account may use it for personal work; Pro and Max download it with a commercial licence, fixed at download, forever. No credit needed. Read the licence