Menu

Beta
Sign in
Beta
Circle Row SVG element, flat

Circle Row SVG element, flat

Outlined circles repeat at regular intervals across the frame. Add the row between questions on a children’s activity page or above the footer of a party invitation.

Free · from Horizontal Rules, Flat · Set 2

Similar SVGs

More from Horizontal Rules, Flat · Set 2

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/VVRuQ3tc7DkY/amnt.svg" alt="Circle Row" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"><g id="yellow" data-name="Yellow"><path d="M422 423c-81 12-65 147 21 133 82-13 65-145-21-133z" fill="#fce94c" stroke="#fce94c"/><path d="M110 422c-85 2-83 137 2 135 84-2 82-136-2-135z" fill="#fce94c" stroke="#fce94c"/><path d="M582 423c-80 12-66 147 21 133 82-13 65-145-21-133z" fill="#fce94c" stroke="#fce94c"/><path d="M745 423c-81 11-67 145 19 133 81-10 68-144-19-133z" fill="#fce94c" stroke="#fce94c"/><path d="M270 422c-85 0-85 135 0 135 84 0 84-135 0-135z" fill="#fce94c" stroke="#fce94c"/><path d="M904 423c-80 11-66 147 21 133 81-13 65-144-21-133z" fill="#fce94c" stroke="#fce94c"/></g><g id="navy" data-name="Navy"><path d="M589 412c-97 5-91 160 8 155 97-5 90-160-8-155zm-7 11c86-12 103 120 21 133-87 14-101-121-21-133z" fill="#0a255b" stroke="#0a255b"/><path d="M266 412c-97 4-91 161 8 155 97-5 90-159-8-155zm4 10c84 0 84 135 0 135-85 0-85-135 0-135z" fill="#0a255b" stroke="#0a255b"/><path d="M427 412c-97 7-87 162 11 155 97-7 87-162-11-155zm-5 11c86-12 103 120 21 133-86 14-102-121-21-133z" fill="#0a255b" stroke="#0a255b"/><path d="M107 412c-97 4-91 161 8 155 97-6 90-159-8-155zm3 10c84-1 86 133 2 135-85 2-87-133-2-135z" fill="#0a255b" stroke="#0a255b"/><path d="M750 412c-97 7-89 161 10 155 96-5 88-162-10-155zm-5 11c87-11 100 123 19 133-86 12-100-122-19-133z" fill="#0a255b" stroke="#0a255b"/><path d="M911 412c-97 4-91 160 8 155 96-5 90-158-8-155zm-7 11c86-11 102 120 21 133-87 14-101-122-21-133z" fill="#0a255b" stroke="#0a255b"/></g></svg>
CSS background-image
.circle-row {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/VVRuQ3tc7DkY/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.circle-row {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/VVRuQ3tc7DkY/amnt.svg") center / contain no-repeat;
}
React
import CircleRowSvg from "./circle-row.jsx"; // from the React tab above

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

Tags

dividercirclesrepeathorizontal ruleselementflat

Made with AMNT

AMNT Draw 1.2 drew this from the words Circle Row: Large outlined circles repeat at even intervals across the frame. A flat element. as part of the pack Horizontal Rules, Flat · Set 2. 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