Menu

Beta
Sign in
Beta
Double Wave SVG element, flat

Double Wave SVG element, flat

Two complete wave crests repeat across the top edge of the filled shape. It fits between sections of a swim lesson page or across a beach event flyer.

Free · from Shape dividers, flat

Similar SVGs

More from Shape dividers, flat

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/uYujwatSXoU7/amnt.svg" alt="Double Wave" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none" fill="currentColor"><path d="M0 80 C150 80 150 20 300 20 S450 80 600 80 S750 20 900 20 S1050 80 1200 80 L1200 120 H0 Z"/></svg>
CSS background-image
.double-wave {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/uYujwatSXoU7/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.double-wave {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/uYujwatSXoU7/amnt.svg") center / contain no-repeat;
}
React
import DoubleWaveSvg from "./double-wave.jsx"; // from the React tab above

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

Tags

wavesdouble wavesection dividershape dividerselementflat

Made with AMNT

AMNT SVG 1.1 drew this from the words Double Wave: Two complete, evenly spaced wave crests form the filled shape’s top edge. as part of the pack Shape dividers, flat. Want one like it? Make your own in the SVG studio.

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

Settings