Skip to content

Instantly share code, notes, and snippets.

@jordanhudgens

jordanhudgens/workshop.html

Created December 7, 2021 22:02
Show Gist options
  • Save jordanhudgens/ed79864c982ee511b00ef3ea7aaf3fff to your computer and use it in GitHub Desktop.
Save jordanhudgens/ed79864c982ee511b00ef3ea7aaf3fff to your computer and use it in GitHub Desktop.
Download ZIP
Raw
workshop.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML CSS Animated Text</title>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Lora&family=Noto+Sans+JP:wght@500&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap"
rel="stylesheet"
/>
<link href="./main.css" rel="stylesheet" />
</head>
<body>
<div class="nav">
<img src="./assets/logo.png" alt="Logo" class="logo" />
</div>
<div class="container">
<svg class="headline" viewbox="0 0 200 86">
<text
text-anchor="start"
x="10"
y="30"
class="text text-stroke"
clip-path="url(#text1)"
>
Let's
</text>
<text
text-anchor="start"
x="10"
y="50"
class="text text-stroke"
clip-path="url(#text2)"
>
Start
</text>
<text
text-anchor="start"
x="10"
y="70"
class="text text-stroke"
clip-path="url(#text3)"
>
Coding
</text>
<text
text-anchor="start"
x="10"
y="30"
class="text text-stroke text-stroke-2"
clip-path="url(#text1)"
>
Let's
</text>
<text
text-anchor="start"
x="10"
y="50"
class="text text-stroke text-stroke-2"
clip-path="url(#text2)"
>
Start
</text>
<text
text-anchor="start"
x="10"
y="70"
class="text text-stroke text-stroke-2"
clip-path="url(#text3)"
>
Coding
</text>
<defs>
<clipPath id="text1">
<text text-anchor="start" x="10" y="30" class="text">Let's</text>
</clipPath>
<clipPath id="text2">
<text text-anchor="start" x="10" y="50" class="text">Start</text>
</clipPath>
<clipPath id="text3">
<text text-anchor="start" x="10" y="70" class="text">Coding</text>
</clipPath>
</defs>
</svg>
</div>
</body>
<script>
document.addEventListener("DOMContentLoaded", function (event) {
document.querySelector(".headline").classList.add("text-animation");
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment