SVG Path Following Effect
Add-ons
Plugin Description: SVG path animation following a background image. Create custom designs based on your needs, such as a company's development history.
Last Updated: 2022-06-28 09:24:44
SVG Path Following
1 | <img src="path.jpg"> |
Design the background image according to your requirements. The key is to make the design and path complement each other. This requires creativity. The example demonstrates just one of many possible animation effects.
1 | <text font-family="microsoft yahei" text-shadow="0px 0px 3px #000" font-size="4rem" x="0" y="0" fill="#ffffff"> |
? This section defines the running graphic and its color. Customize as needed; use AI to draw the path, save it as an SVG, and copy it.
1 2 3 4 | <text font-family="microsoft yahei" text-shadow="0px 0px 3px #000" font-size="4rem" x="0" y="0" fill="#ffffff">? This section defines the running graphic and its color. Customize as needed; use AI to draw the path, save it as an SVG, and copy it. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1768 1846" xml:space="preserve"> <text font-family="microsoft yahei" text-shadow="0px 0px 3px #000" font-size="4rem" x="0" y="0" fill="#ffffff">? <animateMotion path="M128.9,296.8h1498.9c30.7,0,55.8,25.1,55.8,55.7v265.9c0,30.6-25.1,55.7-55.8,55.7l-1484.5-1l0,0 c-30.7,0-55.8,25.1-55.8,55.7v265.9c0,30.6,25.1,55.7,55.8,55.7h1498.9h-2.5c30.7,0,55.8,25.1,55.8,55.7v265.9 c0,30.6-25.1,55.7-55.8,55.7H155.4l0,0c-30.7,0-55.8,25.1-55.8,55.7v265.9c0,30.6,25.1,55.7,55.8,55.7h1498.9" ; stroke-dashoffset: 0; begin="0s" dur="10s" rotate="auto" repeatCount="indefinite"></animateMotion> </text><path d="M128.9,296.8h1498.9c30.7,0,55.8,25.1,55.8,55.7v265.9c0,30.6-25.1,55.7-55.8,55.7l-1484.5-1l0,0 c-30.7,0-55.8,25.1-55.8,55.7v265.9c0,30.6,25.1,55.7,55.8,55.7h1498.9h-2.5c30.7,0,55.8,25.1,55.8,55.7v265.9 c0,30.6-25.1,55.7-55.8,55.7H155.4l0,0c-30.7,0-55.8,25.1-55.8,55.7v265.9c0,30.6,25.1,55.7,55.8,55.7h1498.9" stroke="#f00" opacity="0" stroke-width="1" fill="none"></path></svg> |
评论