visual-docs icon indicating copy to clipboard operation
visual-docs copied to clipboard

Diagrams and animations documenting Secure Scuttlebutt (scuttlebutt.nz) and Āhau (ahau.io)

Visual Docs

Diagrams and animations documenting SSB and Āhau

Made as Scalable Vector Graphic (SVG) files. Animations primarily written with anime.js, and converted to CSS animation. These are made to accompany and illustrate text explanations.

Table of Contents

  • Documentation
  • Animations
  • Icons

Documentation

  • How to use animations
    • in a website
    • on social media / ssb / github
  • How to edit animations
    • editing SVG
    • changing fonts
    • editing CSS
    • editing anime.js
    • converting an anime.js timeline to CSS
  • How to make videos or GIFs
    • recording your screen
    • converting to gif
  • How to make static images
    • making static SVG
    • making PNG
    • making JPEG

Animations

Replication: connecting via a pātaka

Replication: connecting locally

Replication: Multiple pātaka

Data on a Pātaka

Three groups have their data backed up and synchronized on a Pātaka. Group members can only access files from their own groups - the Pātaka will update them with new data when they connect. Kaitiaki / sysadmin cannot access the files, they can only see which group created them. People can be members of more than one group.

Infrastructure Comparison

Example text: With a 'normal' internet service, your data may be housed in a large corporate data center overseas.

Example text: A Pātaka server can be a small, simple device or a large professional setup, depending on your needs and preferences.

Port Forwarding

1. Explanation of ports, and a request for a specific port

2. Explanation of port forwarding


Icons

Examples of the style and format of icons, in 48px and 96px:

Ethernet icon (48px) Laptop icon (48px) Mobile icon (48px)

Router icon (48px) Static IP Address icon(48px) WiFi icon(48px) Internet icon(48px)

Ethernet icon (96px) Laptop icon (96px) Mobile icon (96px)

Router icon (96px) Static IP Address icon(96px) WiFi icon(96px) Internet icon(96px)

The animation in the WiFi, Internet and Router icons can be removed by deleting or commenting out the <style>...</style> section of the SVG.