Menu

Beta
Sign in
Beta
Dotted Line SVG element, flat

Dotted Line SVG element, flat

Evenly spaced circular dots form a line across the frame. It can divide sections on a worksheet or guide readers through a printed table of contents.

Free · from Underlines, flat

Similar SVGs

More from Underlines, flat

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/MPxRB925Z-T0/amnt.svg" alt="Dotted Line" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 40" preserveAspectRatio="none" fill="none" stroke="currentColor"><path d="M20 20h0 M40 20h0 M60 20h0 M80 20h0 M100 20h0 M120 20h0 M140 20h0 M160 20h0 M180 20h0 M200 20h0 M220 20h0 M240 20h0 M260 20h0 M280 20h0 M300 20h0 M320 20h0 M340 20h0 M360 20h0 M380 20h0" stroke-width="3" stroke-linecap="round" vector-effect="non-scaling-stroke"/></svg>
CSS background-image
.dotted-line {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/MPxRB925Z-T0/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.dotted-line {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/MPxRB925Z-T0/amnt.svg") center / contain no-repeat;
}
React
import DottedLineSvg from "./dotted-line.jsx"; // from the React tab above

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

Tags

dotteddotsunderlineunderlineselementflat

Made with AMNT

AMNT SVG Pro 1.1 drew this from the words Dotted Line: Row of evenly spaced circular dots across the frame. as part of the pack Underlines, 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