drawing implements for raphael.js tricks

for nonsense. no promises. poor support/performance.

see project page at github

  • circularArc
  • spiral
  • line
  • regularPolygon
  • drawnLine
  • drawnRect
  • drawnCircularArc
  • drawnRegularPolygon
  • radialRepeater
  • grid
  • doToGrid
  • randomColoredGrid
  • randomColoredObjectGrid
  • randomCoordsOnACircle
  •  
  • fullpaper
  • other

Attributes are these: (centerX, centerY, radius, startAngle, endAngle)

<p><b><a href='the55.net/_11/sketch/0316'>see it in action</a></b></p>

Attributes are: (centerX, centerY, spacing, maxRadius)

Attributes are: (x, y, x2, y2)

Attributes are: (centerX, centerY, radius, numberOfSides)

Attributes are these: x, y, x2, y2, wobble

<p><b><a href='the55.net/_11/sketch/drawn_line'>see it in action</a></b></p>

Attributes are these: x, y, width, height, wobble

Attributes are: (centerX, centerY, radius, startAngle, endAngle)

<p><b><a href='http://the55.net/_11/sketch/75arcs'>see it in action</a></b></p>

Attributes are: (centerX, centerY, radius, numberOfSides, wobblyNess). 10 is a good start for wobblyNess

Attributes are: (centerX, centerY, radius, repetitions, object, options). Options do nothing. Object is extremely limited (try rect). Yay.

Attributes are: (color, spacingX, spacingY). This just draws lines.

Attributes are: (function, width, height). <br> this, you pass a function that returns a raphael drawn object. that object will be repeated on a grid with the width and height provided.

<p><b><a href='http://the55.net/_11/sketch/eccentrics2'>see it in action</a></b></p>

Attributes are: (colors, object, spacing). <br>Ok this is tricky. <br>colors is an array of colors like ['#999999', '#FC0', 'red']. <br>Object is a Raphael object that responds to fill. <br>Spacing is x and y grid spacing.

Attributes are: (colors, objects, spacing). <br><br>like the randomColoredGrid <br>objects is an array of Raphael objects that responds to fill

<p><b><a href='http://the55.net/_11/sketch/bike-grid'>see it in action</a></b></p>

takes: (centerX, centerY, radius). returns: something that responds to .x and .y

alternative to calling .paper(). returns a paper that fills the whole window.

if you feel the need to roll your own, you can look at the source for methods like 'randomize', 'drawnMidpoints', 'circularArcString', 'arcString', 'rotateAroundCenter', 'rotateForever'

  • sketches
  • projects
  • resources
  • flickr
  • twitter
  • art blog