Moreover, CSS 3d transformations aren't applicable to any SVG's elements, with one exception — we may apply CSS 3d-transformations to the root SVG element itself.
About six months ago, I drew the coronavirus cartoon using Inkscape:
![SVG 3d imitation](https://forum.tamirov.ru/files/coronavirus_no_crown_27-05-2020.jpg)
Cartoon no crown
![SVG 3d imitation](https://forum.tamirov.ru/files/coronavirus_with_crown_27-05-2020.jpg)
Cartoon with crown
One week ago I decided to redraw this cartoon manually in Notepad++, in order to maximum simplify the SVG-code. I want to try to manipulate my cartoon with JavaScript, but the messy enough Inkscape's SVG-code isn't suitable for manipulation via JavaScript.
The result of manual programming:
(Webp format version Coronavirus no crown)
I drew one hand (tentacle) and made all other hands as clones with various transformations (rotation, skew, scale).. It was very inspiring, I looked forward to how I would easily animate this character!
But, my appetite was growing, and I wanted to give him a volume!
As I have written at the beginning of this article, there is no 3d support in SVG…
So I decided to mimic 3D-shading by using gradients
![Очень доволен :D](./images/smilies/icon_e_biggrin.gif)
The first my experience was using one gradient fill for all tentacles (because I'm lazy
![Дразнится :P](./images/smilies/icon_razz.gif)
(Webp format version Coronavirus with crown 3d, common gradient for all tentacles)
I couldn't achieve smoother junctions between the tentacles and the body. I was not satisfied, the conclusion was I need individual gradients for each tentacle!
And here we are
![Очень доволен :D](./images/smilies/icon_e_biggrin.gif)
(Webp format version Coronavirus with crown 3d, individual gradient for each tentacle)
Maybe it's possible to do it better, but I don't want now…