# 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

{% embed url="<https://github.com/danmarshall/svg-path-outline/issues/4>" %}

{% embed url="<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 1:**&#x20;

```
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

```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

```javascript
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

```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%;}
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learnhtml.gitbook.io/project/bo-cong-cu-chuyen-doi-text-to-svg-and-and-animation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.