Jump to content

Animated Text in Oval Shape, SVG, vanilla JS

Recommended Posts

Site URL: https://nabazabih.com/

Look at the very bottom of the linked page to find the example I am trying to replicate. 

I am currently trying to approach it by using CSS, creating and SVG oval, and using JS to move it. I am having an issue getting the text to attach to the oval shape.

Is the issue b/c my SVG doesn't include path elements? I exported my image using Affinity Designer

<svg id="text-container" viewBox="0 0 3092 3784" xmlns="http://www.w3.org/2000/svg" ><ellipse id="text-curve" cx="1485.38" cy="1845.31" rx="814.122" ry="1555.76" fill="none" stroke="#000" stroke-width="3.29" transform="matrix(1.59384 0 0 1.09691 -821.465 -106.575)"/>

	<text y="140" font-size="92">
      <textPath href="#text-curve">
                website text here 
      </textPath>

      	
  	</text>
</svg>

 

927571396_ScreenRecording2021-08-12at6_37_44PM.mov

Link to comment
  • 1 month later...
On 8/13/2021 at 6:42 AM, nosremetnarg said:

Site URL: https://nabazabih.com/

Look at the very bottom of the linked page to find the example I am trying to replicate. 

I am currently trying to approach it by using CSS, creating and SVG oval, and using JS to move it. I am having an issue getting the text to attach to the oval shape.

Is the issue b/c my SVG doesn't include path elements? I exported my image using Affinity Designer

<svg id="text-container" viewBox="0 0 3092 3784" xmlns="http://www.w3.org/2000/svg" ><ellipse id="text-curve" cx="1485.38" cy="1845.31" rx="814.122" ry="1555.76" fill="none" stroke="#000" stroke-width="3.29" transform="matrix(1.59384 0 0 1.09691 -821.465 -106.575)"/>

	<text y="140" font-size="92">
      <textPath href="#text-curve">
                website text here 
      </textPath>

      	
  	</text>
</svg>

 

927571396_ScreenRecording2021-08-12at6_37_44PM.mov 31.87 MB · 0 downloads

I usually use gsap and jquery plugin named circle type for similar effect

CircleType.js – jQuery Plugin for Circular Text | jQuery Plugins (jquery-plugins.net)

Circle text rotation with SVG (codepen.io)

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.