Aarc Pattern with jQuery


Tile Size
Enable Corner Radius Border Width Border Color Inside Color

« It should look like this

The design above needs Firefox or a Webkit based broswer to get the full effect — everything hinges upon the rounded corner attributes.

After last week's experiment, I dived deeper into jQuery, this time revisiting an old idea. I first developed the Aarc Pattern using Processing.

You can make your own pattern by changing the values of the arcs. That's what all those silly text fields are for. I even had to wrap them in a table (gasp!). Color selection is made possible with Steven Witten's Farbtastic color picker plug-in.

It's still very rough right now. The UI is a mess, so I've got plenty of room for improvement there. But I'm happy that I finally made a toy that other people can actually use.