Rough.js faz gráficos desenhados à mão com tela e SVG

É incrível ver até onde a web chegou elementos dinâmicos tal como SVGs no navegador. Você pode projetar tudo, desde animações personalizadas para Jogos em HTML5 com as bibliotecas certas.

Uma das mais novas bibliotecas que vale a pena testar é Rough.js. É um roteiro de geração de gráficos grátis atualmente em beta que funciona em tela e elementos SVG.

Você pode criar ícones personalizados, gráficos de barra, praticamente tudo o que quiser no código. E o resultado final assume um lindo sentimento desenhado à mão.

Como desta escrita, Rough.js ainda está em v0.1 beta, por isso pode não estar pronto para um site de produção ao vivo. Mas é uma prova de que padrões da web estão progredindo rapidamente e estamos entrando em uma era em que esse tipo de coisa é possível.

Tomemos por exemplo isso Barra de progresso gerado através de Rough.js. Se você clicar no “Começar” botão você vai notar executa uma animação personalizada naquela realmente parece desenhado à mão. Está usando Linhas SVG com padrões predefinidos para criar um efeito vacilante que parece verdadeiramente natural.

Na página principal do GitHub, você encontrará uma listagem de seções muitos exemplos de Rough.js em ação.

Todos esses vem com amostras de código e deve ser muito fácil de retrabalhar para qualquer site. Tudo que você precisa é o arquivo de script Rough.js e alguma paciência para mexer com o JavaScript.

Aqui está um snippet de amostra demonstrando como criar um retângulo no código:

 var rough = new RoughCanvas (document.getElementById ('myCanvas'), 400, 200); retângulo rugoso (10, 10, 200, 200); // x, y, largura, altura 

Muito simples quando você entende o código, mas provavelmente não é o script mais intuitivo para iniciantes.

Se você quiser mais snippets de código e demonstrações de amostra confira a página inicial do Rough.js. É o lugar perfeito para começar a aprender e encontrar trechos de código que você pode retrabalhar.

Além disso, se você tiver dúvidas ou sugestões para recursos adicionais, poderá enviar uma mensagem ao criador do Rough.js no Twitter @preetster.