Clouds SVG pattern, flat

Free

Preview on the whole page

Overlapping puffy silhouettes with broad, flat bases create a simple cloud pattern. Try it on a weather classroom chart or a nursery wall print.

Fixed colourcurrentColor becomes your colour

Inline styleOne style attribute per shape

Minified

clouds sky weather puffy organic pattern flat

How to use it

HTML <img>

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

Inline SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><rect width="200" height="200" fill="#85B9CD"/><defs><path id="cloud" d="M12 60 C5 60 0 54 0 47 C0 39 6 33 14 32 C14 20 24 12 36 14 C43 4 55 1 66 6 C75 10 80 17 81 25 C92 20 105 27 106 39 C114 42 118 49 115 56 C113 60 109 60 103 60 Z"/></defs><use href="#cloud" x="65" y="-33" fill="#E5F0E9"/><use href="#cloud" x="65" y="167" fill="#E5F0E9"/><use href="#cloud" x="12" y="28" fill="#FFFFFF"/><use href="#cloud" x="145" y="75" fill="#E5F0E9"/><use href="#cloud" x="-55" y="75" fill="#E5F0E9"/><use href="#cloud" x="47" y="112" fill="#FFFFFF"/></svg>

CSS background-image

.clouds {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/Mc6G12I92Y2N/amnt.svg");
  background-size: 200px 200px;
}

React

import CloudsSvg from "./clouds.jsx"; // from the React tab above

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

Made with AMNT

AMNT SVG 1.1 drew this from the words Clouds: Overlapping puffy cloud silhouettes with broad, flat bases. as part of the pack Organic Patterns, Flat. Want one like it? Make your own in the SVG studio.

Rest of Organic Patterns, 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