<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1200">
<defs>
<symbol id="boxSymbol">
<path
fill="none"
stroke="#cb00e8"
stroke-width="23.94"
d="M599.95 16.928l583.022 583.02-583.022 583.025L16.928 599.95z"
/>
</symbol>
<clipPath id="boxClip">
<!-- duplicte of path in #boxSymbol -->
<path
fill="none"
stroke="#cb00e8"
stroke-width="23.94"
d="M599.95 16.928l583.022 583.02-583.022 583.025L16.928 599.95z"
/>
</clipPath>
</defs>
<text
x="199.219"
y="560.736"
fill="#ecd65a"
stroke="#d54c22"
stroke-width="3"
font-family="VCR OSD Mono"
font-size="72"
clip-path="url(#boxClip)"
>
MADE FOR THE WEB BY
</text>
<text
x="277.734"
y="691.998"
fill="#ecd65a"
stroke="#d54c22"
stroke-width="3"
font-family="VCR OSD Mono"
font-size="100"
clip-path="url(#boxClip)"
>
ROB O'LEARY
</text>
<use id="boxUse" href="#boxSymbol" />
</svg>
@font-face {
font-family: "VCR OSD Mono";
src: url("fonts/VCR_OSD_MONO.woff2");
font-display: swap;
}
body {
width: 100%;
min-height: 100vh;
display: grid;
place-items: center;
background-color: rgb(255, 153, 247);
font-family: "VCR OSD Mono", serif;
}
svg {
max-width: 1000px;
}
#boxUse,
#boxClip {
transform: scale(0);
animation: grow 1s ease-in forwards;
transform-origin: center;
}
@keyframes grow {
to {
transform: scale(3);
}
}
A diamond-shaped wipe reveal of text.
MADE FOR THE WEB BY ROB O’LEARY 🙂