Scallop SVG element, flat

Free

Evenly spaced rounded humps give the filled shape a scalloped top edge. It works below a recipe card header or between sections of an event invitation.

Fixed colourcurrentColor becomes your colour

Inline styleOne style attribute per shape

Minified

scallop rounded edge section divider shape dividers element flat

How to use it

HTML <img>

<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/-1CZ2QSFqGQR/amnt.svg" alt="Scallop" 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 68 C50 68 50 40 100 40 S150 68 200 68 C250 68 250 40 300 40 S350 68 400 68 C450 68 450 40 500 40 S550 68 600 68 C650 68 650 40 700 40 S750 68 800 68 C850 68 850 40 900 40 S950 68 1000 68 C1050 68 1050 40 1100 40 S1150 68 1200 68 L1200 120 H0 Z"/></svg>

CSS background-image

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

CSS mask-image (takes the text colour)

.scallop {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/-1CZ2QSFqGQR/amnt.svg") center / contain no-repeat;
}

React

import ScallopSvg from "./scallop.jsx"; // from the React tab above

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

Made with AMNT

AMNT SVG 1.1 drew this from the words Scallop: Evenly spaced rounded humps repeat across 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.

Rest of Shape dividers, 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