Apnw2 Posted April 12, 2022 Share Posted April 12, 2022 Hello, I'm trying to fill a circle from the outside to the inside and scale it. We can see on the codepen that it works approximately, but the filling thanks to the border-width attribute is not smooth and kind of jumps, whereas the scale works perfectly smooth. The end goal would be to cover entirely the screen in blue, so if another method is more appropriate I'm open. Thanks in advance, Max See the Pen YzYOGaG by MaxOlliv (@MaxOlliv) on CodePen Link to comment Share on other sites More sharing options...
Carl Posted April 12, 2022 Share Posted April 12, 2022 I'm not quite sure how you are going to fill from the outside in. if you have a solid background color maybe use 2 circles. Maybe look to svg. If you want guarantee the circle fills ANY viewport size, I learned this 142 vmax trick from @OSUblake See the Pen JjOJJWN by snorkltv (@snorkltv) on CodePen Full lesson video explaining how it works https://www.creativecodingclub.com/pages/free-lesson-vmax If you want to fill window exactly you can determine the distance from center to a corner of the viewport to get the radius another demo from my courses (you may need to re-run to see the circle animation) See the Pen NWNrbay?editors=0110 by snorkltv (@snorkltv) on CodePen 3 Link to comment Share on other sites More sharing options...
Apnw2 Posted April 12, 2022 Author Share Posted April 12, 2022 Thanks for your answer, In fact, I was thinking to make a calculation similar as the one in your second codepen example, but the problem I'm coming with in this topic is that the animation in my codepen is not smooth and jumps pixel by pixel. Link to comment Share on other sites More sharing options...
mvaneijgen Posted April 13, 2022 Share Posted April 13, 2022 @Apnw2 I would animate the `strokeWidth` of a SVG. This is less likely to show pixels. See the Pen vYpzeZp?editors=1111 by mvaneijgen (@mvaneijgen) on CodePen 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now