Animating CSS Circles

[nmarketti]

I'm laying out ideas on how to approach an animation that will happen in multiple places across an entire site. While I know I could use DrawSVG...the way I developed these circles for each section was specifically for ease of control of the various sizes across sections, viewports, etc...so I opted for a circle created with straight CSS rather than SVG.

 

Can you do a similar draw effect with the circles on CSS properties, without having to use SVG and DrawSVG?

 

 

[PointC]

Hi @nmarketti

 

You can, but I'd then ask why do you want to do that? I've seen some CodePen demos creating this effect, but they seem a bit over-complicated for the end result. DrawSVG does it with one line of code and SVG scales perfectly with window resizes. I would think SVG would be the easier choice, but that's just my two cents worth. Others may drop by with different thoughts or an easy solution.

 

Happy tweening.

 

[nmarketti]

Hmmm. I like simple. I might look into refactoring the setup then for the circle effect. I'm not entirely sure if I want to go this direction either, just pinging the forum to see if there was a simple way.

 

Thanks! 

[OSUblake]

You can draw a circle in 1 line of code using canvas or SVG. With CSS, you have to use multiple elements, like here, or a clip-path, which doesn't have good CSS support.

 

The easiest option seems like SVG, then canvas, followed by CSS in a distant last.