Как нарисовать это на css?

Нудно, либо map использовать, либо границы блокам и сами блок и трансформировать их поворотами.
Вот тут фигуры основные - потренируйтесь https://html5book.ru/css-figury/

По скорости и нагрузке на рендеринг страницы - такое изображение может и выиграет у картинки, но если что-то посложнее - то PNG будет в разы меньше нагрузки давать на рендер.

Не проще ли вставить PNG-картинку?
Тем более, что ты хочешь ее анимировать, то тогда сам ВсеВиртуальный GIF-ку велел )))

_https://codepen.io/topicstarter/pen/QWbgpjg - пожалуйста получите ...

Применил smil - это технология анимации SVG + css animation