😍Bộ công cụ chuyển đổi Text to SVG && Animation 😉

Chú ý: Chọn Separate Characters thấy text chia thành khá nhiều path trong svg

drawing outline on svg file having multiple paths · Issue #4 · danmarshall/svg-path-outlineGitHub

google-font-to-svg-pathdanmarshall.github.io

Bước 1:

https://danmarshall.github.io/google-font-to-svg-path/?font-select=Lily+Script+One&font-variant=regular&input-union=false&input-filled=false&input-kerning=true&input-separate=false&input-text=Merge&input-bezier-accuracy=&dxf-units=cm&input-size=100

Bước 2:

https://codepen.io/greytun/pen/qBbxRwe

<svg id="logosvg" viewBox="0 0 312.96 295.25">
    <path id="logo" class="cls-1" d="M300.3,105.7H189.4V309.25s-.3,12.92-12.92,12.92-13-13-13-13V168.77h-67L96,315s.19,80,80,80,77.53-69.65,77.53-69.65V169.51h39.28S334,168.24,334,219.66s-66.51,42-66.51,42v63.56C411,325.27,402.92,220,402.92,220,402.92,104.65,300.3,105.7,300.3,105.7Z" transform="translate(-93.04 -102.7)" />
</svg>

// ✅ DEFINITION UNSERER ELEMENTE
const SVGLOGO = document.getElementById('logo');

// ✅ DEFINITION VON VARIABLEN
const LOGOLENGTH = SVGLOGO.getTotalLength();

// ✅ GRUNDLEGENDES SETTING
SVGLOGO.style.strokeDasharray = LOGOLENGTH;
SVGLOGO.style.strokeDashoffset = LOGOLENGTH;

// ✒️ ZEICHNEN UNSERES SVG GRAFEN
const drawWhenScroll = () => {
    const DRAWLOGO = LOGOLENGTH * calcScrollPercent();
    SVGLOGO.style.strokeDashoffset = LOGOLENGTH - DRAWLOGO;
    if (calcScrollPercent() === 1) {
        SVGLOGO.style.fill = '#ff6e48';
    } else {
        SVGLOGO.style.fill = 'transparent';
    }
}

// 🙉 FUNKTION UM EINEN % WERT DES SCROLLS ZU BERECHNEN
const calcScrollPercent = () => {
    let height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    return document.documentElement.scrollTop / height;
}
    
// 🙊 FUNKTION FÜR DAS TRIGGERS DES SCROLL EVENTS
window.addEventListener('scroll', drawWhenScroll);

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

* {
  box-sizing: border-box;
}

body {
  background-color: #1b2431;
  font-size: 10px;
  min-height: 200%;
}
body #logosvg {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 15rem;
  height: 15rem;
  transform: translate(-50%, -50%);
}
body #logosvg .cls-1 {
  stroke: #FF6E48;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 0.4rem;
  fill: transparent;
  transition: fill 250ms;
}

Hoặc có thể sử dụng các mẫu này làm animation cho text

E1. https://codepen.io/JoshuaSoileau/pen/eWLZod

<h1>Scroll Down To Find Out Who Sucks</h1>
<svg width="520px" height="74px" viewBox="0 0 520 74" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g stroke="#fff" stroke-width="2" fill="none">
        <path class="path" d="M 41.6 71.201 L 0 71.201 L 0 1.201 L 9.5 1.201 L 9.5 62.701 L 41.6 62.701 L 41.6 71.201 Z" id="0" vector-effect="non-scaling-stroke"/>
  <path class="path" d="M 60.6 71.201 L 51.1 71.201 L 51.1 1.201 L 60.6 1.201 L 60.6 71.201 Z" id="1" vector-effect="non-scaling-stroke"/>
  <path class="path" d="M 100.008 71.643 A 36.51 36.51 0 0 0 107.6 72.401 A 38.35 38.35 0 0 0 112.762 72.064 A 30.074 30.074 0 0 0 121.5 69.551 Q 127.6 66.701 131.9 61.751 Q 136.2 56.801 138.45 50.201 Q 140.7 43.601 140.7 36.101 A 48.215 48.215 0 0 0 140.621 33.323 A 41.439 41.439 0 0 0 138.45 22.101 Q 136.2 15.601 131.9 10.601 Q 127.6 5.601 121.45 2.801 A 29.925 29.925 0 0 0 115.558 0.838 A 36.42 36.42 0 0 0 107.6 0.001 A 39.35 39.35 0 0 0 101.372 0.476 A 29.661 29.661 0 0 0 89.9 4.751 Q 82.5 9.501 78.55 17.651 A 37.989 37.989 0 0 0 75.715 25.764 A 46.182 46.182 0 0 0 74.6 36.101 A 48.913 48.913 0 0 0 74.635 37.961 A 42.769 42.769 0 0 0 76.85 50.201 A 39.376 39.376 0 0 0 77.289 51.423 A 34.353 34.353 0 0 0 83.35 61.751 Q 87.6 66.701 93.7 69.551 A 29.142 29.142 0 0 0 100.008 71.643 Z M 107.6 64.201 A 26.517 26.517 0 0 0 113.548 63.566 A 19.316 19.316 0 0 0 120.5 60.501 A 22.47 22.47 0 0 0 127.825 51.63 A 27.252 27.252 0 0 0 128.35 50.451 A 34.108 34.108 0 0 0 130.672 41.522 A 43.503 43.503 0 0 0 131 36.101 Q 131 30.701 129.4 25.701 A 29.735 29.735 0 0 0 125.26 17.374 A 28.121 28.121 0 0 0 124.8 16.751 Q 121.8 12.801 117.45 10.501 A 19.921 19.921 0 0 0 110.033 8.319 A 24.578 24.578 0 0 0 107.6 8.201 A 24.086 24.086 0 0 0 101.108 9.041 A 19.545 19.545 0 0 0 95.05 11.901 A 23.148 23.148 0 0 0 87.449 21.027 A 27.785 27.785 0 0 0 87.05 21.901 A 32.793 32.793 0 0 0 84.596 31.088 A 41.257 41.257 0 0 0 84.3 36.101 Q 84.3 41.501 85.85 46.551 A 29.379 29.379 0 0 0 90.031 55.096 A 27.923 27.923 0 0 0 90.4 55.601 Q 93.4 59.601 97.75 61.901 A 19.921 19.921 0 0 0 105.167 64.082 A 24.578 24.578 0 0 0 107.6 64.201 Z" id="2" vector-effect="non-scaling-stroke"/>
  <path class="path" d="M 163.7 71.201 L 154.7 71.201 L 154.7 1.201 L 167.3 1.201 L 198.2 59.401 L 198.2 1.201 L 207.2 1.201 L 207.2 71.201 L 194.8 71.201 L 163.7 13.401 L 163.7 71.201 Z" id="3" vector-effect="non-scaling-stroke"/>
  <path class="path" d="M 267.2 71.201 L 225.2 71.201 L 225.2 1.201 L 267.2 1.201 L 267.2 9.401 L 234.7 9.401 L 234.7 30.701 L 262.7 30.701 L 262.7 38.701 L 234.7 38.701 L 234.7 63.001 L 267.2 63.001 L 267.2 71.201 Z" id="4" vector-effect="non-scaling-stroke"/>
  <path class="path" d="M 322.3 71.201 L 280.7 71.201 L 280.7 1.201 L 290.2 1.201 L 290.2 62.701 L 322.3 62.701 L 322.3 71.201 Z" id="5" vector-effect="non-scaling-stroke"/>
    </g>
</svg>

@keyframes scrollBG { 
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

body {
  font-family: avenir, helvetica, sans-serif;
  background: linear-gradient(270deg, #6d76fb, #e8d9b2, #5fd9ae, #3e9dff);
  background-size: 800% 800%;
  animation: scrollBG 30s ease infinite;
  color: white;
  height: 3000px;
}

h1 {
  text-align: center;
  padding-bottom: 50px;
  font-size: 2.4em;
  font-weight: 200;
  letter-spacing: .07em;
}

svg {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.path {
  stroke-dashoffset: 1200;
  stroke-dasharray: 1000;
}

$(document).ready(function() {
  var fullLength = parseInt($(".path").css("stroke-dashoffset"), 10);
  
  $(window).scroll(function() {
    // get percent scolled
    // (how far window is from top / total height * 100)
    // calculate the dash based on that
    var percentScrolled = (($(window).scrollTop() / ($("html").height() - $(window).height())) * 100),
        dashLength = percentScrolled * (fullLength / 100);

    $(".path").css("stroke-dashoffset", fullLength - dashLength);
  });
});

E2. https://codepen.io/Unleashed-Design/pen/PgYMJw

    <svg id="logosvg" viewBox="0 0 322.3 72.401" width="322.3" height="72.401">
        <path id="logo" class="cls-1" d="M 163.7 71.201 L 154.7 71.201 L 154.7 1.201 L 167.3 1.201 L 198.2 59.401 L 198.2 1.201 L 207.2 1.201 L 207.2 71.201 L 194.8 71.201 L 163.7 13.401 L 163.7 71.201 Z M 267.2 71.201 L 225.2 71.201 L 225.2 1.201 L 267.2 1.201 L 267.2 9.401 L 234.7 9.401 L 234.7 30.701 L 262.7 30.701 L 262.7 38.701 L 234.7 38.701 L 234.7 63.001 L 267.2 63.001 L 267.2 71.201 Z M 322.3 71.201 L 280.7 71.201 L 280.7 1.201 L 290.2 1.201 L 290.2 62.701 L 322.3 62.701 L 322.3 71.201 Z M 41.6 71.201 L 0 71.201 L 0 1.201 L 9.5 1.201 L 9.5 62.701 L 41.6 62.701 L 41.6 71.201 Z M 100.008 71.643 A 36.51 36.51 0 0 0 107.6 72.401 A 38.35 38.35 0 0 0 112.762 72.064 A 30.074 30.074 0 0 0 121.5 69.551 Q 127.6 66.701 131.9 61.751 Q 136.2 56.801 138.45 50.201 Q 140.7 43.601 140.7 36.101 A 48.215 48.215 0 0 0 140.621 33.323 A 41.439 41.439 0 0 0 138.45 22.101 Q 136.2 15.601 131.9 10.601 Q 127.6 5.601 121.45 2.801 A 29.925 29.925 0 0 0 115.558 0.838 A 36.42 36.42 0 0 0 107.6 0.001 A 39.35 39.35 0 0 0 101.372 0.476 A 29.661 29.661 0 0 0 89.9 4.751 Q 82.5 9.501 78.55 17.651 A 37.989 37.989 0 0 0 75.715 25.764 A 46.182 46.182 0 0 0 74.6 36.101 A 48.913 48.913 0 0 0 74.635 37.961 A 42.769 42.769 0 0 0 76.85 50.201 A 39.376 39.376 0 0 0 77.289 51.423 A 34.353 34.353 0 0 0 83.35 61.751 Q 87.6 66.701 93.7 69.551 A 29.142 29.142 0 0 0 100.008 71.643 Z M 107.6 64.201 A 26.517 26.517 0 0 0 113.548 63.566 A 19.316 19.316 0 0 0 120.5 60.501 A 22.47 22.47 0 0 0 127.825 51.63 A 27.252 27.252 0 0 0 128.35 50.451 A 34.108 34.108 0 0 0 130.672 41.522 A 43.503 43.503 0 0 0 131 36.101 Q 131 30.701 129.4 25.701 A 29.735 29.735 0 0 0 125.26 17.374 A 28.121 28.121 0 0 0 124.8 16.751 Q 121.8 12.801 117.45 10.501 A 19.921 19.921 0 0 0 110.033 8.319 A 24.578 24.578 0 0 0 107.6 8.201 A 24.086 24.086 0 0 0 101.108 9.041 A 19.545 19.545 0 0 0 95.05 11.901 A 23.148 23.148 0 0 0 87.449 21.027 A 27.785 27.785 0 0 0 87.05 21.901 A 32.793 32.793 0 0 0 84.596 31.088 A 41.257 41.257 0 0 0 84.3 36.101 Q 84.3 41.501 85.85 46.551 A 29.379 29.379 0 0 0 90.031 55.096 A 27.923 27.923 0 0 0 90.4 55.601 Q 93.4 59.601 97.75 61.901 A 19.921 19.921 0 0 0 105.167 64.082 A 24.578 24.578 0 0 0 107.6 64.201 Z M 60.6 71.201 L 51.1 71.201 L 51.1 1.201 L 60.6 1.201 L 60.6 71.201 Z"  />
    </svg>

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

* {
  box-sizing: border-box;
}

body {
  background-color: #1b2431;
  font-size: 10px;
  min-height: 200%;
}
body #logosvg {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 15rem;
  height: 15rem;
  transform: translate(-50%, -50%);
}
body #logosvg .cls-1 {
  stroke: #FF6E48;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 0.4rem;
  fill: transparent;
  transition: fill 250ms;
}

// ✅ DEFINITION UNSERER ELEMENTE
const SVGLOGO = document.getElementById('logo');

// ✅ DEFINITION VON VARIABLEN
const LOGOLENGTH = SVGLOGO.getTotalLength();

// ✅ GRUNDLEGENDES SETTING
SVGLOGO.style.strokeDasharray = LOGOLENGTH;
SVGLOGO.style.strokeDashoffset = LOGOLENGTH;

// ✒️ ZEICHNEN UNSERES SVG GRAFEN
const drawWhenScroll = () => {
    const DRAWLOGO = LOGOLENGTH * calcScrollPercent();
    SVGLOGO.style.strokeDashoffset = LOGOLENGTH - DRAWLOGO;
    if (calcScrollPercent() === 1) {
        SVGLOGO.style.fill = '#ff6e48';
    } else {
        SVGLOGO.style.fill = 'transparent';
    }
}

// 🙉 FUNKTION UM EINEN % WERT DES SCROLLS ZU BERECHNEN
const calcScrollPercent = () => {
    let height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    return document.documentElement.scrollTop / height;
}
    
// 🙊 FUNKTION FÜR DAS TRIGGERS DES SCROLL EVENTS
window.addEventListener('scroll', drawWhenScroll);

E3. https://github.com/Mr-Hera/multi-path-svg-scroll

C:\Users\Administrator\Desktop\multi-path-svg-scroll-main\index.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">
    <link rel="stylesheet" href="main.css">
    <title>Multi-Path SVG Scroll</title>
</head>
<body>
    <section>
        <h1>Airplane</h1>
    </section>
    <section>
    </section>
    <section>
    </section>
    <svg viewBox="0 0 369.08 262.7">
        <!-- <defs>
            <style>
                .cls-1 {
                    fill: none;
                    stroke: #231f20;
                    stroke-miterlimit: 10;
                }
            </style>
        </defs> -->
        <path class="cls-1"
            d="M 41.6 71.201 L 0 71.201 L 0 1.201 L 9.5 1.201 L 9.5 62.701 L 41.6 62.701 L 41.6 71.201 Z" />
        <path class="cls-1" d="M 60.6 71.201 L 51.1 71.201 L 51.1 1.201 L 60.6 1.201 L 60.6 71.201 Z" />
        <path class="cls-1"
            d="M 100.008 71.643 A 36.51 36.51 0 0 0 107.6 72.401 A 38.35 38.35 0 0 0 112.762 72.064 A 30.074 30.074 0 0 0 121.5 69.551 Q 127.6 66.701 131.9 61.751 Q 136.2 56.801 138.45 50.201 Q 140.7 43.601 140.7 36.101 A 48.215 48.215 0 0 0 140.621 33.323 A 41.439 41.439 0 0 0 138.45 22.101 Q 136.2 15.601 131.9 10.601 Q 127.6 5.601 121.45 2.801 A 29.925 29.925 0 0 0 115.558 0.838 A 36.42 36.42 0 0 0 107.6 0.001 A 39.35 39.35 0 0 0 101.372 0.476 A 29.661 29.661 0 0 0 89.9 4.751 Q 82.5 9.501 78.55 17.651 A 37.989 37.989 0 0 0 75.715 25.764 A 46.182 46.182 0 0 0 74.6 36.101 A 48.913 48.913 0 0 0 74.635 37.961 A 42.769 42.769 0 0 0 76.85 50.201 A 39.376 39.376 0 0 0 77.289 51.423 A 34.353 34.353 0 0 0 83.35 61.751 Q 87.6 66.701 93.7 69.551 A 29.142 29.142 0 0 0 100.008 71.643 Z M 107.6 64.201 A 26.517 26.517 0 0 0 113.548 63.566 A 19.316 19.316 0 0 0 120.5 60.501 A 22.47 22.47 0 0 0 127.825 51.63 A 27.252 27.252 0 0 0 128.35 50.451 A 34.108 34.108 0 0 0 130.672 41.522 A 43.503 43.503 0 0 0 131 36.101 Q 131 30.701 129.4 25.701 A 29.735 29.735 0 0 0 125.26 17.374 A 28.121 28.121 0 0 0 124.8 16.751 Q 121.8 12.801 117.45 10.501 A 19.921 19.921 0 0 0 110.033 8.319 A 24.578 24.578 0 0 0 107.6 8.201 A 24.086 24.086 0 0 0 101.108 9.041 A 19.545 19.545 0 0 0 95.05 11.901 A 23.148 23.148 0 0 0 87.449 21.027 A 27.785 27.785 0 0 0 87.05 21.901 A 32.793 32.793 0 0 0 84.596 31.088 A 41.257 41.257 0 0 0 84.3 36.101 Q 84.3 41.501 85.85 46.551 A 29.379 29.379 0 0 0 90.031 55.096 A 27.923 27.923 0 0 0 90.4 55.601 Q 93.4 59.601 97.75 61.901 A 19.921 19.921 0 0 0 105.167 64.082 A 24.578 24.578 0 0 0 107.6 64.201 Z" />
        <path class="cls-1"
            d="M 163.7 71.201 L 154.7 71.201 L 154.7 1.201 L 167.3 1.201 L 198.2 59.401 L 198.2 1.201 L 207.2 1.201 L 207.2 71.201 L 194.8 71.201 L 163.7 13.401 L 163.7 71.201 Z" />
        <path class="cls-1"
            d="M 267.2 71.201 L 225.2 71.201 L 225.2 1.201 L 267.2 1.201 L 267.2 9.401 L 234.7 9.401 L 234.7 30.701 L 262.7 30.701 L 262.7 38.701 L 234.7 38.701 L 234.7 63.001 L 267.2 63.001 L 267.2 71.201 Z" />
        <path class="cls-1"
            d="M 322.3 71.201 L 280.7 71.201 L 280.7 1.201 L 290.2 1.201 L 290.2 62.701 L 322.3 62.701 L 322.3 71.201 Z" />
    </svg>
    <script src="index.js"></script>
</body>
</html>

C:\Users\Administrator\Desktop\multi-path-svg-scroll-main\index.js

let paths = document.querySelectorAll("path");
fillSvgPaths();
document.addEventListener("scroll", fillSvgPaths);
function fillSvgPaths() {
  let scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
  for (let i = 0; i < paths.length; i++) {
    let path = paths[i];
    let pathLength = path.getTotalLength();
    path.style.strokeDasharray = pathLength;
    path.style.strokeDashoffset = pathLength;
    let drawLength = pathLength * scrollPercentage;
    path.style.strokeDashoffset = pathLength - drawLength
  }
};

C:\Users\Administrator\Desktop\multi-path-svg-scroll-main\main.css

body {
  margin: 0;
  height: 100vh;
}
svg {
  width: 80%;
  position: fixed;
  top: 20%;
  left: 10%;
}
section {
  height: 100vh;
  display: grid;
  place-content: center;
  font-family: "Bebas Neue";
  font-size: 5rem;
}
section:nth-of-type(2) {
  background: rgb(232, 227, 214);
}
svg path {
  stroke-dasharray: 0;
  stroke-dashoffset: 0;
  stroke-width: 0.4;
  stroke: #000;
  fill: none;
  transition: stroke-offset 1s;
}

E4. https://codepen.io/alexincarnati/pen/LmxoXM

Sử dụng text trong svg luôn

<svg viewBox="0 0 1400 300">
	<symbol id="s-text">
		<text text-anchor="middle" x="50%" y="80%">LIONEL</text>
	</symbol>
	<g class = "g-ants">
		<use xlink:href="#s-text" class="text-copy"></use>
		<use xlink:href="#s-text" class="text-copy"></use>
		<use xlink:href="#s-text" class="text-copy"></use>
		<use xlink:href="#s-text" class="text-copy"></use>
		<use xlink:href="#s-text" class="text-copy"></use>
    <use xlink:href="#s-text" class="text-copy"></use>
     <use xlink:href="#s-text" class="text-copy"></use>
     <use xlink:href="#s-text" class="text-copy"></use>
     <use xlink:href="#s-text" class="text-copy"></use>
	</g>
</svg>

@import url(https://fonts.googleapis.com/css?family=Audiowide);

html, body{
  height: 100%;
  font-weight: 800;
}

body{
  background: #030321;
  font-family: Arial;
}

text {
  letter-spacing: 2px;
}

svg {
    display: block;
    font: 9em 'Audiowide';
    width: 100%;
    height: 300px;
    margin: 0 auto;
}

.text-copy {
    fill: none;
    stroke: white;
    stroke-dasharray: 6% 29%;
    stroke-width: 5px;
    stroke-dashoffset: 0%;
    animation: stroke-offset 5.5s infinite linear;
}

.text-copy:nth-child(1){
	stroke: #FFF;
	animation-delay: -1;
}

.text-copy:nth-child(2){
	stroke: #FFF;
	animation-delay: -2s;
}

.text-copy:nth-child(3){
	stroke: #FFF;
	animation-delay: -3s;
}

.text-copy:nth-child(4){
	stroke: #FFF;
	animation-delay: -4s;
}

.text-copy:nth-child(5){
	stroke: #FFF;
	animation-delay: -5s;
}

.text-copy:nth-child(6){
	stroke: #FFF;
	animation-delay: -6s;
}

.text-copy:nth-child(7){
	stroke: #FFF;
	animation-delay: -7s;
}

.text-copy:nth-child(8){
	stroke: #FFF;
	animation-delay: -8s;
}

@keyframes stroke-offset{
	100% {stroke-dashoffset: -35%;}
}