😍Bộ công cụ chuyển đổi Text to SVG && Animation 😉
PreviousTính khoảng cách đường bay Airport Distance MapNextCách sử dụng aspect ratio với CSS3, video aspect-ratio (ok)
Last updated
Last updated
Chú ý: Chọn Separate Characters thấy text chia thành khá nhiều path trong svg
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=100Bướ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
<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);
});
}); <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);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;
}
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%;}
}