Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

eslam said
PLUS
eslam said
Courses Plus Student 6,734 Points
Posted by eslam said
eslam said
Courses Plus Student 6,734 Points

animating svg icons

how to animate an arrow to go inside a circle on hover ? here is an example look at the next and previous icons

i just need a hint how to do so https://www.refletcommunication.com/en/experience

Adriel Lazarus
Adriel Lazarus
373 Points

What website is that (sorry for being off topic)?

It's beautiful! 😍

1 Answer

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

Very cool website! Lots of interesting effects happening there.

Moving the arrow could be done by changing the "left" offset on a positioned element, or by applying a "translateX" transform to an element. This would work with any element and would not be specific to SVG.

Shortening the arrow could be done by just reducing the element width with the overflow set to "hidden".