I had made 3D isometric for head of alumni election event. What make inkscape so interesting is the result of combining Filter Effect and isometric. I love it, and I want to share it.

Isometric Setting

There are only three stuff that you need to know.

  • Create Axonometric Grid

  • Using snaps

  • Skew and Rotate

Grid

I follow this tutorial.

https://design.tutsplus.com/tutorials/playing-with-isometric-projection-in-inkscape-to-make-a-minecraft-scene--vector-21757

  • Create a new Document,

  • Open Axonometric Tabs in Document Properties

  • Create New Axonometric Tabs, Spacing Y:8, Angle X: 30, Angle Z: 30, Major Grid: 10

Skew

  • Left: Skew Vertical: -30

  • Right: Skew Vertical: 30

  • Top: Skew Horizontal: 30, Rotate: 30

  • or Top: Skew Horizontal: -30, Rotate: -30

Note: You need to scale to 86.062%, if you wish to get exact size. But I always ignore it, since I don’t need exact size.

Filter Effect

You should try and experience it yourself until you find what effect you desire.


Design

Each stuff in its layer

Typography

Font has nothing to do with isometric.

But if you wish to know, in this project I use

  • Trajan Pro: Logo

  • Zekton: Count

  • Capture It: Title

  • Varsity: Infographics #18 only

Document Properties

Size: 960px width, 960px height


Infographics Preview

I had made about 18 infographics for the whole election event, start from 12 to 18, I used 3D isometric.

Each shown progress announcement of count result, of alumni registrant for the election event.


Infograhics #12

This is the most simple one. Only one color with slight transparency.

Please Click for higher resolution.

Infographic #12

Color

To be exact, this is the RGBA color:

  • Left: RGBA #715037ee

  • Right: RGBA #3a261aee

  • Top: RGBA #555555ee

SVG Source


Infograhics #13

Let’s make a different color for each box.

Please Click for higher resolution.

Infographic #13

Color

There are 7 boxes.

I’m using RGB combination.

red

  • Left: (170, 40, 40), Right: (102, 20, 20), Top: (119, 68, 68)

blue

  • Left: (40, 40, 170), Right: (20, 20, 102), Top: (68, 68, 119)

Remember, this is not an exact science. Feel free to find your own RGB color.

Filter Effect

  • Drop Down Shadow: Color: black (#000000), Opacity: 0.5, Blur: 10px, Offset-X: 20, Offset-Y: 20

Note: Group all the boxes, before create applying effects.

SVG Source


Infograhics #14

Let’s have fun, with other effects. Feel Free to try.

I also rearrange the boxes, make it two object below others.

Please Click for higher resolution.

Infographic #14

Filter Effect

  • Bevels - Neon

Note: Group all the boxes, before create applying effects.

Decoration

I do not include avatar decoration in SVG source. However you can find it here.

SVG Source


Infograhics #15

Let’s stack the group of boxes, one on top of the other.

Please Click for higher resolution.

Infographic #15

Filter Effect

  • Top-Front: Morphology - Black Hole

  • Bottom-Back: Bevels - Molten Metal

SVG Source


Infograhics #16

Let’s rearrange again, and experiment with other filter effects.

Please Click for higher resolution.

Infographic #1

Filter Effect

  • Top-Front: Bumps - Plastify

  • Bottom-Back: Bevels - Neon

SVG Source


Infograhics #17

Again, let’s rearrange again, and combine above filter effects in different way.

Please Click for higher resolution.

Infographic #1

Filter Effect

  • Top-Front: Bevels - Neon

  • Bottom-Back: Morphology - Black Hole

SVG Source


Infograhics #18

This my final announcement in this event.

Please Click for higher resolution.

Infographic #18

Filter Effect

  • Bevels - Translucent

SVG Source


That’s all for now.