To note: Javascript is not running in this browser environment. Our apologies, but this demo has not yet been updated to support progressive enhancement.
Outer radius
(n)
('n%')
Inner radius
(n)
('n%')
Outer controls distance
(n)
('n%')
Inner controls distance
(n)
('n%')
Outer controls offset
(n)
('n%')
Inner controls offset
(n)
('n%')
Points
Twist
Curve
Show bounding box
Starts ('n%')
X:
Y:
Handles ('n%')
X:
Y:
Starts (n)
X:
Y:
Handles (n)
X:
Y:
Starts ('str')
X:
Y:
Handles ('str')
X:
Y:
Offset ('n%')
X:
Y:
Roll
Offset (n)
X:
Y:
Scale
Line join
Line width
Fill style
Fill:
Lock:
Draw style
Stroke:
Lock:
Method
Scale outline
Winding
Scale shadow
Flip-upend
Flip-reverse
Shadow offset
X:
Y:
Shadow blur
Test purpose
Create a Cog entity
Check that we can position the Cog on the canvas, including handle and offset
Check that flip values, roll and scaling does not affect Cog positioning
Check that we can manipulate the Cog-specific attributes
Known issue: for some perverse reason, the entity gets 'jittery' when attempting to animate particular values - scale, control distances or offsets - if the outer radius value is larger (or even very slightly smaller) than the inner radius value. The current fix, if required, is to keep the inner radius larger than the outer radius. Note that this may also impact on entitys defined in relative (%) values in a responsive canvas environment.