Bitcoin address: bc1p4aya2wzwwn3whj0td94kxns7yw2tl7rr7zn6cv9yzuydxgqk9meshldr8r
SHOWING: First 60
{
"p": ".bitter",
"username": "ovo.bitter",
"op": "post",
"content": "GM. We need an X (Twitter) account with 100 followers to submit OvO Owls to Magic Eden's marketplace. We will continue to only use .bitter posts for updates/communications, but we have setup @OvOBitcoin to meet the requirements of Magic Eden (Note that we will never tweet anything from that account or follow anyone). If you want to help with the project, doing any of the following would be awesome - on X, change your PFP to your OvO Owl, follow @OvOBitcoin on X, reply to this bitter post following the bitter protoco and be sure to include your X handle and ordinal deposit address somewhere in the "content" of the .bitter reply. Shout out @OvOBitcoin on X and include this inscription Id or your reply to this post's inscription Id. We will send 8.ovo to the first person that meets these requirements. We will send two more sub 100 .ovo's to two other random addresses that meet the same criteria. Thank you."
}#20,926,785text{
p: ".bitter",
username: "ovo.bitter",
op: "post",
content: "GM. We need an X (Twitter) account with 100 followers to submit OvO Owls to Magic Eden's marketplace. We will continue to only use .bitter posts for updates/communications, but we have setup @OvOBitcoin to meet the requirements of Magic Eden (Note that we will never tweet anything from that account or follow anyone). If you want to help with the project, doing any of the following would be awesome - on X, change your PFP to your OvO Owl, follow @OvOBitcoin on X, reply to this bitter post following the bitter protoco and be sure to include your X handle and ordinal deposit address somewhere in the "content" of the .bitter reply. Shout out @OvOBitcoin on X and include this inscription Id or your reply to this post's inscription Id. We will send 8.ovo to the first person that meets these requirements. We will send two more sub 100 .ovo's to two other random addresses that meet the same criteria. Thank you."
}#20,925,493text{
p: ".bitter",
username: "ovo.bitter",
op: "post",
content: "Since the OvO Owls collection has officially minted out, if you are an exchange or marketplace that would like to list the collection and prefer to show images instead of a simple text inscription (#.ovo), you can easily render the OvO SVG by calling the renderOvO() function and passing in the appropriate .ovo number (returns a string of the SVG). Code found => https://www.ord.io/16645606"
}#16,646,539text#16,645,606jspost#16,631,115.bitterpost#16,526,798.bitter
#16,473,600htmlOvO Owls
July 11th, 2023
The world's first fair mint PFP collection derived solely from text based inscriptions.
Motivation
With no "team" or social media accounts behind the OvO Owls project, the motivation is to simply have fun and build community. The advent of Ordinal Theory created a paradigm shift in Bitcoin and has birthed something all bitcoiners have been dreaming of -- an "on-chain economy". OvO Owls is an experiment as much as it is a collection with all communications related to the project being done 100% on-chain.
Protocol
There are a total of 4,096 possible OvO Owls, corresponding to all the potential 3-digit hexadecimal colors. Each OvO mint number corresponds to a unique hexadecimal color, ensuring adherence to accessibility standards with a 4.5 color contrast ratio.
It is a fair mint, and initial ownership follows the "first-is-first" principle. Once the collection is fully minted, all valid inscription IDs will be gathered and submitted to various ordinal marketplaces for trading.
Minting an OvO is a straightforward process that involves using the .ovo naming convention. The first inscriptions witnessed, ranging from 0.ovo to 4095.ovo, will be deemed valid.
Viewing Your OvO Owl
To view and download your OvO, access at https://ordinals.com/content/ac0af86b42308f873f545602ea2b9c06c1b876013c4bf6b622b13615f702db99i0 or execute the provided HTML code below.
<!DOCTYPE html>
<html>
<head>
<style>
.centered {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100vw;
}
.ovo {
display: flex;
flex-direction: column;
width: 15rem;
height: 15rem;
align-items: center;
justify-content: center;
}
.text {
font-family: "Courier New", Courier, monospace;
font-size: 2rem;
}
textarea:focus,
input:focus {
outline: none;
}
</style>
</head>
<script>
setTimeout(() => (document.getElementById("download").hidden = true), 1);
// Generate a list of all possible 3 digit hex codes
const generateAllHexCodes = () => {
const hexCodes = [];
for (let i = 0; i < 4096; i++) {
const hexCode = i.toString(16).padStart(3, "0");
hexCodes.push(hexCode);
}
return hexCodes;
};
// Create random value
const createRandomGenerator = (seed) => {
let currentSeed = seed;
return () => {
const x = Math.sin(currentSeed++) * 10000;
return x - Math.floor(x);
};
};
// Shuffle the hex codes in a consistent way
const shuffleHexCodes = () => {
const hexCodes = generateAllHexCodes();
// Set a fixed random seed for consistent shuffling
const seed = 1234;
const random = createRandomGenerator(seed);
for (let i = hexCodes.length - 1; i > 0; i--) {
const j = Math.floor(random() * (i + 1));
[hexCodes[i], hexCodes[j]] = [hexCodes[j], hexCodes[i]];
}
return hexCodes;
};
const updateOvo = (inputValue) => {
const el = document.getElementById("error");
if (inputValue < 0 || inputValue > 4095) {
el.innerHTML = "You must enter a value 0 - 4095";
document.getElementById("download").hidden = true;
return;
}
el.innerHTML = "";
document.getElementById("download").hidden = false;
document.getElementById("input").value = inputValue;
const hex3 = inputValue ? shuffleHexCodes()[inputValue] : "fff";
const isDark = inputValue === "" ? true : isAccessibleOnDark(hex3);
const ovo = document.getElementById("ovoSvg");
const bkg = ovo.getElementsByClassName("bkg");
const border = ovo.getElementsByClassName("border");
const face = ovo.getElementsByClassName("face");
for (let i = 0; i < bkg.length; i++) {
bkg[i].style.fill = isDark ? "#000" : "#fff";
}
for (let i = 0; i < border.length; i++) {
border[i].style.fill = isDark ? "#333" : "ddd";
}
for (let i = 0; i < face.length; i++) {
face[i].style.fill = `#${hex3}`;
}
if (inputValue === "") {
document.getElementById("download").hidden = true;
}
};
const convertSvgToImage = () => {
const svg = document.querySelector("#ovoSvg");
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const svgData = new XMLSerializer().serializeToString(svg);
const img = new Image();
img.onload = function () {
canvas.width = 1024;
canvas.height = 1024;
ctx.drawImage(img, 0, 0);
const dataURL = canvas.toDataURL("image/png");
// Create a temporary link and trigger the download
const link = document.createElement("a");
link.href = dataURL;
link.download = `ovo_${document.getElementById("input").value}.png`;
link.click();
};
img.src = "data:image/svg+xml;base64," + btoa(svgData);
};
// Calculate relative luminance of the colors
const getRelativeLuminance = (hex) => {
const normalizedHex = hex.length === 3 ? hex + hex : hex;
const [r, g, b] = [0, 2, 4].map((start) =>
parseInt(normalizedHex.slice(start, start + 2), 16)
);
const rsrgb = r / 255;
const gsrgb = g / 255;
const bsrgb = b / 255;
const rl =
rsrgb <= 0.03928 ? rsrgb / 12.92 : ((rsrgb + 0.055) / 1.055) ** 2.4;
const gl =
gsrgb <= 0.03928 ? gsrgb / 12.92 : ((gsrgb + 0.055) / 1.055) ** 2.4;
const bl =
bsrgb <= 0.03928 ? bsrgb / 12.92 : ((bsrgb + 0.055) / 1.055) ** 2.4;
return 0.2126 * rl + 0.7152 * gl + 0.0722 * bl;
};
// Determine if the hex is accessible on a dark background.
const isAccessibleOnDark = (colorHex) => {
const color = colorHex.replace("#", "");
const backgroundHex = "000000";
// Calculate the contrast ratio
const contrast =
(getRelativeLuminance(color) + 0.05) /
(getRelativeLuminance(backgroundHex) + 0.05);
// Check if the contrast ratio passes accessibility
return contrast >= 4.5;
};
</script>
<body>
<div class="centered">
<div class="container">
<div class="ovo">
<svg
id="ovoSvg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 308.2 308.2"
style="enable-background: new 0 0 308.2 308.2"
xml:space="preserve"
>
<style type="text/css">
.bkg {
fill: #000;
}
.border {
fill: #333;
}
.face {
fill: #fff;
}
</style>
<g>
<path
class="bkg"
d="M83,130.7c-7.3,1.2-13.2,5.8-16.8,12.9c-1.7,3.4-2.4,5.7-3.1,9.9c-1,6.1-0.5,12.8,1.5,18.6
c1.2,3.7,2.6,6.1,5.1,9.1c4.3,5.2,9.7,8.1,15.7,8.4c8.7,0.5,16.6-3.3,21.2-10.2c1.7-2.6,3.7-7.5,4.3-10.8c0.7-3.5,0.7-11.1,0-14.7
C107.8,138,96.3,128.5,83,130.7z"
/>
<path
class="bkg"
d="M225.1,130.9c-3-0.7-7.7-0.7-10.4,0.1c-7.5,2.2-13.4,7.8-16.5,15.9c-2.9,7.4-2.7,18.7,0.4,26.1
c2.7,6.4,6.8,11.4,11.4,14c8.6,4.7,20.1,3,27.2-4.1c2-2,2.8-3.2,4.2-6c2.9-5.9,3.3-8.1,3.4-15.6c0-5.4-0.1-6.8-0.8-9.5
C241.1,140.5,234.4,133.1,225.1,130.9z"
/>
<path
class="bkg"
d="M286.6,98.1c-7.2-17.1-17.6-32.5-30.8-45.7c-13.2-13.2-28.6-23.6-45.7-30.8c-17.7-7.5-36.5-11.3-56-11.3
s-38.2,3.8-56,11.3c-17.1,7.2-32.5,17.6-45.7,30.8C39.2,65.6,28.8,81,21.6,98.1c-7.5,17.7-11.3,36.5-11.3,56s3.8,38.2,11.3,56
c7.2,17.1,17.6,32.5,30.8,45.7C65.6,269,81,279.3,98.1,286.6c17.7,7.5,36.5,11.3,56,11.3s38.2-3.8,56-11.3
c17.1-7.2,32.5-17.6,45.7-30.8c13.2-13.2,23.6-28.6,30.8-45.7c7.5-17.7,11.3-36.5,11.3-56S294.1,115.8,286.6,98.1z M205.1,106.7
c6.1-3.5,10.6-5.7,12.7-6.3c2.3-0.6,4.7-0.4,7.4,0.7c1.5,0.6,14.4,7.3,15.1,7.8c0.1,0-1,2.2-2.4,4.8l-2.5,4.8l-4.5-3.3
c-2.5-1.8-5.8-4.1-7.2-5.1l-2.7-1.9l-1.7,1c-1,0.5-4.1,2.6-7,4.6c-2.9,2-5.5,3.8-5.8,4c-0.5,0.2-0.8-0.2-2.2-2.4
c-0.8-1.5-2-3.5-2.5-4.6l-0.9-1.8L205.1,106.7z M67.7,108.8c0.8-0.8,15.1-7.8,16.8-8.3c2.5-0.7,3-0.7,5.3,0
c1.9,0.6,7.6,3.4,13.7,6.8l3.3,1.9l-2.4,4.6c-1.3,2.5-2.5,4.6-2.8,4.6c-0.2,0-3.5-2.2-7.2-4.9c-3.8-2.7-7.1-4.9-7.4-4.8
c-0.3,0-3.7,2.3-7.5,4.9c-3.9,2.7-7.1,4.8-7.3,4.8C71.6,118.3,67.3,109.2,67.7,108.8z M121.9,169.6c-3.9,18.6-17.2,29.8-35.7,29.8
c-5.7,0-9.1-0.6-13.5-2.5c-4.3-1.9-6.8-3.6-10.4-7.2c-4.7-4.8-7.5-9.9-9.4-17.5c-1.4-5.5-1.7-14.3-0.8-20.5
c0.6-4.3,2.3-10,4.1-13.3c1.3-2.7,4.8-7.3,6.7-9c4.4-4,11.3-7.2,17-8.1c2.8-0.4,12.1-0.1,15.7,0.6c3.7,0.7,9,3,12.4,5.6
C119.6,136.2,125.3,153.3,121.9,169.6z M169.1,181.5c-3.5,8.1-7.4,17.5-8.8,20.7l-2.5,5.9l-4.1-0.1l-4.1-0.1l-1.7-4.1
c-12.2-28.7-15.4-36.9-15-37.4c0.2-0.2,1.8-1,3.4-1.7c2.6-1.1,3-1.1,3.3-0.7c0.2,0.3,1.6,3.5,3.1,7.2c1.6,3.6,4.2,10,5.9,14.2
c1.7,4.2,3.6,8.6,4.2,9.9l1.1,2.3l1-2.1c0.5-1.2,3.3-7.8,6.3-14.8c2.9-7,5.8-13.7,6.4-15l1.1-2.2l3,1.4c1.7,0.8,3.1,1.4,3.3,1.5
C175.2,166.6,172.6,173.3,169.1,181.5z M245.1,189c-4.7,4.8-9,7.5-15.2,9.4c-3,1-3.5,1-9.4,1c-5.7,0-6.4-0.1-9.3-1
c-13.7-4.2-22.4-14.1-25.7-29.3c-1.1-5.1-1.1-13.7,0-19c2.9-13.8,11.5-24.2,23-27.9c6-1.9,14-2.2,19.9-0.8c6.5,1.6,12.5,5,17,9.6
c4.8,4.9,7.6,9.9,9.5,16.9C259,163.1,255.3,178.5,245.1,189z"
/>
<path
class="border"
d="M296,94.1c-7.8-18.3-18.9-34.8-33-49c-14.1-14.1-30.6-25.3-49-33c-19-8-39.2-12.1-60-12.1s-41,4.1-60,12.1
c-18.3,7.8-34.8,18.9-49,33s-25.3,30.6-33,49c-8,19-12.1,39.2-12.1,60s4.1,41,12.1,60c7.8,18.3,18.9,34.8,33,49
c14.1,14.1,30.6,25.3,49,33c19,8,39.2,12.1,60,12.1s41-4.1,60-12.1c18.3-7.8,34.8-18.9,49-33c14.1-14.1,25.3-30.6,33-49
c8-19,12.1-39.2,12.1-60S304.1,113.1,296,94.1z M286.6,210.1c-7.2,17.1-17.6,32.5-30.8,45.7c-13.2,13.2-28.6,23.6-45.7,30.8
c-17.7,7.5-36.5,11.3-56,11.3s-38.2-3.8-56-11.3c-17.1-7.2-32.5-17.6-45.7-30.8c-13.2-13.2-23.6-28.6-30.8-45.7
c-7.5-17.7-11.3-36.5-11.3-56s3.8-38.2,11.3-56c7.2-17.1,17.6-32.5,30.8-45.7C65.6,39.2,81,28.8,98.1,21.6
c17.7-7.5,36.5-11.3,56-11.3s38.2,3.8,56,11.3c17.1,7.2,32.5,17.6,45.7,30.8C269,65.6,279.3,81,286.6,98.1
c7.5,17.7,11.3,36.5,11.3,56S294.1,192.3,286.6,210.1z"
/>
<path
class="face"
d="M171.7,165l-3-1.4l-1.1,2.2c-0.6,1.2-3.5,8-6.4,15c-2.9,7-5.7,13.6-6.3,14.8l-1,2.1l-1.1-2.3
c-0.6-1.3-2.4-5.7-4.2-9.9s-4.4-10.6-5.9-14.2c-1.6-3.6-3-6.9-3.1-7.2c-0.2-0.5-0.7-0.4-3.3,0.7c-1.6,0.6-3.2,1.4-3.4,1.7
c-0.5,0.5,2.8,8.7,15,37.4l1.7,4.1l4.1,0.1l4.1,0.1l2.5-5.9c1.4-3.3,5.3-12.6,8.8-20.7c3.5-8.2,6.2-14.9,6-15
C174.9,166.4,173.4,165.8,171.7,165z"
/>
<path
class="face"
d="M108,127.3c-3.4-2.5-8.7-4.9-12.4-5.6c-3.7-0.6-12.9-1-15.7-0.6c-5.7,0.8-12.6,4.1-17,8.1
c-1.9,1.7-5.4,6.4-6.7,9c-1.7,3.4-3.4,9-4.1,13.3c-0.9,6.2-0.5,15,0.8,20.5c1.9,7.6,4.7,12.8,9.4,17.5c3.6,3.6,6.1,5.4,10.4,7.2
c4.3,1.9,7.8,2.5,13.5,2.5c18.5,0,31.9-11.2,35.7-29.8C125.3,153.3,119.6,136.2,108,127.3z M110.8,168.6c-0.6,3.4-2.6,8.2-4.3,10.8
c-4.6,6.9-12.5,10.7-21.2,10.2c-6-0.4-11.4-3.3-15.7-8.4c-2.5-3-3.9-5.4-5.1-9.1c-1.9-5.7-2.5-12.4-1.5-18.6
c0.7-4.2,1.4-6.5,3.1-9.9c3.6-7.1,9.5-11.7,16.8-12.9c13.4-2.2,24.8,7.3,27.9,23.2C111.5,157.5,111.5,165.1,110.8,168.6z"
/>
<path
class="face"
d="M72.1,118.3c0.2,0,3.4-2.2,7.3-4.8c3.8-2.7,7.2-4.9,7.5-4.9c0.3-0.1,3.6,2.1,7.4,4.8s7.1,4.9,7.2,4.9
c0.2,0,1.4-2.1,2.8-4.6l2.4-4.6l-3.3-1.9c-6-3.4-11.8-6.3-13.7-6.8c-2.3-0.7-2.8-0.7-5.3,0c-1.7,0.5-15.9,7.5-16.8,8.3
C67.3,109.2,71.6,118.3,72.1,118.3z"
/>
<path
class="face"
d="M204.2,115.6c1.3,2.3,1.7,2.7,2.2,2.4c0.3-0.2,2.9-2,5.8-4c2.9-2,6-4.1,7-4.6l1.7-1l2.7,1.9
c1.5,1,4.7,3.3,7.2,5.1l4.5,3.3l2.5-4.8c1.4-2.6,2.5-4.8,2.4-4.8c-0.7-0.6-13.6-7.2-15.1-7.8c-2.7-1.1-5.1-1.3-7.4-0.7
c-2.2,0.6-6.6,2.8-12.7,6.3l-4.3,2.4l0.9,1.8C202.2,112,203.3,114.1,204.2,115.6z"
/>
<path
class="face"
d="M245.5,131.1c-4.5-4.7-10.5-8.1-17-9.6c-5.9-1.4-13.9-1.2-19.9,0.8c-11.5,3.7-20.1,14.1-23,27.9
c-1.1,5.3-1.1,13.9,0,19c3.3,15.2,12,25.1,25.7,29.3c2.9,0.9,3.6,1,9.3,1c5.9,0,6.4,0,9.4-1c6.3-2,10.6-4.7,15.2-9.4
c10.1-10.5,13.9-25.9,9.8-41C253.1,141,250.3,136.1,245.5,131.1z M241.4,176.9c-1.4,2.9-2.2,4.1-4.2,6c-7.1,7.1-18.7,8.8-27.2,4.1
c-4.6-2.6-8.7-7.6-11.4-14c-3.1-7.5-3.3-18.7-0.4-26.1c3.2-8.1,9.1-13.8,16.5-15.9c2.7-0.8,7.4-0.8,10.4-0.1
c9.3,2.2,15.9,9.5,18.8,20.9c0.7,2.7,0.8,4.1,0.8,9.5C244.7,168.7,244.2,171,241.4,176.9z"
/>
</g>
</svg>
</div>
<p class="text" style="margin: 2rem 0 1rem 0">Enter your .ovo number</p>
<input
id="input"
type="number"
style="
background-color: #eee;
border: 1px solid #000;
border-radius: 0.25rem;
margin-bottom: 1rem;
width: 25%;
max-width: 20rem;
height: 2rem;
"
oninput="updateOvo(this.value)"
/>
<p
id="error"
class="text"
style="
font-size: 1rem;
font-weight: 600;
color: red;
margin: 0 0 1rem 0;
"
></p>
<button
id="download"
onclick="convertSvgToImage()"
style="
font-family: 'Courier New', Courier, monospace;
font-size: 1.25rem;
width: 15%;
height: 2rem;
border-radius: 0.25rem;
color: #fff;
background-color: #000;
cursor: pointer;
"
>
Download
</button>
</div>
</div>
</body>
</html>
#16,466,451text.ovo#16,466,144text# OvO Owls
July 11th, 2023
The world's first fair mint PFP collection derived solely from text based inscriptions.
### Motivation
With no "team" or social media accounts behind the OvO Owls project, the motivation is to simply have fun and build community. The advent of Ordinal Theory created a paradigm shift in Bitcoin and has birthed something all bitcoiners have been dreaming of -- an "on-chain economy". OvO Owls is an experiment as much as it is a collection with all communications related to the project being done 100% on-chain.
### Protocol
There are a total of 4,096 possible OvO Owls, corresponding to all the potential 3-digit hexadecimal colors. Each OvO mint number corresponds to a unique hexadecimal color, ensuring adherence to accessibility standards with a 4.5 color contrast ratio.
It is a fair mint, and initial ownership follows the "first-is-first" principle. Once the collection is fully minted, all valid inscription IDs will be gathered and submitted to various ordinal marketplaces for trading.
Minting an OvO is a straightforward process that involves using the `.ovo` naming convention. The first inscriptions witnessed, ranging from `0.ovo` to `4095.ovo`, will be deemed valid.
### Viewing Your OvO Owl
To view and download your OvO, access at https://ordinals.com/content/ac0af86b42308f873f545602ea2b9c06c1b876013c4bf6b622b13615f702db99i0 or execute the provided HTML code below.
```html
<!DOCTYPE html>
<html>
<head>
<style>
.centered {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100vw;
}
.ovo {
display: flex;
flex-direction: column;
width: 15rem;
height: 15rem;
align-items: center;
justify-content: center;
}
.text {
font-family: "Courier New", Courier, monospace;
font-size: 2rem;
}
textarea:focus,
input:focus {
outline: none;
}
</style>
</head>
<script>
setTimeout(() => (document.getElementById("download").hidden = true), 1);
// Generate a list of all possible 3 digit hex codes
const generateAllHexCodes = () => {
const hexCodes = [];
for (let i = 0; i < 4096; i++) {
const hexCode = i.toString(16).padStart(3, "0");
hexCodes.push(hexCode);
}
return hexCodes;
};
// Create random value
const createRandomGenerator = (seed) => {
let currentSeed = seed;
return () => {
const x = Math.sin(currentSeed++) * 10000;
return x - Math.floor(x);
};
};
// Shuffle the hex codes in a consistent way
const shuffleHexCodes = () => {
const hexCodes = generateAllHexCodes();
// Set a fixed random seed for consistent shuffling
const seed = 1234;
const random = createRandomGenerator(seed);
for (let i = hexCodes.length - 1; i > 0; i--) {
const j = Math.floor(random() * (i + 1));
[hexCodes[i], hexCodes[j]] = [hexCodes[j], hexCodes[i]];
}
return hexCodes;
};
const updateOvo = (inputValue) => {
const el = document.getElementById("error");
if (inputValue < 0 || inputValue > 4095) {
el.innerHTML = "You must enter a value 0 - 4095";
document.getElementById("download").hidden = true;
return;
}
el.innerHTML = "";
document.getElementById("download").hidden = false;
document.getElementById("input").value = inputValue;
const hex3 = inputValue ? shuffleHexCodes()[inputValue] : "fff";
const isDark = inputValue === "" ? true : isAccessibleOnDark(hex3);
const ovo = document.getElementById("ovoSvg");
const bkg = ovo.getElementsByClassName("bkg");
const border = ovo.getElementsByClassName("border");
const face = ovo.getElementsByClassName("face");
for (let i = 0; i < bkg.length; i++) {
bkg[i].style.fill = isDark ? "#000" : "#fff";
}
for (let i = 0; i < border.length; i++) {
border[i].style.fill = isDark ? "#333" : "ddd";
}
for (let i = 0; i < face.length; i++) {
face[i].style.fill = `#${hex3}`;
}
if (inputValue === "") {
document.getElementById("download").hidden = true;
}
};
const convertSvgToImage = () => {
const svg = document.querySelector("#ovoSvg");
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const svgData = new XMLSerializer().serializeToString(svg);
const img = new Image();
img.onload = function () {
canvas.width = 1024;
canvas.height = 1024;
ctx.drawImage(img, 0, 0);
const dataURL = canvas.toDataURL("image/png");
// Create a temporary link and trigger the download
const link = document.createElement("a");
link.href = dataURL;
link.download = `ovo_${document.getElementById("input").value}.png`;
link.click();
};
img.src = "data:image/svg+xml;base64," + btoa(svgData);
};
// Calculate relative luminance of the colors
const getRelativeLuminance = (hex) => {
const normalizedHex = hex.length === 3 ? hex + hex : hex;
const [r, g, b] = [0, 2, 4].map((start) =>
parseInt(normalizedHex.slice(start, start + 2), 16)
);
const rsrgb = r / 255;
const gsrgb = g / 255;
const bsrgb = b / 255;
const rl =
rsrgb <= 0.03928 ? rsrgb / 12.92 : ((rsrgb + 0.055) / 1.055) ** 2.4;
const gl =
gsrgb <= 0.03928 ? gsrgb / 12.92 : ((gsrgb + 0.055) / 1.055) ** 2.4;
const bl =
bsrgb <= 0.03928 ? bsrgb / 12.92 : ((bsrgb + 0.055) / 1.055) ** 2.4;
return 0.2126 * rl + 0.7152 * gl + 0.0722 * bl;
};
// Determine if the hex is accessible on a dark background.
const isAccessibleOnDark = (colorHex) => {
const color = colorHex.replace("#", "");
const backgroundHex = "000000";
// Calculate the contrast ratio
const contrast =
(getRelativeLuminance(color) + 0.05) /
(getRelativeLuminance(backgroundHex) + 0.05);
// Check if the contrast ratio passes accessibility
return contrast >= 4.5;
};
</script>
<body>
<div class="centered">
<div class="container">
<div class="ovo">
<svg
id="ovoSvg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 308.2 308.2"
style="enable-background: new 0 0 308.2 308.2"
xml:space="preserve"
>
<style type="text/css">
.bkg {
fill: #000;
}
.border {
fill: #333;
}
.face {
fill: #fff;
}
</style>
<g>
<path
class="bkg"
d="M83,130.7c-7.3,1.2-13.2,5.8-16.8,12.9c-1.7,3.4-2.4,5.7-3.1,9.9c-1,6.1-0.5,12.8,1.5,18.6
c1.2,3.7,2.6,6.1,5.1,9.1c4.3,5.2,9.7,8.1,15.7,8.4c8.7,0.5,16.6-3.3,21.2-10.2c1.7-2.6,3.7-7.5,4.3-10.8c0.7-3.5,0.7-11.1,0-14.7
C107.8,138,96.3,128.5,83,130.7z"
/>
<path
class="bkg"
d="M225.1,130.9c-3-0.7-7.7-0.7-10.4,0.1c-7.5,2.2-13.4,7.8-16.5,15.9c-2.9,7.4-2.7,18.7,0.4,26.1
c2.7,6.4,6.8,11.4,11.4,14c8.6,4.7,20.1,3,27.2-4.1c2-2,2.8-3.2,4.2-6c2.9-5.9,3.3-8.1,3.4-15.6c0-5.4-0.1-6.8-0.8-9.5
C241.1,140.5,234.4,133.1,225.1,130.9z"
/>
<path
class="bkg"
d="M286.6,98.1c-7.2-17.1-17.6-32.5-30.8-45.7c-13.2-13.2-28.6-23.6-45.7-30.8c-17.7-7.5-36.5-11.3-56-11.3
s-38.2,3.8-56,11.3c-17.1,7.2-32.5,17.6-45.7,30.8C39.2,65.6,28.8,81,21.6,98.1c-7.5,17.7-11.3,36.5-11.3,56s3.8,38.2,11.3,56
c7.2,17.1,17.6,32.5,30.8,45.7C65.6,269,81,279.3,98.1,286.6c17.7,7.5,36.5,11.3,56,11.3s38.2-3.8,56-11.3
c17.1-7.2,32.5-17.6,45.7-30.8c13.2-13.2,23.6-28.6,30.8-45.7c7.5-17.7,11.3-36.5,11.3-56S294.1,115.8,286.6,98.1z M205.1,106.7
c6.1-3.5,10.6-5.7,12.7-6.3c2.3-0.6,4.7-0.4,7.4,0.7c1.5,0.6,14.4,7.3,15.1,7.8c0.1,0-1,2.2-2.4,4.8l-2.5,4.8l-4.5-3.3
c-2.5-1.8-5.8-4.1-7.2-5.1l-2.7-1.9l-1.7,1c-1,0.5-4.1,2.6-7,4.6c-2.9,2-5.5,3.8-5.8,4c-0.5,0.2-0.8-0.2-2.2-2.4
c-0.8-1.5-2-3.5-2.5-4.6l-0.9-1.8L205.1,106.7z M67.7,108.8c0.8-0.8,15.1-7.8,16.8-8.3c2.5-0.7,3-0.7,5.3,0
c1.9,0.6,7.6,3.4,13.7,6.8l3.3,1.9l-2.4,4.6c-1.3,2.5-2.5,4.6-2.8,4.6c-0.2,0-3.5-2.2-7.2-4.9c-3.8-2.7-7.1-4.9-7.4-4.8
c-0.3,0-3.7,2.3-7.5,4.9c-3.9,2.7-7.1,4.8-7.3,4.8C71.6,118.3,67.3,109.2,67.7,108.8z M121.9,169.6c-3.9,18.6-17.2,29.8-35.7,29.8
c-5.7,0-9.1-0.6-13.5-2.5c-4.3-1.9-6.8-3.6-10.4-7.2c-4.7-4.8-7.5-9.9-9.4-17.5c-1.4-5.5-1.7-14.3-0.8-20.5
c0.6-4.3,2.3-10,4.1-13.3c1.3-2.7,4.8-7.3,6.7-9c4.4-4,11.3-7.2,17-8.1c2.8-0.4,12.1-0.1,15.7,0.6c3.7,0.7,9,3,12.4,5.6
C119.6,136.2,125.3,153.3,121.9,169.6z M169.1,181.5c-3.5,8.1-7.4,17.5-8.8,20.7l-2.5,5.9l-4.1-0.1l-4.1-0.1l-1.7-4.1
c-12.2-28.7-15.4-36.9-15-37.4c0.2-0.2,1.8-1,3.4-1.7c2.6-1.1,3-1.1,3.3-0.7c0.2,0.3,1.6,3.5,3.1,7.2c1.6,3.6,4.2,10,5.9,14.2
c1.7,4.2,3.6,8.6,4.2,9.9l1.1,2.3l1-2.1c0.5-1.2,3.3-7.8,6.3-14.8c2.9-7,5.8-13.7,6.4-15l1.1-2.2l3,1.4c1.7,0.8,3.1,1.4,3.3,1.5
C175.2,166.6,172.6,173.3,169.1,181.5z M245.1,189c-4.7,4.8-9,7.5-15.2,9.4c-3,1-3.5,1-9.4,1c-5.7,0-6.4-0.1-9.3-1
c-13.7-4.2-22.4-14.1-25.7-29.3c-1.1-5.1-1.1-13.7,0-19c2.9-13.8,11.5-24.2,23-27.9c6-1.9,14-2.2,19.9-0.8c6.5,1.6,12.5,5,17,9.6
c4.8,4.9,7.6,9.9,9.5,16.9C259,163.1,255.3,178.5,245.1,189z"
/>
<path
class="border"
d="M296,94.1c-7.8-18.3-18.9-34.8-33-49c-14.1-14.1-30.6-25.3-49-33c-19-8-39.2-12.1-60-12.1s-41,4.1-60,12.1
c-18.3,7.8-34.8,18.9-49,33s-25.3,30.6-33,49c-8,19-12.1,39.2-12.1,60s4.1,41,12.1,60c7.8,18.3,18.9,34.8,33,49
c14.1,14.1,30.6,25.3,49,33c19,8,39.2,12.1,60,12.1s41-4.1,60-12.1c18.3-7.8,34.8-18.9,49-33c14.1-14.1,25.3-30.6,33-49
c8-19,12.1-39.2,12.1-60S304.1,113.1,296,94.1z M286.6,210.1c-7.2,17.1-17.6,32.5-30.8,45.7c-13.2,13.2-28.6,23.6-45.7,30.8
c-17.7,7.5-36.5,11.3-56,11.3s-38.2-3.8-56-11.3c-17.1-7.2-32.5-17.6-45.7-30.8c-13.2-13.2-23.6-28.6-30.8-45.7
c-7.5-17.7-11.3-36.5-11.3-56s3.8-38.2,11.3-56c7.2-17.1,17.6-32.5,30.8-45.7C65.6,39.2,81,28.8,98.1,21.6
c17.7-7.5,36.5-11.3,56-11.3s38.2,3.8,56,11.3c17.1,7.2,32.5,17.6,45.7,30.8C269,65.6,279.3,81,286.6,98.1
c7.5,17.7,11.3,36.5,11.3,56S294.1,192.3,286.6,210.1z"
/>
<path
class="face"
d="M171.7,165l-3-1.4l-1.1,2.2c-0.6,1.2-3.5,8-6.4,15c-2.9,7-5.7,13.6-6.3,14.8l-1,2.1l-1.1-2.3
c-0.6-1.3-2.4-5.7-4.2-9.9s-4.4-10.6-5.9-14.2c-1.6-3.6-3-6.9-3.1-7.2c-0.2-0.5-0.7-0.4-3.3,0.7c-1.6,0.6-3.2,1.4-3.4,1.7
c-0.5,0.5,2.8,8.7,15,37.4l1.7,4.1l4.1,0.1l4.1,0.1l2.5-5.9c1.4-3.3,5.3-12.6,8.8-20.7c3.5-8.2,6.2-14.9,6-15
C174.9,166.4,173.4,165.8,171.7,165z"
/>
<path
class="face"
d="M108,127.3c-3.4-2.5-8.7-4.9-12.4-5.6c-3.7-0.6-12.9-1-15.7-0.6c-5.7,0.8-12.6,4.1-17,8.1
c-1.9,1.7-5.4,6.4-6.7,9c-1.7,3.4-3.4,9-4.1,13.3c-0.9,6.2-0.5,15,0.8,20.5c1.9,7.6,4.7,12.8,9.4,17.5c3.6,3.6,6.1,5.4,10.4,7.2
c4.3,1.9,7.8,2.5,13.5,2.5c18.5,0,31.9-11.2,35.7-29.8C125.3,153.3,119.6,136.2,108,127.3z M110.8,168.6c-0.6,3.4-2.6,8.2-4.3,10.8
c-4.6,6.9-12.5,10.7-21.2,10.2c-6-0.4-11.4-3.3-15.7-8.4c-2.5-3-3.9-5.4-5.1-9.1c-1.9-5.7-2.5-12.4-1.5-18.6
c0.7-4.2,1.4-6.5,3.1-9.9c3.6-7.1,9.5-11.7,16.8-12.9c13.4-2.2,24.8,7.3,27.9,23.2C111.5,157.5,111.5,165.1,110.8,168.6z"
/>
<path
class="face"
d="M72.1,118.3c0.2,0,3.4-2.2,7.3-4.8c3.8-2.7,7.2-4.9,7.5-4.9c0.3-0.1,3.6,2.1,7.4,4.8s7.1,4.9,7.2,4.9
c0.2,0,1.4-2.1,2.8-4.6l2.4-4.6l-3.3-1.9c-6-3.4-11.8-6.3-13.7-6.8c-2.3-0.7-2.8-0.7-5.3,0c-1.7,0.5-15.9,7.5-16.8,8.3
C67.3,109.2,71.6,118.3,72.1,118.3z"
/>
<path
class="face"
d="M204.2,115.6c1.3,2.3,1.7,2.7,2.2,2.4c0.3-0.2,2.9-2,5.8-4c2.9-2,6-4.1,7-4.6l1.7-1l2.7,1.9
c1.5,1,4.7,3.3,7.2,5.1l4.5,3.3l2.5-4.8c1.4-2.6,2.5-4.8,2.4-4.8c-0.7-0.6-13.6-7.2-15.1-7.8c-2.7-1.1-5.1-1.3-7.4-0.7
c-2.2,0.6-6.6,2.8-12.7,6.3l-4.3,2.4l0.9,1.8C202.2,112,203.3,114.1,204.2,115.6z"
/>
<path
class="face"
d="M245.5,131.1c-4.5-4.7-10.5-8.1-17-9.6c-5.9-1.4-13.9-1.2-19.9,0.8c-11.5,3.7-20.1,14.1-23,27.9
c-1.1,5.3-1.1,13.9,0,19c3.3,15.2,12,25.1,25.7,29.3c2.9,0.9,3.6,1,9.3,1c5.9,0,6.4,0,9.4-1c6.3-2,10.6-4.7,15.2-9.4
c10.1-10.5,13.9-25.9,9.8-41C253.1,141,250.3,136.1,245.5,131.1z M241.4,176.9c-1.4,2.9-2.2,4.1-4.2,6c-7.1,7.1-18.7,8.8-27.2,4.1
c-4.6-2.6-8.7-7.6-11.4-14c-3.1-7.5-3.3-18.7-0.4-26.1c3.2-8.1,9.1-13.8,16.5-15.9c2.7-0.8,7.4-0.8,10.4-0.1
c9.3,2.2,15.9,9.5,18.8,20.9c0.7,2.7,0.8,4.1,0.8,9.5C244.7,168.7,244.2,171,241.4,176.9z"
/>
</g>
</svg>
</div>
<p class="text" style="margin: 2rem 0 1rem 0">Enter your .ovo number</p>
<input
id="input"
type="number"
style="
background-color: #eee;
border: 1px solid #000;
border-radius: 0.25rem;
margin-bottom: 1rem;
width: 25%;
max-width: 20rem;
height: 2rem;
"
oninput="updateOvo(this.value)"
/>
<p
id="error"
class="text"
style="
font-size: 1rem;
font-weight: 600;
color: red;
margin: 0 0 1rem 0;
"
></p>
<button
id="download"
onclick="convertSvgToImage()"
style="
font-family: 'Courier New', Courier, monospace;
font-size: 1.25rem;
width: 15%;
height: 2rem;
border-radius: 0.25rem;
color: #fff;
background-color: #000;
cursor: pointer;
"
>
Download
</button>
</div>
</div>
</body>
</html>
```
#16,465,819text0.ovo#16,465,800textovo.bitter#16,465,464text
#16,465,449html