HTML_Drawing.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "![alt text](https://github.com/callysto/callysto-sample-notebooks/blob/master/notebooks/images/Callysto_Notebook-Banner_Top_06.06.18.jpg?raw=true)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Drawing in HTML and SVG\n",
    "\n",
    "Sometimes we just need a quick drawing within a Jupyter notebook. A quick way to do this is in an HTML cell, using Scalable Vector Graphics elements (or SVG).\n",
    "\n",
    "The idea is straightforward. We create an html cell, put an svg canvas in it, then draw some objects in it. Here are two simple examples. "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Example 1\n",
    "\n",
    "Here we set up an svg canvas of size 100x100, and draw a circle in it. Note how we set the position and radius of the circle. \n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<html>\n",
       "<body>\n",
       "\n",
       "<h1>My first SVG</h1>\n",
       "\n",
       "<svg width=\"100\" height=\"100\">\n",
       "  <circle cx=\"50\" cy=\"50\" r=\"40\" stroke=\"green\" stroke-width=\"4\" fill=\"yellow\" />\n",
       "</svg>\n",
       "\n",
       "</body>\n",
       "</html>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html\n",
    "<html>\n",
    "<body>\n",
    "\n",
    "<h1>My first SVG</h1>\n",
    "\n",
    "<svg width=\"100\" height=\"100\">\n",
    "  <circle cx=\"50\" cy=\"50\" r=\"40\" stroke=\"green\" stroke-width=\"4\" fill=\"yellow\" />\n",
    "</svg>\n",
    "\n",
    "</body>\n",
    "</html>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Example 2\n",
    "\n",
    "Here we make a bigger canvas, add two circles and a transparent square. Notice the interesting syntax that we can use to specify the drawing style for the circles and squares."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<html>\n",
       "<body>\n",
       "\n",
       "<h1>My second SVG example</h1>\n",
       "\n",
       "<svg width=\"250\" height=\"200\">\n",
       "  <circle cx=\"50\" cy=\"50\" r=\"40\" stroke=\"green\" stroke-width=\"4\" fill=\"yellow\" />\n",
       "  <circle cx=\"150\" cy=\"150\" r=\"30\" stroke=\"red\" stroke-width=\"4\" fill=\"green\" />\n",
       "  <rect x=\"50\" y=\"20\" width=\"150\" height=\"150\"\n",
       "  style=\"fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9\" />\n",
       "</svg>\n",
       "\n",
       "</body>\n",
       "</html>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html\n",
    "<html>\n",
    "<body>\n",
    "\n",
    "<h1>My second SVG example</h1>\n",
    "\n",
    "<svg width=\"250\" height=\"200\">\n",
    "  <circle cx=\"50\" cy=\"50\" r=\"40\" stroke=\"green\" stroke-width=\"4\" fill=\"yellow\" />\n",
    "  <circle cx=\"150\" cy=\"150\" r=\"30\" stroke=\"red\" stroke-width=\"4\" fill=\"green\" />\n",
    "  <rect x=\"50\" y=\"20\" width=\"150\" height=\"150\"\n",
    "  style=\"fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9\" />\n",
    "</svg>\n",
    "\n",
    "</body>\n",
    "</html>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Further information\n",
    "\n",
    "To learn more about drawing in HTML and SVG, check out this tutorial: https://www.w3schools.com/graphics/svg_intro.asp"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "![alt text](https://github.com/callysto/callysto-sample-notebooks/blob/master/notebooks/images/Callysto_Notebook-Banners_Bottom_06.06.18.jpg?raw=true)"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.5"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}