Menu

Beta
Sign in
Knot Border SVG element, line

Knot Border SVG element, line

A softly rounded rectangular frame uses a continuous rope border and a small sailor’s knot at the top. It suits wedding invitations and nautical-themed dinner menus.

Free · from Coastal Wedding Frames, Line

Similar SVGs

More from Coastal Wedding Frames, Line

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/QmKCmIpM29cr/amnt.svg" alt="Knot Border" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 819 1024" width="819" height="1024"><g id="layer-1" data-name="Rectangle 1"><path d="M115 70L704 70C727.2 70 746 88.8 746 112L746 912C746 935.2 727.2 954 704 954L115 954C91.8 954 73 935.2 73 912L73 112C73 88.8 91.8 70 115 70Z" fill="none" stroke="#173451" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></g><g id="layer-2" data-name="Rectangle 2"><path d="M115 76L704 76C723.88 76 740 92.12 740 112L740 912C740 931.88 723.88 948 704 948L115 948C95.12 948 79 931.88 79 912L79 112C79 92.12 95.12 76 115 76Z" fill="none" stroke="#173451" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="8 8"/></g><g id="layer-3" data-name="Rectangle 3"><path d="M115 82L704 82C720.57 82 734 95.43 734 112L734 912C734 928.57 720.57 942 704 942L115 942C98.43 942 85 928.57 85 912L85 112C85 95.43 98.43 82 115 82Z" fill="none" stroke="#173451" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="8 8"/></g><g id="layer-4" data-name="Shape 4"><path d="M409.5 78C397 62 378 61 372 73C365 87 383 99 400 88L419 73C435 61 453 68 451 82C449 96 429 100 417 88L399 72C388 63 376 69 380 78C383 86 395 84 409.5 78Z" fill="none" stroke="#173451" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></g><g id="layer-5" data-name="Shape 5"><path d="M394 92C402 100 416 100 424 92" fill="none" stroke="#173451" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
CSS background-image
.knot-border {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/QmKCmIpM29cr/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.knot-border {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/QmKCmIpM29cr/amnt.svg") center / contain no-repeat;
}
React
import KnotBorderSvg from "./knot-border.jsx"; // from the React tab above

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

Tags

weddingframeropeknotnautical

Made with AMNT

AMNT SVG 1.1 drew this from the words Draw one coastal wedding invitation frame: an upright rectangle with softly rounded corners, a delicate continuous rope border, and a small sailor's knot centered at the top. Use uniform navy vector lines, generous empty interior space, and no text, shading, or background. as part of the pack Coastal Wedding Frames, Line. 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