Sun SVG background, flat

Free

Preview on the whole page

A simple sun peeks from an upper corner, with short, uneven rays along the top. It suits a summer camp flyer or a weather worksheet.

Fixed colourcurrentColor becomes your colour

Inline styleOne style attribute per shape

Minified

sun sunshine summer hand drawn background flat

How to use it

HTML <img>

<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/MXz67YxTEUPv/amnt.svg" alt="Sun" 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="#E9F0E8"/><g fill="#E6B96B"><path d="M1037 0h18v47h-18z"/><path d="M1091 0h12v31h-12z"/><path d="M1140 0h20v52h-20z"/><path d="M1198 0h14v37h-14z"/><path d="M1250 0h17v57h-17z"/><path d="M1308 0h12v36h-12z"/><path d="M1360 0h19v49h-19z"/><path d="M1421 0h13v32h-13z"/><path d="M1470 0h18v54h-18z"/><path d="M1528 0h12v34h-12z"/><path d="M1577 0h16v44h-16z"/></g><circle cx="1340" cy="-58" r="206" fill="#F2CA80"/></svg>

CSS background-image

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

React

import SunSvg from "./sun.jsx"; // from the React tab above

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

Made with AMNT

AMNT SVG 1.1 drew this from the words Sun: A simple sun peeking from the upper corner, with short uneven rays along the top edge. 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