SVG 3d imitation
Добавлено: 28 ноя 2020, 02:34As 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:
Cartoon no crown
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
.
The first my experience was using one gradient fill for all tentacles (because I'm lazy
)!
(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
(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…
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:
Cartoon no crown
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:
- Coronavirus no crown
- coronavirus_19_no_crown_2-11-2020.jpg (27.45 Кб) Просмотров: 904
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
.The first my experience was using one gradient fill for all tentacles (because I'm lazy
)!
- Coronavirus with crown, 3d common gradient
- coronavirus_with_crown_3d_common_gradient_28-11-2020.jpg (30.42 Кб) Просмотров: 904
(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
- Coronavirus with crown, 3d individual gradients
- coronavirus_with_crown_3d_individual_gradient_01-12-2020.jpg (122.62 Кб) Просмотров: 897
(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…