<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" id="titleSvg" version="1.1">
<path d="M201.474 160.183h-43.295l-38.627 125.003V160.183H76v399.999h43.552V435.179l38.627 125.003h43.295l-43.295-199.85zM257.987 560.182h-43.552V160.183h43.552zM314.5 510.07V160.183h-43.552v399.999h76.697V510.07zM404.16 510.07V160.183h-43.551v399.999h76.696V510.07zM493.818 560.182h-43.553V160.183h43.553zM579.11 160.183v144.043l-28.778-144.043h-43.553v399.999h43.553V427.234l28.778 132.948h43.55V160.183zM718.794 302.969c0 4.143-1.382 7.657-4.146 10.54-2.766 2.882-6.223 4.324-10.371 4.324-3.975 0-7.345-1.442-10.109-4.324-2.767-2.883-4.149-6.397-4.149-10.54v-87.11c0-4.145 1.382-7.658 4.15-10.541 2.763-3.063 6.133-4.594 10.108-4.594 4.148 0 7.605 1.531 10.371 4.594 2.764 2.883 4.146 6.396 4.146 10.54zM690.02 462.885c0-4.144 1.382-7.748 4.15-10.81 2.763-2.884 6.133-4.326 10.108-4.326 4.148 0 7.605 1.442 10.371 4.325 2.764 3.063 4.146 6.667 4.146 10.811v41.621c0 4.145-1.382 7.658-4.146 10.541-2.766 2.883-6.223 4.324-10.371 4.324-3.975 0-7.345-1.441-10.109-4.324-2.767-2.883-4.149-6.396-4.149-10.54zm72.639-326.58c-19.042-.107-37.492 14.822-43.604 25.474 0 0-5.445-1.596-14.777-1.596-16.072 0-29.81 5.946-41.218 17.838-11.58 11.892-17.37 26.306-17.37 43.243v76.299c0 11.351 2.852 21.892 8.554 31.621-5.874 5.586-10.022 12.163-12.443 19.73a40.173 40.173 0 00-1.814 7.568c-.171.72-.26 1.531-.26 2.432v1.351c0 7.748 1.47 14.865 4.409 21.352a48.637 48.637 0 008.812 12.703l2.335 1.892c-1.88 3.02-9.074 6.01-9.972 17.333-1.874 28.485.378 56.97.378 85.556 0 16.757 5.791 31.171 17.37 43.243 11.408 11.892 25.147 17.838 41.218 17.838 16.246 0 30.074-5.946 41.479-17.838 11.582-12.072 17.37-26.486 17.37-43.243v-30.81c0-16.757-5.703-69.647-17.11-81.54-11.233-12.071-24.886-18.197-40.96-18.377-12.961-.18-19.528-.271-19.702-.271-5.356 0-8.037-2.072-8.037-6.216 0-3.964 2.506-6.126 7.52-6.486h1.035c1.728.18 3.284.63 4.666 1.35 4.667 1.262 9.248 1.893 13.74 1.893 16.245 0 30.073-5.946 41.478-17.838 11.582-12.072 17.37-26.486 17.37-43.243v-76.3c1.008-16.266-6.989-30.073-14.776-37.453-.757-3.464-.953-7.862.894-10.72 1.946-3.013 7.408-6.87 13.713-6.508zM885.491 210.295v-50.112h-76.695v399.999h76.695V510.07h-33.143V385.387h33.143v-50.111h-33.143V210.295zM991.388 160.183l-21.775 200.149-21.518-200.149h-43.553C918.353 298.79 948.8 461.17 970.362 600c19.033-138.83 49.479-301.211 64.573-439.817zM1124.601 210.295v-50.112h-76.703v399.999h76.703V510.07h-33.143V385.387h33.143v-50.111h-33.143V210.295z" class="title" aria-label="Killing Eve" />
<g id="drip3" class="drip">
<rect x="967.258" y="0" width="5" height="350" />
<path d="M968.312 345.095c-.858 6.871-5.056 10.852-5.212 15.858.355 4.356 3.567 7.463 6.672 7.401 3.204-.063 6.452-2.977 6.664-7.48-.093-5.178-4.555-9.508-5.08-15.741 0 0-.013-2.304-1.52-2.3-1.526.016-1.524 2.262-1.524 2.262z" />
</g>
<g id="drip1" class="drip">
<rect x="117.482" y="-63.355297" width="5" height="350" />
<path d="M118.536 281.74c-.858 6.87-5.056 10.852-5.212 15.857.355 4.357 3.567 7.463 6.672 7.402 3.204-.063 6.452-2.977 6.664-7.48-.093-5.178-4.555-9.508-5.08-15.742 0 0-.013-2.303-1.52-2.3-1.526.016-1.524 2.263-1.524 2.263z" opacity="1" />
</g>
<g id="drip2" class="drip">
<rect x="576.13751" y="-45.964664" width="5" height="350" />
<path d="M577.191 299.13c-.857 6.872-5.055 10.852-5.211 15.858.355 4.357 3.567 7.463 6.671 7.402 3.204-.063 6.453-2.977 6.665-7.48-.093-5.178-4.556-9.509-5.08-15.742 0 0-.014-2.303-1.521-2.3-1.525.016-1.524 2.263-1.524 2.263z" />
</g>
<g id="drip4" class="drip">
<rect x="967.72217" y="496.97711" width="5" height="101.69997" />
<path d="M968.72 592.036c-.858 6.871-5.056 10.852-5.212 15.858.355 4.356 3.567 7.463 6.672 7.401 3.204-.063 6.452-2.977 6.664-7.48-.093-5.178-4.555-9.508-5.08-15.741 0 0-.013-2.304-1.52-2.3-1.526.016-1.524 2.262-1.524 2.262z" />
</g>
</svg>
<input id="volume" type="checkbox" />
<label for="volume" title="Toggle sound">
<svg class="mute-off" viewBox="0 0 24 24">
<path d="M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z"></path>
</svg>
<svg class="mute-on" viewBox="0 0 24 24">
<path d="M12,4L9.91,6.09L12,8.18M4.27,3L3,4.27L7.73,9H3V15H7L12,20V13.27L16.25,17.53C15.58,18.04 14.83,18.46 14,18.7V20.77C15.38,20.45 16.63,19.82 17.68,18.96L19.73,21L21,19.73L12,10.73M19,12C19,12.94 18.8,13.82 18.46,14.64L19.97,16.15C20.62,14.91 21,13.5 21,12C21,7.72 18,4.14 14,3.23V5.29C16.89,6.15 19,8.83 19,12M16.5,12C16.5,10.23 15.5,8.71 14,7.97V10.18L16.45,12.63C16.5,12.43 16.5,12.21 16.5,12Z"></path>
</svg>
</label>
:root {
--animation-timing: 4s;
--text-color: rgb(255 255 255);
--background-color: red;
--transition-timing: 0.4s;
}
* {
box-sizing: border-box;
}
html {
background-color: var(--background-color);
transition: background-color var(--transition-timing);
}
body {
height: 100dvh;
perspective: 1100px;
}
#titleSvg {
display: block;
width: 100%;
height: 100%;
max-width: 1600px;
margin: 0 auto;
transform-origin: center;
}
#bg {
fill: var(--background-color);
transition: fill var(--transition-timing);
}
.title {
fill: var(--text-color);
transition: fill var(--transition-timing);
}
.drip {
fill: var(--background-color);
opacity: 0;
}
#drip4 {
fill: var(--text-color);
}
label {
position: fixed;
top: calc(0.25rem + 1vw);
right: calc(0.25rem + 1vw);
width: calc(1.25rem + 2vw);
height: calc(1.25rem + 2vw);
background-color: white;
border-radius: 50%;
cursor: pointer;
}
label > svg {
position: absolute;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
}
label path {
fill: black;
}
label .mute-off {
display: none;
}
input[type="checkbox"] {
display: none;
width: 0;
height: 0;
}
:checked ~ label .mute-off {
display: block;
}
:checked ~ label .mute-on {
display: none;
}
let audioTracks = [
new Audio(
"https://github.com/robole/title-sequences/raw/main/killing-eve/audio/killer-shangrilah-sample.mp3"
),
new Audio(
"https://github.com/robole/title-sequences/raw/main/killing-eve/audio/voodoo-voodoo-sample.mp3"
),
new Audio(
"https://github.com/robole/title-sequences/raw/main/killing-eve/audio/xpectations-sample.mp3"
),
];
let track;
let dripDuration = 5;
const muteToggle = document.querySelector("input");
muteToggle.addEventListener("click", toggleMute);
runDripAnimation();
setInterval(runDripAnimation, 5500);
async function play() {
track.volume = 0.3;
track.currentTime = 0;
track.muted = !muteToggle.checked;
try {
track.play();
} catch (error) {
console.error(error);
}
}
function toggleMute() {
// initiate playing the track if it was blocked
if (track.currentTime === 0) {
try {
track.play();
} catch (error) {
console.error(error);
}
}
track.muted = !muteToggle.checked;
}
function getRandomNumber() {
return Math.floor(Math.random() * 4) + 1;
}
function setRandomAudio() {
let randomSelection = Math.floor(Math.random() * audioTracks.length);
track = audioTracks[randomSelection];
track.volume = 0.5;
track.muted = !muteToggle.checked;
}
function setRandomColorSet() {
let colorSets = [
{ bg: "#2fc2ba", text: "#ceccb5" },
{ bg: "#202f3c", text: "#f4f5d7" },
{ bg: "#0c4734", text: "#fbfbdb" },
{ bg: "#050506", text: "#6a7a88" },
{ bg: "#92a1b0", text: "#1a3346" },
{ bg: "#040404", text: "#3d513d" },
{ bg: "#ababa3", text: "#667465" },
{ bg: "#6e6d62", text: "#bb9b4e" },
{ bg: "#43738b", text: "#f09daf" },
{ bg: "#040404", text: "#af8946" },
];
let randomSelection = Math.floor(Math.random() * colorSets.length);
let colorSet = colorSets[randomSelection];
let root = document.documentElement;
root.style.setProperty("--background-color", colorSet.bg);
root.style.setProperty("--text-color", colorSet.text);
}
function runDripAnimation() {
const random = getRandomNumber();
setRandomColorSet();
setRandomAudio();
gsap.set("#titleSvg", { z: -100 });
let tl = new TimelineMax({
delay: 0.3,
onStart: async () => {
await play();
},
onComplete: () => {
track.pause();
},
});
tl.to(`#drip${random}`, {
duration: 0.01,
opacity: 1,
});
tl.to(
"#titleSvg",
{
duration: dripDuration,
ease: "none",
z: 0,
},
"drip"
);
tl.to(
`#drip${random} rect`,
{
duration: dripDuration,
ease: "none",
y: 75,
},
"drip"
);
tl.to(
`#drip${random} path`,
{
duration: dripDuration,
ease: "none",
scaleY: 1.3,
y: 52,
delay: 0.1,
},
"drip"
);
tl.to(
`#drip${random}`,
{
duration: 0.05,
opacity: 0,
},
"reset"
);
tl.to(
`#drip${random} rect`,
{
duration: 0.05,
y: 0,
},
"reset"
);
tl.to(
`#drip${random} path`,
{
duration: 0.05,
scaleY: 1,
y: 0,
},
"reset"
);
tl.to(
"#titleSvg",
{
duration: 0.05,
z: -100,
},
"reset"
);
}
This Pen doesn't use any external CSS resources.