Креативный текст по контуру F1 с анимацией на CSS и JavaScript

Иногда текст — это больше, чем просто набор букв. Это элемент дизайна, способный привлечь внимание, подчеркнуть стиль и оставить яркое впечатление. Именно таким является текст по контуру F1, который сочетает в себе динамику, эстетику и креативность.

Данный эффект выполнен с использованием CSS и jаvascript, что делает его лёгким и производительным. Текст плавно "скользит" по траектории в форме гоночной трассы F1, создавая визуальный ритм и ассоциацию со скоростью и энергией.

Особенности:

Креативный дизайн: Текст повторяет форму легендарной трассы F1, добавляя оригинальность вашему проекту.
Плавная анимация: CSS и jаvascript обеспечивают мягкие переходы, создавая эффект "живого" текста.
Универсальность: Элемент можно использовать для заголовков, баннеров или декоративных элементов на сайте.
Легкость внедрения: Простая структура кода позволяет адаптировать этот эффект под любые проекты.

Идеально подходит для:

Веб-сайтов, связанных с автоспортом или тематикой скорости.
Креативных проектов, где важна визуальная уникальность.
Декоративного оформления текстов на баннерах или в рекламных блоках.

See the Pen F1 outline text by LoFi (@loficodes) on CodePen.

        HTML

  
  Показать код HTML
  
    
  <svg viewBox="0 0 400 100">
   <defs>
<!-- Based on: https://stackoverflow.com/questions/13069446/simple-fill-pattern-in-svg-diagonal-hatching -->
 <pattern id="diagonalHatch" patternUnits="userSpaceOnUse">
</pattern>
 
  </defs>
 
 <mask id="myMask">
 <rect width=100% height=100% fill="url(#diagonalHatch)" />
 </mask>
 
 <filter id="outline">    
 <!-- FROM https://tympanus.net/codrops/2019/01/22/svg-filter-effects-outline-text-with-femorphology/ -->
 <feMorphology operator="dilate" in="SourceAlpha" result="THICKNESS" />
 <feComposite operator="out" in="THICKNESS" in2="SourceGraphic" result="MAIN_EFFECT">
 </feComposite>

 <feFlood flood-color="#F00" flood-opacity="1" result="PINK"></feFlood>
    <feComposite in="PINK" in2="MAIN_EFFECT" operator="in" result="OUTLINE"></feComposite>

 </filter>

 <g filter="url(#outline)" >
 <g mask="url(#myMask)" >
 <text x=50% y=50% dominant-baseline="middle" text-anchor="middle" style="font-size: 60px;"></text>
 </g>
 </g>
</svg>
 
<div class="controls">
 <label>
 Edit Text
 <input placeholder="Type here to change text" id=text />
 </label>
 <label>
 Edit Size
 <input type="number" id=size />
 </label>
 <label>
 Edit Outline Thickness
 <input type="number" id=thickness step=".1"/>
 </label>
</div>

        CSS
 
  
  Показать код CSS
  
         
* {
 font-family: system-ui;
}
text {
 font-size: 30px;
 font-weight: 900;
 text-anchor: middle;
 dominant-baseline: middle;
}
 
.controls {
 margin: 0 auto;
 width: min-content;
}
 
label {
 display: block;
 margin-block-end: 1em;
 font-size: 1.4em;
}
 
input {
 font-size: 1em;
 padding: .5em;
 border: .2em solid;
 border-radius: .5em;
 text-align: center;
 margin-block-start: .2em;
}
 
#info {
 position: absolute;
 right: 0;
 bottom: 0;
 width: 200px;
 text-align: left;
}

        JS
       

  
  Показать код JS
  
    
       console.clear();
 
const pattern = document.getElementById('diagonalHatch');
const morph = document.getElementById('outline').querySelector("feMorphology");
const inputText = document.getElementById("text");
const inputSize = document.getElementById("size");
const inputThickness = document.getElementById("thickness");
const text = document.querySelector("text");
 
const getTime = () => (new Date()).getTime();
const start = getTime();
const duration= 2000;
 
let size = 6;
let thickness = .1
 
const setSizes = () => {
 pattern.setAttribute("width", size);
 pattern.setAttribute("height", size);
 morph.setAttribute("radius", size * thickness)
 pattern.innerHTML = `
 <path d="M-${size * .25},${size * .25} l${size * .5},-${size * .5}
 M0,${size} l${size},-${size}
 M${size * .75},${size * 1.25} l${size * .5},-${size * .5}" 
 style="stroke:white; stroke-width:${size * .25}" />
 `
}
setSizes();
 
const updateText = (newText) => text.innerHTML = newText.toUpperCase();
inputText.addEventListener("keyup", (e) =>{
 text.innerHTML = updateText(e.target.value)
})
inputText.value = "formula 1";
updateText(inputText.value)
 
 
const updateSize = (newSize) => {
 size = newSize;
 setSizes();
}
inputSize.value = size;
inputSize.addEventListener("change", (e) =>{
 updateSize(e.target.value);
})
 
 
const updateThickness = (newThickness) => {
 thickness = newThickness;
 setSizes();
}
inputThickness.value = thickness;
inputThickness.addEventListener("change", (e) =>{
 updateThickness(e.target.value);
})
 
function animate () {
 requestAnimationFrame(animate);

 const now = getTime();
 const diff = now - start;
 const t = (diff % duration) / duration;

 pattern.setAttribute("y", size * -t);
}
animate();