Menu

Beta
Sign in
Wave Corners SVG element, line

Wave Corners SVG element, line

An upright rectangle pairs curling wave details at all four corners with a tiny rising sun above the top edge. Use it for wedding invitations and ceremony signage.

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/0urpiuYc2J2n/amnt.svg" alt="Wave Corners" 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="M105 120L714 120L714 904L105 904Z" fill="none" stroke="#18334f" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></g><g id="layer-2" data-name="Copy 2"><path d="M105 157C82 155 65 141 60 122C55 103 67 86 83 87C96 88 101 101 94 109C89 115 79 113 77 106" fill="none" stroke="#18334f" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M142 120C140 98 126 81 107 76C88 71 71 82 72 98C73 111 86 116 94 109C100 104 98 94 91 92" fill="none" stroke="#18334f" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><g id="layer-3" data-name="Copy 3" transform="matrix(-1 0 0 1 819 0)"><path d="M105 157C82 155 65 141 60 122C55 103 67 86 83 87C96 88 101 101 94 109C89 115 79 113 77 106" fill="none" stroke="#18334f" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M142 120C140 98 126 81 107 76C88 71 71 82 72 98C73 111 86 116 94 109C100 104 98 94 91 92" fill="none" stroke="#18334f" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><g id="layer-4" data-name="Copy 4" transform="matrix(1 0 0 -1 0 1024)"><path d="M105 157C82 155 65 141 60 122C55 103 67 86 83 87C96 88 101 101 94 109C89 115 79 113 77 106" fill="none" stroke="#18334f" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M142 120C140 98 126 81 107 76C88 71 71 82 72 98C73 111 86 116 94 109C100 104 98 94 91 92" fill="none" stroke="#18334f" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><g id="layer-5" data-name="Copy 5" transform="matrix(-1 0 0 -1 819 1024)"><path d="M105 157C82 155 65 141 60 122C55 103 67 86 83 87C96 88 101 101 94 109C89 115 79 113 77 106" fill="none" stroke="#18334f" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M142 120C140 98 126 81 107 76C88 71 71 82 72 98C73 111 86 116 94 109C100 104 98 94 91 92" fill="none" stroke="#18334f" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><g id="layer-6" data-name="Group 6"><path d="M379 91L440 91" fill="none" stroke="#18334f" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M389 91C389 79.68 398.18 70.5 409.5 70.5C420.82 70.5 430 79.68 430 91" fill="none" stroke="#18334f" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M409.5 61L409.5 51" fill="none" stroke="#18334f" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M390 68L383 61" fill="none" stroke="#18334f" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M429 68L436 61" fill="none" stroke="#18334f" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M380 80L370 77" fill="none" stroke="#18334f" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M439 80L449 77" fill="none" stroke="#18334f" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
CSS background-image
.wave-corners {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/0urpiuYc2J2n/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.wave-corners {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/0urpiuYc2J2n/amnt.svg") center / contain no-repeat;
}
React
import WaveCornersSvg from "./wave-corners.jsx"; // from the React tab above

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

Tags

weddingframewavessuncoastal

Made with AMNT

AMNT SVG 1.1 drew this from the words Draw one coastal wedding invitation frame: an upright rectangle with paired fine-line wave curls decorating all four corners and a tiny rising sun centered above the top border. Keep the design symmetrical and the interior entirely blank. Navy vector lines only, transparent background, no text. 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