Pink Orange SVG background, flat

Free

Preview on the whole page

Rounded orange patches sit along the left and lower edges of a soft pink field. Place it behind a website introduction or a social media announcement.

Fixed colourcurrentColor becomes your colour

Inline styleOne style attribute per shape

Minified

pink orange warm website background mesh gradient background flat

How to use it

HTML <img>

<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/syf2Ml0IoUGi/amnt.svg" alt="Pink Orange" 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="#F5B9C8"/><path d="M0 92C124 80 240 124 268 218C300 325 215 422 93 443C58 449 27 450 0 445Z" fill="#EF936B"/><path d="M0 174C76 153 153 178 173 247C197 332 116 385 0 376Z" fill="#F5AD78"/><path d="M0 900V758C127 742 204 786 313 796C416 806 462 756 555 767C670 780 720 847 737 900Z" fill="#EE926D"/><path d="M196 900C265 843 349 849 426 871C483 887 532 879 586 900Z" fill="#F6B079"/><path d="M1255 900C1290 849 1367 821 1449 831C1511 839 1565 866 1600 900Z" fill="#F3A477"/></svg>

CSS background-image

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

React

import PinkOrangeSvg from "./pink-orange.jsx"; // from the React tab above

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

Made with AMNT

AMNT SVG 1.1 drew this from the words Pink Orange: Full soft pink field with rounded orange patches along the left and lower edges. as part of the pack Mesh Backgrounds, Flat. Want one like it? Make your own in the SVG studio.

Rest of Mesh Backgrounds, Flat

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