Menu

Beta
Sign in
Decorating Progress SVG element, line

Decorating Progress SVG element, line

Three photo openings and caption strips connect into a simple sequence for showing cake decorating progress. Share the stages in social media stories or add them to a bakery blog post.

Free · from Home Bakery Story Frames

Similar SVGs

More from Home Bakery Story Frames

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/aqouw_Svgtur/amnt.svg" alt="Decorating Progress" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 1024" width="512" height="1024"><g id="layer-1" data-name="Rectangle 1"><path d="M52 24L460 24C475.46 24 488 36.54 488 52L488 972C488 987.46 475.46 1000 460 1000L52 1000C36.54 1000 24 987.46 24 972L24 52C24 36.54 36.54 24 52 24Z" fill="none" stroke="#68452f" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></g><g id="layer-2" data-name="Group 2" transform="matrix(0.848048 0.529919 -0.529919 0.848048 408 91)"><path d="M-10 -31C-10 -34.33 -8.33 -36.67 -5 -38L5 -38C8.33 -36.67 10 -34.33 10 -31L8 -13C7.33 -9 5.67 -6 3 -4L-3 -4C-5.67 -6 -7.33 -9 -8 -13Z" fill="none" stroke="#68452f" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M0 -4L0 25" fill="none" stroke="#68452f" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M0 25L0 25C2.21 25 4 26.79 4 29L4 36C4 38.21 2.21 40 0 40L0 40C-2.21 40 -4 38.21 -4 36L-4 29C-4 26.79 -2.21 25 0 25Z" fill="none" stroke="#68452f" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></g><g id="layer-3" data-name="Rectangle 3"><path d="M76 164L436 164C442.63 164 448 169.37 448 176L448 342C448 348.63 442.63 354 436 354L76 354C69.37 354 64 348.63 64 342L64 176C64 169.37 69.37 164 76 164Z" fill="none" stroke="#68452f" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></g><g id="layer-4" data-name="Rectangle 4"><path d="M91 365L421 365C424.31 365 427 367.69 427 371L427 385C427 388.31 424.31 391 421 391L91 391C87.69 391 85 388.31 85 385L85 371C85 367.69 87.69 365 91 365Z" fill="none" stroke="#68452f" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></g><g id="layer-5" data-name="Shape 5"><path d="M256 401L256 420M249 413L256 420L263 413" fill="none" stroke="#68452f" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></g><g id="layer-6" data-name="Rectangle 6"><path d="M76 427L436 427C442.63 427 448 432.37 448 439L448 605C448 611.63 442.63 617 436 617L76 617C69.37 617 64 611.63 64 605L64 439C64 432.37 69.37 427 76 427Z" fill="none" stroke="#68452f" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></g><g id="layer-7" data-name="Rectangle 7"><path d="M91 628L421 628C424.31 628 427 630.69 427 634L427 648C427 651.31 424.31 654 421 654L91 654C87.69 654 85 651.31 85 648L85 634C85 630.69 87.69 628 91 628Z" fill="none" stroke="#68452f" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></g><g id="layer-8" data-name="Shape 8"><path d="M256 664L256 683M249 676L256 683L263 676" fill="none" stroke="#68452f" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></g><g id="layer-9" data-name="Rectangle 9"><path d="M76 690L436 690C442.63 690 448 695.37 448 702L448 868C448 874.63 442.63 880 436 880L76 880C69.37 880 64 874.63 64 868L64 702C64 695.37 69.37 690 76 690Z" fill="none" stroke="#68452f" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></g><g id="layer-10" data-name="Rectangle 10"><path d="M91 891L421 891C424.31 891 427 893.69 427 897L427 911C427 914.31 424.31 917 421 917L91 917C87.69 917 85 914.31 85 911L85 897C85 893.69 87.69 891 91 891Z" fill="none" stroke="#68452f" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
CSS background-image
.decorating-progress {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/aqouw_Svgtur/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.decorating-progress {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/aqouw_Svgtur/amnt.svg") center / contain no-repeat;
}
React
import DecoratingProgressSvg from "./decorating-progress.jsx"; // from the React tab above

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

Tags

cakedecoratingprogressphotosprocess

Made with AMNT

AMNT SVG 1.1 drew this from the words Draw one vertical 1:2 SVG story frame for a home bakery cake decorating progress post. Use cocoa-brown monoline outlines, a rounded outer border, three vertically stacked transparent photo openings with small blank caption strips below each, and tiny connecting arrows between stages. Add a small spatula ornament beside the empty heading area; generous margins, editable vector shapes, no text, photos, shading, or logos. as part of the pack Home Bakery Story Frames. 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