Menu

Beta
Sign in
Beta
Scallop SVG element, flat

Scallop SVG element, flat

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.

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/-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} />

Tags

scalloprounded edgesection dividershape dividerselementflat

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.

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