If you want to draw simple Shapes on your website - please use my xg_graphics.js javascript library. It&';s easy to use. If you do use it, attributions are helpful, links are more helpful, posting articles is most helpful, and donations are always helpful. (Helpful to me and to others who could benefit from this library.)
xg_graphics.js contains functions for simple Shapes. You can combine these simple shapes to draw more complex shapes on your website. However, perhaps the best use of these shapes is for drawing shapes that you then paste into your graphics app and improve from there.xg_graphics.js is used in conjunction with my x_press.js javascript library. That library contains several functions to make your website more expressive. See that x_press documentation here. These libraries are quite small and will load fast.
xg_graphics.css can be included in your HTML. It contains classes for xg_shape routines. It is only required for those routines when one of those classes is used.
xg_shape routines are xg_graphics_init, xg_shape_draw, xg_shape_style.
xg_shape_draw(shape_element_id,shape_class=[''],shape_position=['absolute',0,0,-1,-1],shape_size=['100px','100px'],['0','0']],shape_border,shape_style_extra='',shape_content_center=[['center','center'],shape_content='') draws a shape described mostly by one or more classes. The class typically only contains border-radius, translate, and scale style attributes. Most other style attributes should be passed to xg_shape_draw.
shape_element_id The ID of the element in which the shape is to be drawn. Typically, this is either a <div> or an <img>. If the element is an <img>, include src=.
shape_class is an array of the classes for the shape, typically only containing border-radius, transform, and scale. None of those is required.
shape_position is array of 'absolute' / 'relative', left, top, right, and bottom positions.
shape_size is an array of width, height.
shape_border is the border style without border:
shape_style_extra is any extra styling.
shape_content_center is an array of [center x, center y], [offcenter x, offcenter y]. These values can be any valid values for justify-content and align-items for a flex box. Typically the values for center x and center y are 'flex-start', 'flex-end', or 'center'. The default for center x and center y is 'center'. offcenter x and offcenter y is the amount you want the content moved away from center, if any. offcenter x and offcenter y can be specified as %, px, em, etc. Typically, em values are too large. For exact center, specify 0,0. shape_content_center is the center of shape_element regardless of any style, including border-radius.
shape_content is '' unless you want to add text. Text will not display on an image. This text is centered per shape_content_center
xg_shape_style adjust styles and returns the maxified, midified, or minified style. Only border-radius and border, border-left, border-top, border-right, border-bottom are processed.xg_shape_style(style,shape_sizes_array=[[0,0],[0,0]],mify='minify') - pass style, old and new width and height, and minify/midify/maxify.inherit. For border... specify border-width border-style border-color. Don&';t specify % for border-width. border-color can&';t contain spaces.
You can use your own classes to draw shapes or those supplied in xg_graphics.css. I try to only use % in these classes. You can get finer detail, using px for border-radius. But then you have to adjust the px every time you adjust width and height.
xg_shape_square, xg_shape_rectangle &n-; these are the same. width and height passed to xg_shape_draw determine whether it&';s a square or rectangle.
.xg_shape_parallelogram uses transform:skew instead of border-radius.
xg_shape_circle, xg_shape_oval, xg_shape_ellipse &n-; these are the same. width and height passed to xg_shape_draw determine whether it&';s a circle or oval / ellipse. Technically ovals and ellipses are different. In my mind,they&';re not. Use whichever you like.
xg_shape_rounded_corners (10%), xg_shape_rounded_corners_more (25%)
xg_shape_egg, xg_shape_et are intended to be drawn on vertical rectangles (height > width). These classes produce those shapes when height=width*1.5
xg_shape_frog is intended to be drawn on a horizontal rectangle (width > height). This class produces that shape when width=height*1.5
xg_shape_eye usually used with a square
xg_shape_eyebrow &n-; add border-top:1px solid black to style, vary border-top attributes as needed
xg_shape_smile is an upside-down eyebrow
xg_shape_smile2 is a thicker smile. Use a tall rectangle that&';s 4 times as high as wide. 12px,45px works well. Add border-left:10px solid black;transform:rotate(-90deg)
xg_shape_moustache is smile2 upside down. Use a tall rectangle that&';s 4 times as high as wide. 12px,45px works well. Add border-left:10px solid black;transform:rotate(90deg)
xg_shape_nose use a square or vertical rectangle. xg_shape_nose2 uses a square with border-right and border-bottom only. xg_shape_nose3_left creates a left-pointing nose. Specify on a long rectangle (width=2*height) with border-right and border-bottom only. xg_shape_nose3_right &n-; Specify on a tall rectangle height=2*width with border-left and border-top only.
xg_shape_ear_left, xg_shape_ear_right use a square, possibly a rectangle
xg_shape_lemon drawn on a square. Specify entire border
xg_shape_bread_slice drawn on a square.
xg_shape_petal drawn on a horizontal rectangle width=1.5*height. xg_shape_petal2 drawn on a vertical rectangle height=1.5*width. xg_shape_balloon is also drawn on this vertical rectangle.
xg_shape_clip_circle, xg_shape_clip_ellipse, xg_shape_clip_octagon, xg_shape_clip_inset_square, xg_shape_clip_inset_rectangle, xg_shape_clip_polygon_square, xg_shape_clip_polygon_rectangle, xg_shape_clip_n,v,x,y,z provide alternate ways of drawing these shapes. ...inset... and ...polygon... should produce the same results.
Places to look for other shape classes:
clip-path