<head>
<!-- Code snippet to create a "breathe" animation effect with a variable font -->
<style>
/* The @font-face rule is used to define a custom font that you want to use on your webpage. Here 'TheFont' is a name we give to reference the font later in CSS. The 'src' property specifies the path to the font file, and 'format' specifies the font format. */
@font-face {
font-family: 'TheFont';
/* Variable fonts like the one linked below allow for fine-tuned control over various font properties dynamically via CSS, such as weight ('wght'), width ('wdth'), etc. This link is where your web browser will download the font from. */
/* Insert the link to your custom variable font */
src: url("https://garet.typeforward.com/assets/fonts/shared/TFMixVF.woff2")
format('woff2'); }
body.breathe-animation {
display: flex;
align-items: center;
justify-content: center;
/* Change the Background color of the entire screen */
background-color: black;
/* 'vw' is a viewport-width unit, 'vh' is a viewport-height unit. 1vw equals 1% of the width of the viewport, and 1vh equals 1% of the height of the viewport. This allows the font size to scale dynamically with the window size. */
height: 100vh;
}
.breathe-animation span {
font-family: 'TheFont';
/* The 'clamp()' function sets a flexible font size that will never go below a minimum value and never above a maximum value. The middle value is preferred, but it will shrink or grow based on the viewport dimensions. */
/* Adjusts font size based on content width and viewport height */
font-size: clamp(10vw, 20vw, 50vh);
/* Change this to set the text color */
color: white;
/* Center text horizontally */
text-align: center;
/* The 'animation' property applies the 'letter-breathe' keyframes to the element, making it animate over 3 seconds.'ease-in-out' makes the movement start and end slowly, and 'infinite' makes it repeat forever. */
/* Controls the animation (3s is the duration) */
animation: letter-breathe 3s ease-in-out infinite;
}
/* Keyframes define the sequence of styles that an element will go through during an animation. */
@keyframes letter-breathe {
/* The 'from' and 'to' keyframes establish the initial and final states of the animation, respectively, using 'font-variation-settings'. This CSS property is used with variable fonts to adjust their weight ('wght'), width ('wdth'), etc., during the animation. */
from,
to {
/* Starting weight; adjust the numbers according to your specific font */
font-variation-settings: 'wght' 100;
}
/* At the midpoint (50%) of the animation, the font weight changes to 900. */
50% {
/* Ending weight; adjust the numbers according to your specific font */
font-variation-settings: 'wght' 900;
}
}
</style>
</head>
<body class="breathe-animation">
<!-- Change this letter to test a different one -->
<span>mix</span>
</body>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.