Star Proposal Input

Test form input

To get a simulation of the star element, put in the attribute values.

Only numbers without units are allowed, list items are to be separated with exactly ',' just for the PHP script. In general there is no good check for nonsense values, take care yourself!

Star attributes
type
points
density (not relevant for type pointangle)
pangle (in case of type pointangle, point angle in turns, typically not larger than 0.5; in case of infinite shape scecond radius fixed to radius given by the first value of attribute r)
facet (in case of type pointangle, one can get stars with a facet with this attribute)
barwidth (in case of type bar, widths of the bars perpendicular to the radius, the length is given by the first value of attribute r; one value or two comma separated values: outer, inner width)
multi (number of subpaths)
dn (offset denominator)
dz (offset enumerator)
r (in case of type list or curve list of comma separated r values, repeats automatically; in case of type regular, pointangle or boundary only the first value is taken)
fr (in case of type list or curve list of comma separated values for fractional deviations from the corner direction, repeats automatically)
sn (control points, in case of type curve list of comma separated values for fractional direction to the next point)
sp (control points, in case of type curve list of comma separated values for fractional direction to the previous point)
an (control points, in case of type curve list of comma separated values for fractional angles to the next point, zero is perpendicular to radius)
ap (control points, in case of type curve list of comma separated values for fractional angles to the previous point, zero is perpendicular to radius)
Invertor (additional hole or shape in the center)
inv (number of points of invertor, a regular polygon if not zero, if zero a circle is chosen)
inr (radius of invertor, if zero no invertor is added, negative values result in another progress direction of this subpath!)
ina (start angle of invertor in turns divided by inv, in case of inv=0 in turns)
Decoration properties
fill
fill-rule
stroke
stroke-width
stroke-linejoin
stroke-miterlimit
Paint it:

Meaning of attributes

Attributes 'cx' and 'cy'

cx is the x-coordinate of the center of the shape, cy is the y-coordinate of the center of the shape. For both the default value is 0 (only this is available in the test implementation above). These attributes are relevant for all types of this element.

Attribute 'type'

type determines the type of a star like shape. The default value is 'regular'.

With the value 'regular' one can get easily regular polygons, both the convex ones and the star shape like non convex ones. If the attribute density is set to the value 1, one gets convex regular polygons with the number of corners given by the attribute points.
If density has another value, one can get non convex regular polygons and some specific similar shapes, consisting of two or more subpaths, for example the star of David. Here points gives the number of rays of the star like shape.

With the value 'boundary' one can get easily a set of star shapes with an inner and outer radius, corresponding to the boundary or outline of the 'regular' set.

With the value 'pointangle' one can note star like polygon shapes with discrete rotation and mirror symmetry, with two radii. The number of rays is given by the attribute points. The point angle for each ray is given by the attribute pangle.

Note for the shapes of the type 'boundary' the point angle in turns is given by (1-2density/points)/2. This can be helpful, if one wants to have a facet on a 'boundary' shape, but because it is 'boundary', obviously this does not have a facet as the 'pointangle' can have.

With the value 'list' one can note star like polygon shapes. For each point of the number of points given by the attribute points the radius and angle can be given separately in lists with the attribute r for the radii and fr for the angles. To simplify creation of symmetric shapes these lists are repeated, if the number of list items is smaller than the value of points. Additionally the angles are given relative to the position of a symmetric star with the corresponding attribute values for density and points.

With the value 'curve' one uses cubic Bézier curves instead of a polygon, else the structure is comparable to the type 'list', but there need to be lists for the control points as well. For each point there are two control points, one in the path progress to the next point, one to the previous point. The attributes sn and sp provide relative strength or length information about the direction at the current point into the next curve segment respectively from the previous path segment into the current point. The attributes an and ap provide corresponding angle information.

With the value 'bar' one uses trapezia as rays, points provides the number of rays, the attribute barwidth the outer and inner width of each ray.

Attribute 'points'

points gives the number of points contributing to a path. The default is '3'. For the types 'boundary', 'bar' and 'pointangle' these are only the number of rays. The used number of points is determined as follows from a given value: max(1,ceil(value))
Note that the values 1 or 2 are typically only meaningful for the type curve.

Attribute 'density'

density gives the number of turns, the rays are distributed. Respectively this decides, to which of the next points a line or curve is drawn. This attribute does not apply for the types 'bar' and 'pointangle'. The default is 1. The noted value is fixed to density=max(1,ceil(value) % points).
In case of 'regular' and if an already used point is met, before all turns are complete, a new subpath is started and automatically rotated to get a shape with the discrete rotation and mirror symmetry related to points.
In case of 'boundary' the boundary of the related 'regular' shape is drawn, but with only one path, no subpaths.

Attribute 'pangle'

'pangle' provides the point angle in case of type 'pointangle'. For other types it has no effect. The value is given in not negative turns. The given value is fixed to pangle=abs(value). Typical values are between 0 and 0.5, but others are not excluded. For a few specific other values, depending on points, the size of the shape would become infinite, in such a cases pangle + 1/points is an integer and the inner radius is fixed to 0.

Attribute 'facet'

Stars of the type 'pointangle' type are often presented either with additional lines to the points positions or the star id divided in segments with two different colors to give the impression of a facet. With the attribute 'facet' it can be noted, which type of facet is used. The value 'none' means no facet and this is the default. With the value 'center' only lines from the origin to the points positions are presented. With 'forward' one gets only have of the rays, the part pointing in progress direction of the path. For 'backward' one gets the the other part.

Attribute 'barwidth'

'barwidth' provides the widths of the trapezia in case of type 'bar'. The value is either a number or a comma separated list of two numbers. If only one number is noted, the second number is assumed to be the same. The first number is the width of the bar at the radius given by the first list item of the attribute r. The second number is the width on the other side of the trapezium of one ray. At this position the ray is connected to its neighbours, this is usually the inner radius of the star like shape.
The default value is '1'.
If the first value is '0' and the second positive, this results in shapes corresponding to the type 'pointangle', but with another parametrisation.

Attributes 'multi', 'dn' and 'dz'

Shapes described for type can be expanded to paths consisting of subpaths, which are rotated copies of the initial shape. 'multi' gives the number of subpaths, the default value is 1.

Relative to a previous subpath a copy can be rotated, this is done with the attributes dn and dz. If dn it noted to 0, it is fixed to points*multi. dz/dn is the rotation of a copy in turns. The default for dz is 1 and for dn it is 0, respectively points*multi.

Attribute 'r'

The attribute r provides a list of radii for a star like shape, for some types only the first list item applies, for the types 'list' and 'curve' the complete list applies. If it has less items than the value of points, the list is repeated.

Attribute 'fr'

In case of type 'list' or 'curve' the attribute fr provides a list of comma separated values for fractional deviations from the corner direction, it repeats automatically, if it has less items than the value of points. Each list item belongs to the related item of the repeated r list. A list item divided by points is the deviation from the symmetrical position in turns.

Attributes 'sn', 'sp', 'an', 'ap'

In case of type 'curve' the attributes sn, sp, an, ap provide the control points, the 'n' ones the next control point in progress direction, the 'p' the previous control point, from which the current point is the next in progress direction. 's' are for the strength or the length to the control point, 'a' for the angle. All these attributes have lists as values related to the repeated r and fr lists, they are repeated correspondingly.
These relative 's' values are multiplied with the corresponding radii and divided by the number of points to get the distance to the related control point.
These 'a' values are given in turns, 0 corresponds to the direction perpendicular to the related radius r and fr list item.
The default values for the 's' are 1, for the 'a' are 0.

Attributes 'inv', 'inr', 'ina'

Some stars especially in heraldry have centered holes. Such an additional subpath can be added to the previous paths given by type and multi, but without repetition.
This feature is called invertor, because one can invert inside and outside of the shape.
inr is the radius of the invertor. If the value is the default 0, no invertor is applied.
ina is the start angle of the invertor path (relevant for example for stroke-dasharray). This is given in fractional turns (see below), default is 0, the direction of the local -y axis or for negative inr the direction of the local y axis.
inv gives information about the shape of the invertor. The value is fixed to inv=max(0, ceil(value)). The default is 0. This results in a circle. If the inv is not zero, the shape is a regular polygon with the related number of points, given by fixed value of inv.
If inv is zero, ina is given in turns, else in turns divided by the fixed value of inv.
The progress direction is anti-clock-wise for positive inr, clock-wise for negative.

Examples

type="regular" r="900"
equilateral triangle

type="regular" r="900" points="5"
pentagon

type="regular" r="900" points="5" density="2"
pentagram

type="regular" r="900" points="6" density="2"
star of David

type="regular" r="900" points="3" multi="2"
star of David

type="regular" r="900" points="5" inr="200"
pierced pentagon

type="boundary" r="900" points="5" density="2"
boundary of a pentagram

type="boundary" r="900" points="5" density="2" inr="100"
pierced boundary of a pentagram

type="pointangle" pangle="0.05" r="900"
star with point angle 18 degree

type="pointangle" pangle="0.1" points="5" r="900"
boundary of a pentagram

type="pointangle" pangle="0.1" points="5" r="900" facet="center"
five pointed pentagram like star with a centered facet

type="pointangle" pangle="0.1" points="5" r="900" facet="forward"
forward facet of a five pointed pentagram like star

type="bar" barwidth="200" points="6" r="900"
six pointed bar star (Hagal, star of life)

type="bar" barwidth="400,160" points="4" r="900"
cross like four pointed bar star

type="list" points="16" r="1000,200,600,200"
symmetrical list star like a wind rose

type="list" points="24" r="1000,200,0,600,200,0" fr="0,0.5,0"
one facet of a wind rose

type="list" points="8" r="1000,300,800,200,700,100,900,250" fr="0,-0.4,-0.6,-0.5,-0.2,-0.1,0.2,-0.1"
irregular star

type="curve" r="900" points="5" density="2"
curved pentagram

type="curve" r="900" points="5" density="2" an="0.5" ap="0.5" sn="4" sp="4"
another curved pentagram

type="curve" r="900" points="5" density="2" an="-0.25" ap="0.25" sn="3" sp="3"
cusp pentagram

type="curve" r="1000,500" points="10" an="-0.25" ap="0.25" sn="1,16" sp="2,8"
another cusp pentagram

type="curve" r="1000" points="6" density="2" an="-0.25" ap="0.25" sn="4,8" sp="8,4"
cusp three pointed double star

type="curve" r="1000" points="6" density="2" multi="3" dn="9" dz="2" an="-0.25" ap="0.25" sn="4,8" sp="8,4"
more complex cusp triple star