# 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>
```