search
HomeWeb Front-endH5 TutorialExample of converting jpg image into svg text path animation (with code)

This article brings you an example of converting a jpg image into an svg text path animation (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

I am very interested in svg animation recently. Using svg css can achieve some eye-catching effects. The svg animation appears on the first screen of the Ant Design official website, coding The SVG animation also appears on the homepage of the official website. The effect may seem ordinary to non-front-end developers, but in the eyes of front-end developers, this effect is low-key and flamboyant! This is what you did jq Compare the animate animations and decide the difference! What else do you want to say?

My goal is to create animation effects like Ant Design. I want to create a simpler effect first, such as this text stroke animation effect
Example of converting jpg image into svg text path animation (with code)

How?

Example of converting jpg image into svg text path animation (with code)

This jpg is my avatar, and the final effect is based on this picture.

Example of converting jpg image into svg text path animation (with code)

First, convert the selected area of ​​the image into a path in PS

Example of converting jpg image into svg text path animation (with code)

Example of converting jpg image into svg text path animation (with code)

# #Then export the ps file with the path to Ai

Example of converting jpg image into svg text path animation (with code)

Example of converting jpg image into svg text path animation (with code)##It should be noted that the path of the second letter consists of two parts , a large selection on the outside and a small selection on the inside. Here you need to select "Window" → "Pathfinder" and select "Difference" for the shape mode.

Save it in svg format and get the code:

<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 215 215" style="enable-background:new 0 0 215 215;" xml:space="preserve"><style type="text/css">
    .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#30479B;}</style><g>
    <path class="st0" d="M197,101c-7.9,2.1-13.8,8.2-25,5c-1.3-7.7-2.7-15.3-4-23c2.3-2.3,4.7-4.7,7-7c5.5-1.6,11.3-3.4,15,1
        c4.5-1.4,3.6-0.5,5-5c-3.7-1.7-7.3-3.3-11-5c-10.1,4.6-14.5,6.3-22,12c1.3,9.7,2.7,19.3,4,29c3.8,6.1,18.2,5.6,26,3
        c4.1-2,5-3.9,7-8C198.3,102.3,197.7,101.7,197,101z"/>
    <path class="st0" d="M144,73c-1.3,0-2.7,0-4,0c-2.3,1-4.7,2-7,3c1.3,5.3,2.7,10.7,4,16c3.3-1,6.7-2,10-3
        C148.1,83.3,145.3,79.1,144,73z"/>
    <path class="st0" d="M126,84c-10,0-20,0-30,0c1.3,14,2.7,28,4,42c2,0,4,0,6,0c-1-11.3-2-22.7-3-34c0.7-0.3,1.3-0.7,2-1
        c5.3,0,10.7,0,16,0c3,10,6,20,9,30c1.2,3.1,2,1.2,6,1c-3.3-12-6.7-24-10-36C126,85.3,126,84.7,126,84z"/>
    <path class="st0" d="M18,97c0.3,4.7,0.7,9.3,1,14c9,0.7,18,1.3,27,2c0.3,3,0.7,6,1,9c-7.7,0-15.3,0-23,0c0,1.7,0,3.3,0,5
        c5,0.7,10,1.3,15,2c4.3,0,8.7,0,13,0c0.7-6.3,1.3-12.7,2-19c-4.2-4-20.4-4.2-28-4c-0.3-2.3-0.7-4.7-1-7c7.8-5.5,19.4-2.3,29-5
        c0.7,0,1.3,0,2,0c0-2,0-4,0-6C34.4,87.6,30.9,88,18,97z"/>
    <path class="st0" d="M146,96c-1.7,0.7-3.3,1.3-5,2c-2.1,11.1,6.7,23,9,34c3.4,0.8,5.1,0.7,8-1c1-0.3,2-0.7,3-1
        c-3.3-11.3-6.7-22.7-10-34C149.3,96,147.7,96,146,96z"/>
    <path class="st0" d="M57,122c2.7,8.7,5.3,17.3,8,26c9.5,1.9,19.2-5.2,28-8c1.2-5.9-0.6-23.6-5-29C77.7,114.7,67.3,118.3,57,122z
         M70,141c-1.7-4.3-3.3-8.7-5-13c5.7-2.7,11.3-5.3,17-8c2.5,2.4,2.9,5,4,9C85.8,138.6,78.7,140.6,70,141z"/></g></svg>

Modify the css

.st0{fill: none;    
stroke-width:2;    
stroke:#30479B;    
stroke-linejoin:round;    
stroke-linecap:round;    
stroke-dasharray: 250, 250;    
animation: lineMove 5s ease-out infinite;    
}
@keyframes lineMove {
    0%{        
    stroke-dasharray: 0, 250;    
    }
    100%{        
    stroke-dasharray: 250, 250;    
    }
    }

Regarding the combination of svg and css, use this example as a reference:

- fill represents the fill color, and the value of none represents no color

- stroke is the color of the border
- stroke-width defines the thickness of the border
- stroke-dasharray The first parameter of this attribute defines the length of the border dash line, The second parameter is the spacing of the dotted lines. What is a "border dotted line"? You can think that the border is a dotted line instead of a solid line, but the spacing of the dotted lines is 0, which looks like a solid line.
- The @keyframes feature of CSS3 is used here to control the transition animation in the stroke-dasharray style.

The final overall code is as follows

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">

        svg{width: 250px;height: 250px;}
    </style></head><body style="background: #f1f1f1">
    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 215 215" style="enable-background:new 0 0 215 215;" xml:space="preserve">
    <style type="text/css">
        .st0{fill: none;            
        stroke-width:2;            
        stroke:#30479B;            
        stroke-dasharray: 250;            
        animation: lineMove 5s ease-out infinite;            
        }
        @keyframes lineMove {
            0%{                
            stroke-dasharray: 0, 250;            
            }
            100%{                
            stroke-dasharray: 250, 250;            
            }
        }    
        </style>
    <g>
        <path class="st0" d="M197,101c-7.9,2.1-13.8,8.2-25,5c-1.3-7.7-2.7-15.3-4-23c2.3-2.3,4.7-4.7,7-7c5.5-1.6,11.3-3.4,15,1
            c4.5-1.4,3.6-0.5,5-5c-3.7-1.7-7.3-3.3-11-5c-10.1,4.6-14.5,6.3-22,12c1.3,9.7,2.7,19.3,4,29c3.8,6.1,18.2,5.6,26,3
            c4.1-2,5-3.9,7-8C198.3,102.3,197.7,101.7,197,101z"/>
        <path class="st0" d="M144,73c-1.3,0-2.7,0-4,0c-2.3,1-4.7,2-7,3c1.3,5.3,2.7,10.7,4,16c3.3-1,6.7-2,10-3
            C148.1,83.3,145.3,79.1,144,73z"/>
        <path class="st0" d="M126,84c-10,0-20,0-30,0c1.3,14,2.7,28,4,42c2,0,4,0,6,0c-1-11.3-2-22.7-3-34c0.7-0.3,1.3-0.7,2-1
            c5.3,0,10.7,0,16,0c3,10,6,20,9,30c1.2,3.1,2,1.2,6,1c-3.3-12-6.7-24-10-36C126,85.3,126,84.7,126,84z"/>
        <path class="st0" d="M18,97c0.3,4.7,0.7,9.3,1,14c9,0.7,18,1.3,27,2c0.3,3,0.7,6,1,9c-7.7,0-15.3,0-23,0c0,1.7,0,3.3,0,5
            c5,0.7,10,1.3,15,2c4.3,0,8.7,0,13,0c0.7-6.3,1.3-12.7,2-19c-4.2-4-20.4-4.2-28-4c-0.3-2.3-0.7-4.7-1-7c7.8-5.5,19.4-2.3,29-5
            c0.7,0,1.3,0,2,0c0-2,0-4,0-6C34.4,87.6,30.9,88,18,97z"/>
        <path class="st0" d="M146,96c-1.7,0.7-3.3,1.3-5,2c-2.1,11.1,6.7,23,9,34c3.4,0.8,5.1,0.7,8-1c1-0.3,2-0.7,3-1
            c-3.3-11.3-6.7-22.7-10-34C149.3,96,147.7,96,146,96z"/>
        <path class="st0" d="M57,122c2.7,8.7,5.3,17.3,8,26c9.5,1.9,19.2-5.2,28-8c1.2-5.9-0.6-23.6-5-29C77.7,114.7,67.3,118.3,57,122z
             M70,141c-1.7-4.3-3.3-8.7-5-13c5.7-2.7,11.3-5.3,17-8c2.5,2.4,2.9,5,4,9C85.8,138.6,78.7,140.6,70,141z"/>
    </g>
    </svg>
    </body>
    </html>

Recommended related articles:

How to make icon from symbol in svg

SVG Drawing function: svg realizes drawing a flower (with code)

The above is the detailed content of Example of converting jpg image into svg text path animation (with code). For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
聊聊如何利用 SVG 实现图片马赛克效果聊聊如何利用 SVG 实现图片马赛克效果Sep 01, 2022 am 11:05 AM

不借助 Javascript,如何利用 SVG 实现图片马赛克效果?下面本篇文章就来带大家详细了解一下,希望对大家有所帮助!

svg怎么转jpg格式svg怎么转jpg格式Nov 24, 2023 am 09:50 AM

svg可以通过使用图像处理软件、使用在线转换工具和使用Python图像处理库的方法来转jpg格式。详细介绍:1、图像处理软件包括Adobe Illustrator、Inkscape和GIMP;2、在线转换工具包括CloudConvert、Zamzar、Online Convert等;3、Python图像处理库等等。

深入浅析vue3+vite中怎么使用svg图标深入浅析vue3+vite中怎么使用svg图标Apr 28, 2022 am 10:48 AM

svg图片在项目中使用的非常广泛,下面本篇文章带大家介绍一下如何在vue3 + vite 中使用svg图标,希望对大家有所帮助!

VUE3入门教程:使用Vue.js插件玩转SVGVUE3入门教程:使用Vue.js插件玩转SVGJun 16, 2023 am 09:48 AM

随着现代Web前端开发的不断发展,越来越多的技术被广泛应用于实际开发中。其中,Vue.js是目前最为流行的JavaScript框架之一,它基于MVVM模式,提供了丰富的API和组件库,使得开发响应式、可复用、高效的Web应用变得更加容易。而目前最新的Vue.js3版本相较于旧版,又有着更好的性能和更丰富的特性,引起了广泛的关注和研究。本文将会为大家介绍一种

adobe animate是什么软件adobe animate是什么软件Jun 30, 2022 pm 04:01 PM

adobe animate是Adobe公司出品的一款2D动画制作软件,是一个多媒体创作和矢量动画制作软件;它可用于设计矢量图形和动画,并发布到电视节目、视频、网站、网络应用程序、大型互联网应用程序和电子游戏中。使用Animate,可以创作出栩栩如生的动画短片,同时animate也是一款前端工程师实现动画交互的必备工具。

详解用SVG给 favicon 添加标识详解用SVG给 favicon 添加标识Sep 07, 2022 am 10:30 AM

怎么使用SVG给 favicon 添加标识?下面本篇文章给大家介绍一下使用 SVG 生成带标识的 favicon的方法,希望对大家有所帮助!

在HTML5画布上绘制SVG文件在HTML5画布上绘制SVG文件Sep 15, 2023 pm 03:09 PM

要在画布元素上绘制HTMLImageElements,请使用drawImage()方法。此方法使用src=”mySVG.svg”定义一个Image变量,并在加载时使用drawImage。varmyImg=newImage();myImg.onload=function(){&nbsp;&nbsp;ctx.drawImage(myImg,0,0);}img.src="http://www.example.com/files/sample.svg";

vue3+vue-cli4中怎么使用svgvue3+vue-cli4中怎么使用svgMay 11, 2023 pm 05:58 PM

一、安装svg-sprite-loadernpminstallsvg-sprite-loader--save-dev二、在src/components/svgIcon下新建组件index.vueimport{computed}from"@vue/reactivity";exportdefault{name:"baseSvgIcon",props:{iconClass:{type:String},className:{type:String},},setup

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)