BB code in posts seems to be working again!
I haven't turned on every single tag, so please let me know if there are any that are used/needed but not activated.

Main Menu

Isometric Shapes With Shading

Started by vojo, May 29, 2008, 06:13:19 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.


Attached is my attempt at creating a custom gradient.  When I apply this gradient to a circle, the color of the circle changes to match the gradient and selecting other colors has no affect. 

I group the concentric circles to create the gradient.  I was not clear about the underlying techniques to make the gradient function properly.


Your shading effect looks pretty good.

If you want more steps without adding shapes, you can use shadows.  Each circle appears to be about 102% larger than the one above, so, if you add a shadow to each circle, with zero offset, and 101% larger, you'll get 2X as many steps.

To the top circle (smallest) add the shadow, size =101% & no offset, select the darkest gray you want, and make the shadow 50% transparent.  This will help blend it with the cirlce below.  For the next shape down, select the fill to be one step lighter than the previous shadow above it, and set it's shadow to be one step lighter, again, 50% transparent.  Work your way down, progressively going lighter and lighter.  For the bottom (largest shape) you will want the shadow to either be only 20% or 0% transparent.  The 20% will allow a small amount of background to show thru.  May not be desireable.

This provides a linear gradient.  To improve the rounding effect, you could vary the circle and shadow sizes such that the upper circles have greater extension than the lower circles.  Hope this makes sense.  (Uh, for example, the 2nd circle might be 108% larger than the top circle, the 3rd circle 104% larger than the 2nd, circle, and 4th circle 102% larger than the 3rd, etc.)  Likewise, you could change the amount the shading changes, such that the upper circles have less change than the lower circles. 

Visio 2019 Pro


Thanks.  I appreciate the feedback.

Any idea why changing the colors in the fill doesn't change the shape color when the custom gradient is selected?

Visio Guy

You've got the right idea. Now with some ShapeSheet formulas, you could get it to work with different colors.

The idea is to leave the foremost circle free-to-be-colored by the user. Then, the "gradient" shapes have GUARDed formulas that form shades of the first circle's color.

In the ShapeSheet, GUARD( ) is a function that protects cell-formulas from being overridden by user interactions. The cells that hold color are FillForegnd and FillBkgnd.

You can build shades of color using ShapeSheet functions like: HUE, RGB, SHADE, TINT, and I think there are a few others, but it's bedtime over here in Germany, so I'm gonna hit the hay. Hope I've helped point the way.

- Chris
For articles, tips and free content, see the Visio Guy Website at
Get my Visio Book! Using Microsoft Visio 2010


VisioGuy (Chris),

You confirmed what I was thinking.  If I get something working, I'll post back here for some feedback.




I hope everyone had a chance to take some time off over the holidays.  For me it was a breath of fresh air.

The time off invigorated my creative juices.  Attached is an oval shape with a beveled edge.  I haven't tested to determine if problems occur when the shape is scaled.  I plan to add code to allow the base color to be changed and the size of the bevel. 

Any feedback would be greatly appreciated.




have fun....shading, light source, etc....just right click


it's very good topic,
i had asked some questions in the general disccussion, but realised that solution are there.
i will work on them. thank you guys...


Quote from: vojo on January 15, 2009, 08:06:14 PM
have fun....shading, light source, etc....just right click

thanks & thanks


Hi guys, I'm brand new to Visio, but enjoying the learning process. I'm having trouble with a shape and hope someone here can help. I've been tasked to reproduce the attached drawing in Visio. I found the link to the piping schematic stencil in this thread and it is VERY helpful. One thing I have not figured out how to reproduce though is the end of the piping. This is a common drawing feature that shows that the piping continues on in both directions. I can't describe it in words, but it should be clear in the drawing with a support holding a section of piping with is denoted as continuing in both directions. Any suggestions?

Browser ID: smf (possibly_robot)
Templates: 4: index (default), Display (default), GenericControls (default), GenericControls (default).
Sub templates: 6: init, html_above, body_above, main, body_below, html_below.
Language files: 4: index+Modifications.english (default), Post.english (default), Editor.english (default), Drafts.english (default).
Style sheets: 4: index.css, attachments.css, jquery.sceditor.css, responsive.css.
Hooks called: 308 (show)
Files included: 34 - 1306KB. (show)
Memory used: 1181KB.
Tokens: post-login.
Cache hits: 13: 0.00130s for 26,764 bytes (show)
Cache misses: 2: (show)
Queries used: 15.

[Show Queries]