Как нарисовать это на css?
Именно нарисовать. Желательно в движенииб, но это потом
По дате
По Рейтингу
вектор
_https://codepen.io/topicstarter/pen/QWbgpjg - пожалуйста получите ...
Применил smil - это технология анимации SVG + css animation
Не проще ли вставить PNG-картинку?
Тем более, что ты хочешь ее анимировать, то тогда сам ВсеВиртуальный GIF-ку велел )))
Нудно, либо map использовать, либо границы блокам и сами блок и трансформировать их поворотами.
Вот тут фигуры основные - потренируйтесь https://html5book.ru/css-figury/
По скорости и нагрузке на рендеринг страницы - такое изображение может и выиграет у картинки, но если что-то посложнее - то PNG будет в разы меньше нагрузки давать на рендер.
Больше по теме