How can these pseudo-elements be animated?

Question

css

https://codepen.io/fristyr/pen/MRWaoY
The task is this: I would like to make a circle and a diamond (::before ::after) animation something like a drawing. Start from 0 until the figure ends and back. Is it even possible for such pseudo-elements? I tried using the border radius and shadows, but they only animate the entire figure at once because of the thickness, it appears and then fades out. And you need something like a line that goes from beginning to end drawing a figure

Answer 1

You can draw anything inside one single pseudo-element, through svg and data -
i.e. make an svg, animate it however you want, convert it to a data url and push it into the background, voila.
I can't vouch for rationality and performance.

Answer 2

With a square, one could still play around with gradients, but "drawing" a circle from one pseudo-element in CSS will not work. So you should look into SVG and animation properties stroke-dashoffset. You can read about it in the article .