How can I animate these pseudoelement?

https://codepen.io/name.Goodwin/pen/MRWaoY

The problem is that I would like to make a circle and the rhombus (::before ::after) the animation is something like a drawing. Beginning from 0 until a figure is not over and back. Is it even possible that for such pseudoelements? I tried using border Radus and shadows but they only make the animation of the whole figure at once download the film thickness, appears and then fades. And need something like a line which goes it beginning to end drawing the figure
March 19th 20 at 09:21
2 answers
March 19th 20 at 09:23
Solution
You can draw anything inside a single pseudo-element, using svg and data -

I.e. do svg, animeret it what you want, are converted into a data url and zapihivanie in the background, voila.
For efficiency and performance can not answer.

Hmm, did not know did not know. Thank you for your answer - name.Goodwin commented on March 19th 20 at 09:26
March 19th 20 at 09:25
With a square you would poshamanit with gradients, but to "draw" a circle of one pseudo-element in CSS will not work. So you should look in the direction and animate SVG properties stroke-dashoffset. Read about it in the article.

Find more questions by tags AnimationCSS