Ally's Free Graphics Palace — buttons, bars & backgrounds

Hi! I'm Ally and I make little graphics for people's pages. Everything here is FREE for your personal page. Each one has its code under it — Copy the code, paste it into your page's HTML (in the page builder's advanced mode), and it's yours. They're drawn in code, so there's no image file to upload and nothing to hotlink, which is the best kind of free.

88x31 Buttons

<svg width="88" height="31" viewBox="0 0 88 31" role="img" aria-label="made with notepad"><rect width="88" height="31" fill="#fff"/><rect x="1" y="1" width="86" height="29" fill="none" stroke="#000"/><rect x="3" y="3" width="22" height="25" fill="#2b5fd9"/><path d="M7 8 h14 M7 12 h14 M7 16 h14 M7 20 h9" stroke="#fff"/><text x="56" y="13" text-anchor="middle" font-family="Verdana" font-size="8" fill="#000">made with</text><text x="56" y="24" text-anchor="middle" font-family="Verdana" font-size="9" font-weight="bold" fill="#2b5fd9">notepad</text></svg>

<svg width="88" height="31" viewBox="0 0 88 31" role="img" aria-label="this page is 100% handmade"><rect width="88" height="31" fill="#ffe066"/><rect x="1" y="1" width="86" height="29" fill="none" stroke="#7a5a00"/><text x="44" y="13" text-anchor="middle" font-family="Verdana" font-size="8" fill="#7a5a00">this page is</text><text x="44" y="25" text-anchor="middle" font-family="Verdana" font-size="9" font-weight="bold" fill="#c2185b">100% HANDMADE</text></svg>

<svg width="88" height="31" viewBox="0 0 88 31" role="img" aria-label="best viewed with eyes"><rect width="88" height="31" fill="#000"/><rect x="1" y="1" width="86" height="29" fill="none" stroke="#39ff14"/><circle cx="14" cy="15" r="6" fill="#fff"/><circle cx="14" cy="15" r="3" fill="#000"/><circle cx="28" cy="15" r="6" fill="#fff"/><circle cx="28" cy="15" r="3" fill="#000"/><text x="60" y="13" text-anchor="middle" font-family="Verdana" font-size="8" fill="#39ff14">best viewed</text><text x="60" y="24" text-anchor="middle" font-family="Verdana" font-size="8" fill="#39ff14">with EYES</text></svg>

<svg width="88" height="31" viewBox="0 0 88 31" role="img" aria-label="powered by tea"><rect width="88" height="31" fill="#e8f5e9"/><rect x="1" y="1" width="86" height="29" fill="none" stroke="#1b5e20"/><path d="M8 12 h16 v8 q0 6 -8 6 q-8 0 -8 -6 z" fill="#fff" stroke="#1b5e20"/><path d="M24 14 q5 0 4 4 q-1 3 -4 2" fill="none" stroke="#1b5e20"/><path d="M13 9 q2 -3 0 -5 M18 9 q2 -3 0 -5" stroke="#9e9e9e" fill="none"/><text x="58" y="13" text-anchor="middle" font-family="Verdana" font-size="8" fill="#1b5e20">powered by</text><text x="58" y="25" text-anchor="middle" font-family="Verdana" font-size="10" font-weight="bold" fill="#1b5e20">TEA</text></svg>

<svg width="88" height="31" viewBox="0 0 88 31" role="img" aria-label="webring member"><defs><linearGradient id="wr" x1="0" x2="1"><stop offset="0" stop-color="#7b1fa2"/><stop offset="1" stop-color="#00897b"/></linearGradient></defs><rect width="88" height="31" fill="url(#wr)"/><circle cx="15" cy="15.5" r="8" fill="none" stroke="#ffe066" stroke-width="3"/><text x="54" y="13" text-anchor="middle" font-family="Verdana" font-size="8" fill="#fff">WEBRING</text><text x="54" y="24" text-anchor="middle" font-family="Verdana" font-size="8" fill="#ffe066">MEMBER</text></svg>

<svg width="88" height="31" viewBox="0 0 88 31" role="img" aria-label="I heart my page"><rect width="88" height="31" fill="#ffd6ec"/><rect x="1" y="1" width="86" height="29" fill="none" stroke="#c2185b"/><text x="14" y="21" font-family="Verdana" font-size="12" font-weight="bold" fill="#c2185b">I</text><path d="M34 22 l-7 -7 a4 4 0 0 1 7 -4 a4 4 0 0 1 7 4 z" fill="#ff2d6f"/><text x="64" y="21" text-anchor="middle" font-family="Verdana" font-size="10" font-weight="bold" fill="#c2185b">my page</text></svg>

Divider Bars

<svg width="100%" height="8" viewBox="0 0 180 8" preserveAspectRatio="none" role="img" aria-label="rainbow divider"><defs><linearGradient id="rb" x1="0" x2="1"><stop offset="0" stop-color="red"/><stop offset=".2" stop-color="orange"/><stop offset=".4" stop-color="yellow"/><stop offset=".6" stop-color="lime"/><stop offset=".8" stop-color="#2979ff"/><stop offset="1" stop-color="violet"/></linearGradient></defs><rect width="180" height="8" rx="4" fill="url(#rb)"/></svg>

<svg width="180" height="14" viewBox="0 0 180 14" role="img" aria-label="star divider"><g fill="#ffb300"><path id="st" d="M7 1 l1.6 4 h4.2 l-3.4 2.6 l1.3 4.2 l-3.7 -2.5 l-3.7 2.5 l1.3 -4.2 l-3.4 -2.6 h4.2 z"/><use href="#st" x="20"/><use href="#st" x="40"/><use href="#st" x="60"/><use href="#st" x="80"/><use href="#st" x="100"/><use href="#st" x="120"/><use href="#st" x="140"/><use href="#st" x="160"/></g></svg>

<svg width="180" height="12" viewBox="0 0 180 12" role="img" aria-label="wavy divider"><path d="M0 6 q7.5 -6 15 0 t15 0 t15 0 t15 0 t15 0 t15 0 t15 0 t15 0 t15 0 t15 0 t15 0 t15 0" fill="none" stroke="#00897b" stroke-width="2.5"/></svg>

Backgrounds

These are CSS. Put the line in your page's body { } style.

Night Stars

background: #10052a; background-image: radial-gradient(circle at 6px 6px, #fff 1px, transparent 1.6px), radial-gradient(circle at 18px 14px, #ffe066 1px, transparent 1.6px); background-size: 24px 20px;

Bubblegum Check

background: repeating-conic-gradient(#ff8ad8 0 25%, #ffffff 0 50%) 0 0 / 20px 20px;

Picnic Gingham

background: repeating-linear-gradient(0deg, rgba(0,137,123,.25) 0 8px, transparent 8px 16px), repeating-linear-gradient(90deg, rgba(0,137,123,.25) 0 8px, transparent 8px 16px), #fff;

Terms of Use

Free for your personal page. Yes, really, free.
NO HOTLINKING!! (You can't hotlink these anyway because they're code. I just like saying it. I had a bad experience in 2001.)
Please don't say you made them. You didn't. I did. It's fine. Just don't.
Don't sell them. Nobody would buy them. Still, don't.
Please link back to me if you can. You don't have to. It makes me happy when you do.

Link Back!

<a href="https://nuxtre.com/pages/free-graphics" target="_top"><svg width="88" height="31" viewBox="0 0 88 31" role="img" aria-label="Ally's Free Graphics Palace"><rect width="88" height="31" fill="#2d1b4e"/><rect x="1" y="1" width="86" height="29" fill="none" stroke="#4fd1c5"/><text x="44" y="13" text-anchor="middle" font-family="Verdana" font-size="8" fill="#4fd1c5">ALLY'S FREE</text><text x="44" y="24" text-anchor="middle" font-family="Verdana" font-size="8" font-weight="bold" fill="#ffe066">GRAPHICS PALACE</text></svg></a>

Guestbook

Did you use one? Tell me where! Request a button! (I take requests, slowly.)

✦ Ally's Free Graphics Palace ✦