Save notes into separate file names. Type in both a file name and notes. Click save file. The next time you visit the page, type in the file name and click Show File. Files can also be deleted. The site uses Javascript Local Storage to save information. The information stored does not go to the server. The stored information is not secured and can be accessed by looking at the developer tools of the browser. Each time a file is saved it's added to the File List. Click on File List to show prior file names. HTML can also be supported in the notes. When Show File is clicked, the HTML will be displayed above the File Name. After creating code, save the file with a name to show the updated code.

SVG allows graphics to be created inside the HTML. Create and end the graphics area with the SVG button. Insert Circle, Rectangle and Text within the SVG tags. SVG Code Example of a Stick Figure

<svg> <circle cx=20 cy=30 r=15 stroke=black stroke-width=2 fill=white /> <line x1=20 y1=45 x2=20 y2=100 stroke=black stroke-width=2 /> <line x1=0 y1=65 x2=40 y2=65 stroke=black stroke-width=2 /> <line x1=20 y1=100 x2=40 y2=120 stroke=black stroke-width=2 /> <line x1=0 y1=120 x2=20 y2=100 stroke=black stroke-width=2 /> </svg>

SVG Code Example of Two Stick Figures

<svg> <circle cx=20 cy=30 r=15 stroke=black stroke-width=2 fill=white /><line x1=20 y1=45 x2=20 y2=100 stroke=black stroke-width=2 /><line x1=0 y1=65 x2=40 y2=65 stroke=black stroke-width=2 /><line x1=20 y1=100 x2=40 y2=120 stroke=black stroke-width=2 /><line x1=0 y1=120 x2=20 y2=100 stroke=black stroke-width=2 /> <svg x=200> <circle cx=20 cy=30 r=15 stroke=black stroke-width=2 fill=white /><line x1=20 y1=45 x2=20 y2=100 stroke=black stroke-width=2 /><line x1=0 y1=65 x2=40 y2=65 stroke=black stroke-width=2 /><line x1=20 y1=100 x2=40 y2=120 stroke=black stroke-width=2 /><line x1=0 y1=120 x2=20 y2=100 stroke=black stroke-width=2 /> </svg> </svg>

SVG Code Example of They Don't Know Meme

Copy and paste the text below into the Notes area above. Then change the text. Make a file name and click Save File to save changes and show the meme.
<svg> <svg> <circle cx=20 cy=30 r=15 stroke=black stroke-width=2 fill=white /><line x1=20 y1=45 x2=20 y2=100 stroke=black stroke-width=2 /><line x1=0 y1=65 x2=40 y2=65 stroke=black stroke-width=2 /><line x1=20 y1=100 x2=40 y2=120 stroke=black stroke-width=2 /><line x1=0 y1=120 x2=20 y2=100 stroke=black stroke-width=2 /> <text x=29 y=15 fill=black>They don't know <tspan x=45 y=29>memes</tspan> </text> <line x1=3 y1=75 x2=400 y2=75 stroke=black stroke-width=1 /> <line x1=3 y1=75 x2=0 y2=85 stroke=black stroke-width=1 /> <line x1=3 y1=75 x2=3 y2=0 stroke=black stroke-width=1 /> <svg x=200> <circle cx=20 cy=30 r=15 stroke=black stroke-width=2 fill=white /><line x1=20 y1=45 x2=20 y2=100 stroke=black stroke-width=2 /><line x1=0 y1=65 x2=40 y2=65 stroke=black stroke-width=2 /><line x1=20 y1=100 x2=40 y2=120 stroke=black stroke-width=2 /><line x1=0 y1=120 x2=20 y2=100 stroke=black stroke-width=2 /> </svg> <svg x=220 y=20> <circle cx=20 cy=30 r=15 stroke=black stroke-width=2 fill=white /><line x1=20 y1=45 x2=20 y2=100 stroke=black stroke-width=2 /><line x1=0 y1=65 x2=40 y2=65 stroke=black stroke-width=2 /><line x1=20 y1=100 x2=40 y2=120 stroke=black stroke-width=2 /><line x1=0 y1=120 x2=20 y2=100 stroke=black stroke-width=2 /> </svg> <svg x=150 y=50> <circle cx=20 cy=30 r=15 stroke=black stroke-width=2 fill=white /><line x1=20 y1=45 x2=20 y2=100 stroke=black stroke-width=2 /><line x1=0 y1=65 x2=40 y2=65 stroke=black stroke-width=2 /><line x1=20 y1=100 x2=40 y2=120 stroke=black stroke-width=2 /><line x1=0 y1=120 x2=20 y2=100 stroke=black stroke-width=2 /> </svg> <svg x=120 y=58> <circle cx=20 cy=30 r=15 stroke=black stroke-width=2 fill=white /><line x1=20 y1=45 x2=20 y2=100 stroke=black stroke-width=2 /><line x1=0 y1=65 x2=40 y2=65 stroke=black stroke-width=2 /><line x1=20 y1=100 x2=40 y2=120 stroke=black stroke-width=2 /><line x1=0 y1=120 x2=20 y2=100 stroke=black stroke-width=2 /> </svg> </svg>

SVG Example: Four Squares with text on left and pictures on right. Copy and paste the code below to the notes area above. To get different pictures, paste the complete url including http:// after "image href=". Make changes and click Save File to show the changes. Screenshot to save it.

<svg height=300 width=300> <line x1=0 y1=150 x2=300 y2=150 stroke=black stroke-width=2 /> <text x=5 y=75 fill=black>Miami</text> <text x=5 y=225 fill=black>Paris</text> <image href=Miami.jpg height=150 width=150 x=150 y=0></image> <image href=Louvre.jpg height=150 width=150 x=150 y=151></image> </svg>

SVG Example: Image with Text Above. To get a different picture, paste the complete url including http:// after "image href=". Make changes and click Save File to show the changes. Screenshot to save it.

<svg height=300 width=300> <line x1=0 y1=150 x2=300 y2=150 stroke=black stroke-width=2 /> <svg height=300 width=300> <text x=5 y=15 fill=black>Miami</text> <image href=Miami.jpg height=300 width=300 x=0 y=30></image> </svg> </svg>
+Local Storage +SVG Nesting

Copyright 2020 Joseph Sunny, Jr.