Scalable Vector Graphics (SVG)

SVG 3d imitation

Александр » 28 ноя 2020, 02:34

As it's well known, there is no 3d support in SVG. Nowdays Scalable Vector Graphics (SVG) doesn't provide any means for 3d drawing, neither any means for 3d-transfoming 2d shapes (e.g. perspective, axes rotation etc.)
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
Cartoon no crown
SVG 3d imitation
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:
SVG 3d imitation
Coronavirus no crown
coronavirus_19_no_crown_2-11-2020.jpg (27.45 Кб) Просмотров: 135
(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.
The first my experience was using one gradient fill for all tentacles (because I'm lazy :P )!
SVG 3d imitation
Coronavirus with crown, 3d common gradient
coronavirus_with_crown_3d_common_gradient_28-11-2020.jpg (30.42 Кб) Просмотров: 135

(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
SVG 3d imitation
Coronavirus with crown, 3d individual gradients
coronavirus_with_crown_3d_individual_gradient_01-12-2020.jpg (122.62 Кб) Просмотров: 128

(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…
Сообщения: 394
Зарегистрирован: 20 мар 2014, 17:05

Вернуться в SVG