Home :: Geometry :: Variable Width Stroke
Doug Schepers has suggested an interesting idea to the W3C. He has a good write-up on his site along with images that helped me to grasp the concepts he's describing.
I had been thinking about how to use my intersection code to create beveled joins when Doug made his suggestion. I was curious to see his idea in action, so I created the following samples.
Each sample shows the variable width stroke being applied to a rectangle along with one of the supported SVG line joins (bevel, miter, and round). A custom namespace and custom tag in that namespace are being used in the examples.
Initially, I tried offsetting the corners by the stroke amount at that corner. I realized that this would not work for polygons with acute angles, but it was interesting to see the results were close to being correct.
Below is an example offsetting the corners. The second image is an overlay of the two approaches. You have to zoom in considerably to see the difference between the two images.
This last sample demonstrates the geometry that is being used to calculate the resulting variable stroke-width square.
This is a demonstration of a possible extension to the variable stroke idea. Doug presented his stroke as a linear interpolation between values. I was curious if a Bezier could be used in place of the linear function.
Click the Bezier on the left to activate it. Drag the handles and the stroke on the right will be updated. Note that the first and last control points have been constrained to the y-axis only.