(docs): add a centered gif to the top

- similar to how some libraries do it as well as to the centered logo
  pattern
  - was considering centering the header and badges too, but I think
    that made it harder to read and feel more messy / not as clean
  - also considered leaving the buttons of the example in the gif to
    display some features like trimming, but that seemed to add
    confusion to the fact that there are no other elements besides the
    canvas in this fork

- also change "React Signature Canvas" to "react-signature-canvas" as
  that's the package's name
  - this is an old artifact from react-signature-pad that I hadn't
    changed since the fork

- remove a newline after the nodeico badge so the whole intro still
  fits on mobile without needing to click into the README

Author: agilgur5

README.md

@@ -1,4 +1,9 @@
-# React Signature Canvas
+<!-- markdownlint-disable first-line-heading -->
+<p align='center'>
+  <img height='200' src='https://media.giphy.com/media/KH1emXYVIh1hT6UrrU/giphy.gif' />
+</p>
+
+# react-signature-canvas
 
 <!-- releases / versioning -->
 [![package-json](https://img.shields.io/github/package-json/v/agilgur5/react-signature-canvas.svg)](https://npmjs.org/package/react-signature-canvas)
@@ -14,7 +19,7 @@
 [![code coverage](https://img.shields.io/codecov/c/gh/agilgur5/react-signature-canvas/master.svg)](https://codecov.io/gh/agilgur5/react-signature-canvas)
 <br>
 [![NPM](https://nodei.co/npm/react-signature-canvas.png?downloads=true&downloadRank=true&stars=true)](https://npmjs.org/package/react-signature-canvas)
-
+<br>
 A React wrapper component around [signature_pad](https://github.com/szimek/signature_pad).
 
 Originally, this was just an _unopinionated_ fork of [react-signature-pad](https://github.com/blackjk3/react-signature-pad) that did not impose any styling or wrap any other unwanted elements around your canvas -- it's just a wrapper around a single canvas element!