Stars SVG background, flat

Free

Preview on the whole page

Small, uneven stars scatter around the edges, leaving a wide clear center. Use this background for a bedtime story cover or a night-sky party invitation.

Fixed colourcurrentColor becomes your colour

Inline styleOne style attribute per shape

Minified

stars night sky hand drawn background flat

How to use it

HTML <img>

<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/Wsr-hk5wtEx_/amnt.svg" alt="Stars" 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="#182638"/><defs><path id="star-a" d="M0-14 3.5-4.5 13-5 6 1.5 9 11 0 6-8 11-6 2-13-4  -3.5-5Z"/><path id="star-b" d="M0-12 4-3 12-4 6 2 8 11 0 6-9 10-6 1-12-5-3-4Z"/><path id="star-c" d="M0-15 3-5 12-7 7 1 10 10 0 6-8 12-6 2-14-3-4-4Z"/></defs><g fill="#D5C6A5"><use href="#star-a" transform="translate(75 79) rotate(-14) scale(1.1)"/><use href="#star-b" transform="translate(256 52) rotate(21) scale(.75)"/><use href="#star-c" transform="translate(492 86) rotate(-8) scale(.65)"/><use href="#star-a" transform="translate(782 43) rotate(17) scale(.7)"/><use href="#star-b" transform="translate(1106 70) rotate(-23) scale(.9)"/><use href="#star-c" transform="translate(1439 69) rotate(12) scale(1.05)"/><use href="#star-a" transform="translate(1542 292) rotate(-20) scale(.85)"/><use href="#star-b" transform="translate(1509 608) rotate(14) scale(.75)"/><use href="#star-c" transform="translate(1370 826) rotate(-11) scale(.95)"/><use href="#star-a" transform="translate(1028 854) rotate(25) scale(.7)"/><use href="#star-b" transform="translate(692 820) rotate(-18) scale(.8)"/><use href="#star-c" transform="translate(329 844) rotate(9) scale(.7)"/><use href="#star-a" transform="translate(84 795) rotate(-24) scale(1)"/><use href="#star-b" transform="translate(51 468) rotate(16) scale(.85)"/></g><g fill="#8FAFAD"><use href="#star-c" transform="translate(167 176) rotate(25) scale(.65)"/><use href="#star-a" transform="translate(375 33) rotate(-17) scale(.5)"/><use href="#star-b" transform="translate(958 125) rotate(11) scale(.55)"/><use href="#star-a" transform="translate(1274 30) rotate(-9) scale(.7)"/><use href="#star-b" transform="translate(1556 147) rotate(24) scale(.55)"/><use href="#star-c" transform="translate(1442 385) rotate(-13) scale(.6)"/><use href="#star-a" transform="translate(1563 742) rotate(18) scale(.6)"/><use href="#star-b" transform="translate(1185 870) rotate(-20) scale(.55)"/><use href="#star-c" transform="translate(845 865) rotate(12) scale(.5)"/><use href="#star-a" transform="translate(474 798) rotate(-7) scale(.55)"/><use href="#star-b" transform="translate(190 863) rotate(19) scale(.6)"/><use href="#star-c" transform="translate(119 628) rotate(-21) scale(.55)"/><use href="#star-a" transform="translate(31 244) rotate(10) scale(.6)"/></g><g fill="#B79B9A"><use href="#star-b" transform="translate(101 26) rotate(17) scale(.45)"/><use href="#star-c" transform="translate(611 34) rotate(-12) scale(.55)"/><use href="#star-a" transform="translate(1313 132) rotate(22) scale(.5)"/><use href="#star-b" transform="translate(1518 485) rotate(-16) scale(.55)"/><use href="#star-c" transform="translate(1490 865) rotate(9) scale(.5)"/><use href="#star-a" transform="translate(563 870) rotate(19) scale(.45)"/><use href="#star-b" transform="translate(45 703) rotate(-10) scale(.5)"/><use href="#star-c" transform="translate(172 338) rotate(13) scale(.45)"/></g><g fill="#71869A"><use href="#star-a" transform="translate(344 137) rotate(-14) scale(.4)"/><use href="#star-b" transform="translate(116 118) rotate(8) scale(.35)"/><use href="#star-c" transform="translate(1202 75) rotate(23) scale(.4)"/><use href="#star-a" transform="translate(1549 58) rotate(-11) scale(.4)"/><use href="#star-b" transform="translate(1451 704) rotate(17) scale(.4)"/><use href="#star-c" transform="translate(1225 805) rotate(-19) scale(.4)"/><use href="#star-a" transform="translate(760 866) rotate(13) scale(.35)"/><use href="#star-b" transform="translate(245 776) rotate(-8) scale(.4)"/><use href="#star-c" transform="translate(65 574) rotate(18) scale(.35)"/></g></svg>

CSS background-image

.stars {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/Wsr-hk5wtEx_/amnt.svg");
  background-size: contain;
}

React

import StarsSvg from "./stars.jsx"; // from the React tab above

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

Made with AMNT

AMNT SVG 1.1 drew this from the words Stars: Small uneven five-point stars scattered around the edges, with a wide clear 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