Drawing anything using modern web technologies is possible, however, the default APIs are not that user-friendly.

Two.js is an exciting JavaScript library that provides a 2-dimensional and single drawing API for SVG, Canvas And WebGL.

The library has only (currently) support for shapes (no text or images) and allows importing SVG data.

It can group multiple elements which is useful when transforming them together.

There is a built-in animation loop, methods to draw well-known shapes and lots of options to customize them.

Kartograph is a framework for creating interactive maps without any mapping provider (like Google Maps).

It consists of 2 libraries:

• a Python library thatrenders vector maps from shapefiles or PostGIS and converts them to SVG
• a JavaScript library for turning these SVG data into interactive maps

If you already have the SVG data (for ex: any drawing can be converted to SVG with Adobe Illustrator), only the JavaScript library can help too.

The JS library uses jQuery + Raphaël, outputs can be styled with CSS and a very good documentation is provided.

Maps are used so widely in web design and they are usually expected to be interactive when presenting data.

It can be the branches of an international company, statistics about  countries or just destinations to visualize. Like said, lots of uses.

Simplemaps is a website that provides professional, highly-customizable and interactive maps built with JavaScript and SVG (or Flash).

SVG has a wide browser-support and it works very well on mobile + tablet as well.

There are maps for “world/countries, continents, USA and Canada” and the usage +customization doesn’t require advanced development knowledge. It works by simply editing a text file and a detailed, step-by-step documentation exists.

Also, Simplemaps website has an online customization tool that enables the users to edit the countries, change colors, descriptions, links and more.

Considering that the maps are in vector (SVG), tiny or huge, they work great on all sizes. And, they even come with a zoom-in functionality.

With some JavaScript, it is so easy to add new features to them like tooltips, selectable regions and much more.

To sum up, SVG maps are definitely the way to go for modern web maps and Simplemaps has a wide range of products on the field.

P.S. For Flash fans, the website also offers similar maps in Flash with their source code.

How to join the giveaway?

Simplemaps is giving away 3 licenses (for a map of your selection). Commenting to this post is enough.

Winners will be selected on 22 April 2013 (1 week later) with the query below and announced as an update to this post.:

SELECT * FROM wp_comments WHERE comment_post_id=3981 AND comment_approved=1 AND comment_type='' GROUP BY comment_author_email ORDER BY RAND() LIMIT 3

Good luck to all.

The winners

Here they are:

• Roshin C (comment #1260748)
• Jed (comment #1260726)
• DR (comment #1260708)

1260708

You may remember CSS3 Patterns Gallery that was created by Lea Verou which is a great idea for flexible patterns.

Here is an alternative: SVG Patterns Gallery that uses only SVG for creating good-looking patterns.

Compared to standard images, SVG scales perfectly, high-dpi screens can make use of it and it works on IE9 too (CSS3 gradients don’t).

SVG.js is a JavaScript library for working (manipulating and animating) with SVG without any complexity.

The library is standalone, very lightweight in size (5kb gzipped) and has lots of features.

There are built-in methods for creating shapes (rectangle, circle, polygon, etc.) or defining images.

They can all be animated with size, position, color or any other properties and be interacted with standard JavaScript events.

It has support for grouping elements for mass manipulations, filling them is possible and a unified API simplifies working with the library.

SVG.js is extendable with plugins and there are already various plugins (like dragging or easing).

There are various free icon fonts out there and, with the increasing use, new ones are being created each day.

MFG Labs Icons is one of them, it is a slick, free and pretty complete icon font.

It is a web app-themed set considering most of them are actions (and there are social items as well).

The download package includes all the popular web-font formats and the styles for them.

Lazy Line Painter is a pretty original jQuery plugin for preparing and presenting SVG path animations using  jQuery.

It works for any SVG file (any design can be exported with Illustrator in seconds) and simply by drag ‘n’ dropping it to an online generator provided by the plugin.

And, after that, just insert that code into any web page and it will work.

Various options exist for customization including the stroke width, color, speed and a callback that is triggered once the animation is completed.

The plugin requires Raphaël besides jQuery and can be a nice way of presenting illustrations for graphic designers.

When working on any mapping-related projects (like Google Maps integration), icons built specifically for them can be very handy.

Maki is a free set of “point of interest” icons that is perfect for web-based mapping interfaces.

The set includes 73 icons, comes in 3 sizes and both in PNG + SVG.

Besides standard markers, there are items for airport, bus station, police, restaurant, grocery and more.

IcoMoon is a free service that enables us to create custom icon sets and icon fonts using different sets.

The application includes most of the popular and free icon sets (that can be selected from its library), we can choose which ones to use and select any number of items from them.

Once the selection is over, it offers 2 types of downloads: image and font.

The image version comes as PNG with optional sprite image + the CSS rules and the font version in multiple formats (EOT, SVG, WOFF, TTF).

Also, besides the icons of other designers, IcoMoon has its own and free icon set which is pretty huge and slick.

For anyone developing games, there is always a huge demand of high-quality graphics for the characters, objects, backgrounds and more.

Game-Icons is a project providing 900+ free icons (and growing) to be used for games but they can also be used for any other projects.

The items are in .SVG and .PNG formats, they are very well-categorized and can be used in commercial projects as well.