├── LICENSE.md ├── README.md ├── ROADMAP.md ├── documentation ├── Editing-Animations.md ├── Making-Static-Images.md ├── Making-Video-or-GIF.md ├── Using-Animations.md └── img │ ├── folded-js.png │ └── folded-svg.png ├── font └── base64-font_dosis.css ├── js ├── LICENSE ├── README.md └── convert-anime-to-css.js ├── png ├── README.md ├── ethernet_48.png ├── ethernet_96.png ├── internet_48.png ├── internet_96.png ├── laptop_48.png ├── laptop_96.png ├── mobile_48.png ├── mobile_96.png ├── router_48.png ├── router_96.png ├── static-ip_48.png ├── static-ip_96.png ├── wifi_48.png └── wifi_96.png └── svg ├── alternative-servers.svg ├── color-scheme.svg ├── corporate-server.svg ├── data-on-a-pātaka_anime.svg ├── data-on-a-pātaka_css.svg ├── icons ├── README.md ├── ethernet_48.svg ├── ethernet_96.svg ├── internet_48.svg ├── internet_96.svg ├── laptop_48.svg ├── laptop_96.svg ├── mobile_48.svg ├── mobile_96.svg ├── router_48.svg ├── router_96.svg ├── static-ip_48.svg ├── static-ip_96.svg ├── wifi_48.svg └── wifi_96.svg ├── multiple-pātaka_anime.svg ├── multiple-pātaka_css.svg ├── port-forwarding.svg ├── port-forwarding_01_without-port-forwarding.svg ├── port-forwarding_02_with-port-forwarding.svg ├── replication-local_anime.svg ├── replication-local_css.svg ├── replication-via-internet_anime.svg └── replication-via-internet_css.svg /LICENSE.md: -------------------------------------------------------------------------------- 1 | # Creative Commons Legal Code 2 | 3 | ## Attribution-ShareAlike 4.0 International 4 | 5 | Official translations of this license are available [in other 6 | languages](#languages). 7 | 8 | Creative Commons Corporation (“Creative Commons”) is not a law firm and 9 | does not provide legal services or legal advice. Distribution of 10 | Creative Commons public licenses does not create a lawyer-client or 11 | other relationship. Creative Commons makes its licenses and related 12 | information available on an “as-is” basis. Creative Commons gives no 13 | warranties regarding its licenses, any material licensed under their 14 | terms and conditions, or any related information. Creative Commons 15 | disclaims all liability for damages resulting from their use to the 16 | fullest extent possible. 17 | 18 | ### Using Creative Commons Public Licenses 19 | Creative Commons public licenses provide a standard set of terms and 20 | conditions that creators and other rights holders may use to share 21 | original works of authorship and other material subject to copyright and 22 | certain other rights specified in the public license below. The 23 | following considerations are for informational purposes only, are not 24 | exhaustive, and do not form part of our licenses. 25 | 26 | **Considerations for licensors:** Our public licenses are intended for 27 | use by those authorized to give the public permission to use material in 28 | ways otherwise restricted by copyright and certain other rights. Our 29 | licenses are irrevocable. Licensors should read and understand the terms 30 | and conditions of the license they choose before applying it. Licensors 31 | should also secure all rights necessary before applying our licenses so 32 | that the public can reuse the material as expected. Licensors should 33 | clearly mark any material not subject to the license. This includes 34 | other CC-licensed material, or material used under an exception or 35 | limitation to copyright. 36 | [More considerations for licensors.](//wiki.creativecommons.org/Considerations_for_licensors_and_licensees#Considerations_for_licensors) 37 | 38 | **Considerations for the public:** By using one of our public licenses, 39 | a licensor grants the public permission to use the licensed material 40 | under specified terms and conditions. If the licensor’s permission is 41 | not necessary for any reason–for example, because of any applicable 42 | exception or limitation to copyright–then that use is not regulated by 43 | the license. Our licenses grant only permissions under copyright and 44 | certain other rights that a licensor has authority to grant. Use of the 45 | licensed material may still be restricted for other reasons, including 46 | because others have copyright or other rights in the material. A 47 | licensor may make special requests, such as asking that all changes be 48 | marked or described. Although not required by our licenses, you are 49 | encouraged to respect those requests where reasonable. 50 | [More considerations for the public.](//wiki.creativecommons.org/Considerations_for_licensors_and_licensees#Considerations_for_licensees) 51 | 52 | ### Creative Commons Attribution-ShareAlike 4.0 International Public License 53 | By exercising the Licensed Rights (defined below), You accept and agree 54 | to be bound by the terms and conditions of this Creative Commons 55 | Attribution-ShareAlike 4.0 International Public License ("Public 56 | License"). To the extent this Public License may be interpreted as a 57 | contract, You are granted the Licensed Rights in consideration of Your 58 | acceptance of these terms and conditions, and the Licensor grants You 59 | such rights in consideration of benefits the Licensor receives from 60 | making the Licensed Material available under these terms and conditions. 61 | 62 | #### Section 1 – Definitions. 63 | 64 | 65 | ##### a. 66 | 67 | _Adapted Material_ means material subject to Copyright and Similar 68 | Rights that is derived from or based upon the Licensed Material and 69 | in which the Licensed Material is translated, altered, arranged, 70 | transformed, or otherwise modified in a manner requiring permission 71 | under the Copyright and Similar Rights held by the Licensor. For 72 | purposes of this Public License, where the Licensed Material is a 73 | musical work, performance, or sound recording, Adapted Material is 74 | always produced where the Licensed Material is synched in timed 75 | relation with a moving image. 76 | 77 | ##### b. 78 | 79 | _Adapter's License_ means the license You apply to Your Copyright 80 | and Similar Rights in Your contributions to Adapted Material in 81 | accordance with the terms and conditions of this Public License. 82 | 83 | ##### c. 84 | 85 | _BY-SA Compatible License_ means a license listed at 86 | [creativecommons.org/compatiblelicenses](//creativecommons.org/compatiblelicenses), 87 | approved by Creative Commons as essentially the equivalent of this 88 | Public License. 89 | 90 | ##### d. 91 | 92 | _Copyright and Similar Rights_ means copyright and/or similar 93 | rights closely related to copyright including, without limitation, 94 | performance, broadcast, sound recording, and Sui Generis Database 95 | Rights, without regard to how the rights are labeled or categorized. 96 | For purposes of this Public License, the rights specified in Section 97 | [2(b)(1)-(2)](#s2b) are not Copyright and Similar Rights. 98 | 99 | ##### e. 100 | 101 | _Effective Technological Measures_ means those measures that, in 102 | the absence of proper authority, may not be circumvented under laws 103 | fulfilling obligations under Article 11 of the WIPO Copyright Treaty 104 | adopted on December 20, 1996, and/or similar international 105 | agreements. 106 | 107 | ##### f. 108 | 109 | _Exceptions and Limitations_ means fair use, fair dealing, and/or 110 | any other exception or limitation to Copyright and Similar Rights 111 | that applies to Your use of the Licensed Material. 112 | 113 | ##### g. 114 | 115 | _License Elements_ means the license attributes listed in the name 116 | of a Creative Commons Public License. The License Elements of this 117 | Public License are Attribution and ShareAlike. 118 | 119 | ##### h. 120 | 121 | _Licensed Material_ means the artistic or literary work, database, 122 | or other material to which the Licensor applied this Public License. 123 | 124 | ##### i. 125 | 126 | _Licensed Rights_ means the rights granted to You subject to the 127 | terms and conditions of this Public License, which are limited to 128 | all Copyright and Similar Rights that apply to Your use of the 129 | Licensed Material and that the Licensor has authority to license. 130 | 131 | ##### j. 132 | 133 | _Licensor_ means the individual(s) or entity(ies) granting rights 134 | under this Public License. 135 | 136 | ##### k. 137 | 138 | _Share_ means to provide material to the public by any means or 139 | process that requires permission under the Licensed Rights, such as 140 | reproduction, public display, public performance, distribution, 141 | dissemination, communication, or importation, and to make material 142 | available to the public including in ways that members of the public 143 | may access the material from a place and at a time individually 144 | chosen by them. 145 | 146 | 147 | ##### l. 148 | 149 | _Sui Generis Database Rights_ means rights other than copyright 150 | resulting from Directive 96/9/EC of the European Parliament and of 151 | the Council of 11 March 1996 on the legal protection of databases, 152 | as amended and/or succeeded, as well as other essentially equivalent 153 | rights anywhere in the world. 154 | 155 | ##### m. 156 | 157 | _You_ means the individual or entity exercising the Licensed 158 | Rights under this Public License. _Your_ has a corresponding 159 | meaning. 160 | 161 | #### Section 2 – Scope. 162 | 163 | ##### a. 164 | 165 | ###### License grant. 166 | 167 | 1. Subject to the terms and conditions of this Public License, the 168 | Licensor hereby grants You a worldwide, royalty-free, 169 | non-sublicensable, non-exclusive, irrevocable license to 170 | exercise the Licensed Rights in the Licensed Material to: 171 | 172 | - A. reproduce and Share the Licensed Material, in whole or in 173 | part; and 174 | 175 | - B. produce, reproduce, and Share Adapted Material. 176 | 177 | 2. **Exceptions and Limitations**. For the 178 | avoidance of doubt, where Exceptions and Limitations apply to 179 | Your use, this Public License does not apply, and You do not 180 | need to comply with its terms and conditions. 181 | 182 | 3. **Term**. The term of this 183 | Public License is specified in Section [6(a)](#s6a). 184 | 185 | 4. **Media and formats; technical modifications allowed**. The Licensor 186 | authorizes You to exercise the Licensed Rights in all media and 187 | formats whether now known or hereafter created, and to make 188 | technical modifications necessary to do so. The Licensor waives 189 | and/or agrees not to assert any right or authority to forbid You 190 | from making technical modifications necessary to exercise the 191 | Licensed Rights, including technical modifications necessary to 192 | circumvent Effective Technological Measures. For purposes of 193 | this Public License, simply making modifications authorized by 194 | this Section [2(a)(4)](#s2a4) never produces Adapted Material. 195 | 5. **Downstream recipients**. 196 | 197 | - A. **Offer from the Licensor – Licensed Material**. Every 198 | recipient of the Licensed Material automatically receives an 199 | offer from the Licensor to exercise the Licensed Rights 200 | under the terms and conditions of this Public License. 201 | 202 | - B. **Additional offer from the Licensor – Adapted Material**. Every 203 | recipient of Adapted Material from You automatically 204 | receives an offer from the Licensor to exercise the Licensed 205 | Rights in the Adapted Material under the conditions of the 206 | Adapter’s License You apply. 207 | 208 | - C. **No downstream restrictions**. You may 209 | not offer or impose any additional or different terms or 210 | conditions on, or apply any Effective Technological Measures 211 | to, the Licensed Material if doing so restricts exercise of 212 | the Licensed Rights by any recipient of the Licensed 213 | Material. 214 | 215 | 6. **No endorsement**. Nothing 216 | in this Public License constitutes or may be construed as 217 | permission to assert or imply that You are, or that Your use of 218 | the Licensed Material is, connected with, or sponsored, 219 | endorsed, or granted official status by, the Licensor or others 220 | designated to receive attribution as provided in Section 221 | [3(a)(1)(A)(i)](#s3a1Ai). 222 | 223 | ##### b. 224 | 225 | ###### Other rights. 226 | 1. Moral rights, such as the right of integrity, are not licensed 227 | under this Public License, nor are publicity, privacy, and/or 228 | other similar personality rights; however, to the extent 229 | possible, the Licensor waives and/or agrees not to assert any 230 | such rights held by the Licensor to the limited extent necessary 231 | to allow You to exercise the Licensed Rights, but not otherwise. 232 | 233 | 2. Patent and trademark rights are not licensed under this Public 234 | License. 235 | 236 | 3. To the extent possible, the Licensor waives any right to collect 237 | royalties from You for the exercise of the Licensed Rights, 238 | whether directly or through a collecting society under any 239 | voluntary or waivable statutory or compulsory licensing scheme. 240 | In all other cases the Licensor expressly reserves any right to 241 | collect such royalties. 242 | 243 | #### Section 3 – License Conditions. 244 | Your exercise of the Licensed Rights is expressly made subject to the 245 | following conditions. 246 | 247 | ##### a. 248 | 249 | ###### Attribution. 250 | **1.** If You Share the Licensed Material (including in modified form), 251 | You must: 252 | 253 | - **A.** retain the following if it is supplied by the Licensor with 254 | the Licensed Material: 255 | 256 | - i. identification of the creator(s) of the Licensed 257 | Material and any others designated to receive 258 | attribution, in any reasonable manner requested by the 259 | Licensor (including by pseudonym if designated); 260 | 261 | - ii. a copyright notice; 262 | 263 | - iii. a notice that refers to this Public License; 264 | - iv. a notice that refers to the disclaimer of warranties; 265 | - v. a URI or hyperlink to the Licensed Material to the 266 | extent reasonably practicable; 267 | 268 | - **B.** indicate if You modified the Licensed Material and retain an 269 | indication of any previous modifications; and 270 | 271 | - **C.** indicate the Licensed Material is licensed under this Public 272 | License, and include the text of, or the URI or hyperlink 273 | to, this Public License. 274 | 275 | **2.** You may satisfy the conditions in Section [3(a)(1)](#s3a1) in 276 | any reasonable manner based on the medium, means, and context in 277 | which You Share the Licensed Material. For example, it may be 278 | reasonable to satisfy the conditions by providing a URI or 279 | hyperlink to a resource that includes the required information. 280 | 281 | **3.** If requested by the Licensor, You must remove any of the 282 | information required by Section [3(a)(1)(A)](#s3a1A) to the 283 | extent reasonably practicable. 284 | 285 | ##### b. 286 | 287 | ###### ShareAlike. 288 | In addition to the conditions in Section [3(a)](#s3a), if You Share 289 | Adapted Material You produce, the following conditions also apply. 290 | 291 | 1. The Adapter’s License You apply must be a Creative Commons 292 | license with the same License Elements, this version or later, 293 | or a BY-SA Compatible License. 294 | 295 | 2. You must include the text of, or the URI or hyperlink to, the 296 | Adapter's License You apply. You may satisfy this condition in 297 | any reasonable manner based on the medium, means, and context in 298 | which You Share Adapted Material. 299 | 300 | 3. You may not offer or impose any additional or different terms or 301 | conditions on, or apply any Effective Technological Measures to, 302 | Adapted Material that restrict exercise of the rights granted 303 | under the Adapter's License You apply. 304 | 305 | #### Section 4 – Sui Generis Database Rights. 306 | Where the Licensed Rights include Sui Generis Database Rights that apply 307 | to Your use of the Licensed Material: 308 | 309 | ##### a. 310 | 311 | for the avoidance of doubt, Section [2(a)(1)](#s2a1) grants You the 312 | right to extract, reuse, reproduce, and Share all or a substantial 313 | portion of the contents of the database; 314 | 315 | ##### b. 316 | 317 | if You include all or a substantial portion of the database contents 318 | in a database in which You have Sui Generis Database Rights, then 319 | the database in which You have Sui Generis Database Rights (but not 320 | its individual contents) is Adapted Material, including for purposes 321 | of Section [3(b)](#s3b); and 322 | 323 | ##### c. 324 | 325 | You must comply with the conditions in Section [3(a)](#s3a) if You 326 | Share all or a substantial portion of the contents of the database. 327 | For the avoidance of doubt, this Section [4](#s4) supplements and does 328 | not replace Your obligations under this Public License where the 329 | Licensed Rights include other Copyright and Similar Rights. 330 | 331 | #### Section 5 – Disclaimer of Warranties and Limitation of Liability. 332 | 333 | ##### a. 334 | 335 | **Unless otherwise separately undertaken by the Licensor, to the 336 | extent possible, the Licensor offers the Licensed Material as-is and 337 | as-available, and makes no representations or warranties of any kind 338 | concerning the Licensed Material, whether express, implied, 339 | statutory, or other. This includes, without limitation, warranties 340 | of title, merchantability, fitness for a particular purpose, 341 | non-infringement, absence of latent or other defects, accuracy, or 342 | the presence or absence of errors, whether or not known or 343 | discoverable. Where disclaimers of warranties are not allowed in 344 | full or in part, this disclaimer may not apply to You.** 345 | 346 | ##### b. 347 | 348 | **To the extent possible, in no event will the Licensor be liable to 349 | You on any legal theory (including, without limitation, negligence) 350 | or otherwise for any direct, special, indirect, incidental, 351 | consequential, punitive, exemplary, or other losses, costs, 352 | expenses, or damages arising out of this Public License or use of 353 | the Licensed Material, even if the Licensor has been advised of the 354 | possibility of such losses, costs, expenses, or damages. Where a 355 | limitation of liability is not allowed in full or in part, this 356 | limitation may not apply to You.** 357 | 358 | ##### c. 359 | 360 | The disclaimer of warranties and limitation of liability provided 361 | above shall be interpreted in a manner that, to the extent possible, 362 | most closely approximates an absolute disclaimer and waiver of all 363 | liability. 364 | 365 | #### Section 6 – Term and Termination. 366 | 367 | ##### a. 368 | 369 | This Public License applies for the term of the Copyright and 370 | Similar Rights licensed here. However, if You fail to comply with 371 | this Public License, then Your rights under this Public License 372 | terminate automatically. 373 | 374 | ##### b. 375 | 376 | Where Your right to use the Licensed Material has terminated under 377 | Section [6(a)](#s6a), it reinstates: 378 | 1. 379 | 380 | automatically as of the date the violation is cured, provided it 381 | is cured within 30 days of Your discovery of the violation; or 382 | 2. 383 | 384 | upon express reinstatement by the Licensor. 385 | For the avoidance of doubt, this Section [6(b)](#s6b) does not 386 | affect any right the Licensor may have to seek remedies for Your 387 | violations of this Public License. 388 | 389 | ##### c. 390 | 391 | For the avoidance of doubt, the Licensor may also offer the Licensed 392 | Material under separate terms or conditions or stop distributing the 393 | Licensed Material at any time; however, doing so will not terminate 394 | this Public License. 395 | 396 | ##### d. 397 | 398 | Sections [1](#s1), [5](#s5), [6](#s6), [7](#s7), and [8](#s8) 399 | survive termination of this Public License. 400 | 401 | #### Section 7 – Other Terms and Conditions. 402 | 403 | ##### a. 404 | 405 | The Licensor shall not be bound by any additional or different terms 406 | or conditions communicated by You unless expressly agreed. 407 | 408 | ##### b. 409 | 410 | Any arrangements, understandings, or agreements regarding the 411 | Licensed Material not stated herein are separate from and 412 | independent of the terms and conditions of this Public License. 413 | 414 | #### Section 8 – Interpretation. 415 | 416 | ##### a. 417 | 418 | For the avoidance of doubt, this Public License does not, and shall 419 | not be interpreted to, reduce, limit, restrict, or impose conditions 420 | on any use of the Licensed Material that could lawfully be made 421 | without permission under this Public License. 422 | 423 | ##### b. 424 | 425 | To the extent possible, if any provision of this Public License is 426 | deemed unenforceable, it shall be automatically reformed to the 427 | minimum extent necessary to make it enforceable. If the provision 428 | cannot be reformed, it shall be severed from this Public License 429 | without affecting the enforceability of the remaining terms and 430 | conditions. 431 | 432 | ##### c. 433 | 434 | No term or condition of this Public License will be waived and no 435 | failure to comply consented to unless expressly agreed to by the 436 | Licensor. 437 | 438 | ##### d. 439 | 440 | Nothing in this Public License constitutes or may be interpreted as 441 | a limitation upon, or waiver of, any privileges and immunities that 442 | apply to the Licensor or You, including from the legal processes of 443 | any jurisdiction or authority. 444 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Visual Docs 2 | **Diagrams and animations documenting SSB and Āhau** 3 | 4 | Made as Scalable Vector Graphic (SVG) files. Animations primarily written with [anime.js](https://animejs.com), and converted to CSS animation. 5 | These are made to accompany and illustrate text explanations. 6 | 7 | ## Table of Contents 8 | - [Documentation](#documentation) 9 | - [Animations](#animations) 10 | - [Icons](#icons) 11 | 12 | ---- 13 | 14 | ### Documentation 15 | - [**How to use animations**](documentation/Using-Animations.md) 16 | - [in a website](documentation/Using-Animations.md#using-animations-in-a-website) 17 | - [on social media / ssb / github](documentation/Using-Animations.md#using-animations-on-social-media) 18 | - [**How to edit animations**](documentation/Editing-Animations.md) 19 | - [editing SVG](documentation/Editing-Animations.md#editing-svg) 20 | - [changing fonts](documentation/Editing-Animations.md#changing-fonts) 21 | - [editing CSS](documentation/Editing-Animations.md#editing-css) 22 | - [editing anime.js](documentation/Editing-Animations.md#editing-animejs) 23 | - [converting an anime.js timeline to CSS](documentation/Editing-Animations.md#converting-an-animejs-timeline-to-css) 24 | - [**How to make videos or GIFs**](Making-Video-or-GIF.md) 25 | - [recording your screen](documentation/Making-Video-or-GIF.md#recording-your-screen) 26 | - [converting to gif](documentation/Making-Video-or-GIF.md#converting-to-gif) 27 | - [**How to make static images**](documentation/Making-Static-Images.md) 28 | - [making static SVG](documentation/Making-Static-Images.md#making-static-svg) 29 | - [making PNG](documentation/Making-Static-Images.md#making-static-png) 30 | - [making JPEG](documentation/Making-Static-Images.md#making-static-jpeg) 31 | 32 | ---- 33 | 34 | ## Animations 35 | ### Replication: connecting via a pātaka 36 | 37 | ![](svg/replication-via-internet_css.svg) 38 | 39 | ### Replication: connecting locally 40 | 41 | ![](svg/replication-local_css.svg) 42 | 43 | ### Replication: Multiple pātaka 44 | 45 | ![](svg/multiple-pātaka_css.svg) 46 | 47 | ### Data on a Pātaka 48 | 49 | ![](svg/data-on-a-pātaka_css.svg) 50 | 51 | _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._ 52 | 53 | ### Infrastructure Comparison 54 | 55 | ![](svg/corporate-server.svg) 56 | 57 | _Example text: With a 'normal' internet service, your data may be housed in a large 58 | corporate data center overseas._ 59 | 60 | ![](svg/alternative-servers.svg) 61 | 62 | _Example text: A Pātaka server can be a small, simple device or a large professional 63 | setup, depending on your needs and preferences._ 64 | 65 | ### Port Forwarding 66 | ![](svg/port-forwarding_01_without-port-forwarding.svg) 67 | _1. Explanation of ports, and a request for a specific port_ 68 | 69 | ![](svg/port-forwarding_02_with-port-forwarding.svg) 70 | _2. Explanation of port forwarding_ 71 | 72 | ---- 73 | 74 | ## Icons 75 | 76 | Examples of the style and format of icons, in 48px and 96px: 77 | 78 | ![Ethernet icon (48px)](svg/icons/ethernet_48.svg) ![Laptop icon (48px)](svg/icons/laptop_48.svg) 79 | ![Mobile icon (48px)](svg/icons/mobile_48.svg) 80 | 81 | ![Router icon (48px)](svg/icons/router_48.svg) ![Static IP Address icon(48px)](svg/icons/static-ip_48.svg) 82 | ![WiFi icon(48px)](svg/icons/wifi_48.svg) ![Internet icon(48px)](svg/icons/internet_48.svg) 83 | 84 | ![Ethernet icon (96px)](svg/icons/ethernet_96.svg) ![Laptop icon (96px)](svg/icons/laptop_96.svg) 85 | ![Mobile icon (96px)](svg/icons/mobile_96.svg) 86 | 87 | ![Router icon (96px)](svg/icons/router_96.svg) ![Static IP Address icon(96px)](svg/icons/static-ip_96.svg) 88 | ![WiFi icon(96px)](svg/icons/wifi_96.svg) ![Internet icon(96px)](svg/icons/internet_96.svg) 89 | 90 | 91 | The animation in the WiFi, Internet and Router icons can be removed by deleting or 92 | commenting out the `` section of the SVG. 93 | -------------------------------------------------------------------------------- /ROADMAP.md: -------------------------------------------------------------------------------- 1 | # Roadmap 2 | Planned illustrations, animations and icons, and current progress made. 3 | ## Key: 4 | ✔ Done | ✖️ Planned, not done | **-** Not (yet) applicable or not planned 5 | 6 | | TOPIC | CONCEPT/SKETCH | ILLUSTRATION | ANIMATION | PUBLISHED | THUMB | REVIEWED | 7 | |--------------------------|----------------|--------------|-----------|-----------|--------------------------------|-------------| 8 | | **Equipment checklist:** | | | | | | ✖️ | 9 | | Smartphone icon | ✔ | ✔ | **-** | ✔ | ![](svg/icons/mobile_48.svg) | | 10 | | Laptop icon | ✔ | ✔ | **-** | ✔ | ![](svg/icons/laptop_48.svg) | | 11 | | Internet icon | ✔ | ✔ | ✔ | ✔ | ![](svg/icons/internet_48.svg) | | 12 | | Router icon | ✔ | ✔ | ✔ | ✔ | ![](svg/icons/router_48.svg) | | 13 | | WiFi icon | ✔ | ✔ | ✔ | ✔ | ![](svg/icons/wifi_48.svg) | | 14 | | Ethernet icon | ✔ | ✔ | **-** | ✔ | ![](svg/icons/ethernet_48.svg) | | 15 | | Static IP icon | ✔ | ✔ | **-** | ✔ | ![](svg/icons/static-ip_48.svg)| | 16 | | **Pātaka Setup:** | | | | | | **-** | 17 | | Static IP address | ✔ | ✖️ | ✖️ | ✖️ | | | 18 | | Port Forwarding | ✔ | ✔ | ✔ | ✔ | ![](svg/port-forwarding_02_with-port-forwarding.svg)| ✖️ | 19 | | **Infrastructure:** | | | | | | ✖️ | 20 | | Compare: corporate server| ✔ | ✔ | ✔ | ✔ | ![](svg/corporate-server.svg) | | 21 | | Compare: Āhau / SSB | ✔ | ✔ | ✔ | ✔ | ![](svg/alternative-servers.svg) | | 22 | | **Replication:** | | | | | | **-** | 23 | | Compare: Facebook etc | ✔ | ✔ | ✖️ | ✖️ | | | 24 | | Sync via Internet/Pātaka | ✔ | ✔ | ✔ | ✔ | ![](svg/replication-via-internet_css.svg)| | 25 | | Local sync over WiFi | ✔ | ✔ | ✔ | ✔ | ![](svg/replication-local_css.svg)| | 26 | | Pātaka-to-Pātaka | ✔ | ✔ |In progress| ✔ | ![](svg/multiple-pātaka_anime.svg)| | 27 | | **Encryption:** | | | | | | **-** | 28 | | Data on a Pātaka | ✔ | ✔ | ✔ | ✔ | ![](svg/data-on-a-pātaka_css.svg) | | 29 | -------------------------------------------------------------------------------- /documentation/Editing-Animations.md: -------------------------------------------------------------------------------- 1 | # Editing animations 2 | Do you want to adapt these animations for your own purposes, experiment with them 3 | or improve them in some way? Great! Here are a few pointers for understanding the 4 | files, the animation syntax, the formats and what you can do with them. 5 | 6 | ## Contents 7 | 8 | - [**editing SVG**](#editing-svg) 9 | - [**changing fonts**](#changing-fonts) 10 | - [**editing CSS**](#editing-css) 11 | - [**editing anime.js**](#editing-animejs) 12 | - [**converting an anime.js timeline to CSS**](#converting-an-animejs-timeline-to-css) 13 | 14 | ## Editing SVG 15 | I have tried to keep the SVG code as readable as possible, so you should be able 16 | to do quite a lot of editing from a text editor. 17 | 18 | - If you've never touched SVG code or CSS animation before, I recommend that you 19 | check out my [_Draw with Code_ zine](https://solarpunk.cool/zines/draw-with-code/index.html) 20 | for a overview and step-by-step tutorial. 21 | 22 | - You can use a simple text editor but I recommend using an IDE like Atom, 23 | Brackets or VS Code, with an SVG Preview plugin. 24 | More info and links to these editors & plugins can be found in the 25 | [tools page](https://solarpunk.cool/zines/draw-with-code/tools.html) of the zine. 26 | 27 | - using an IDE will also allow you to [fold](https://flight-manual.atom.io/using-atom/sections/folding/) nested content, and only unfold the 28 | specific parts you're interested in, allowing you to navigate through a 1588-line complex SVG and maintain an overview: 29 | ![A complex SVG file, folded tidily](img/folded-svg.png) 30 | 31 | 32 | - Every element in every animation either has its own `id`, or is in a `` (group) 33 | with an `id`. If you're still not sure which part of the image the code refers to, 34 | try commenting it out (Select it, then use the shortcut **Ctrl + \\** in Atom). 35 | If the right thing disappears, great! 36 | 37 | - You can move things around by editing their `x` & `y` attributes directly or you 38 | can apply different types of `transform` to elements or groups of elements. 39 | But just a word of warning: if you're changing/adding transforms, you may need to 40 | adjust that element's `style="transform-origin:[x]px [y]px [z]px;"` value, or it 41 | will scale / rotate from the wrong place. 42 | 43 | - If the animation is distracting you while you're trying to make other changes, 44 | you can comment out the CSS animation: look for `@keyframes` rulesets in 45 | `` section, just before the closing `` tag, and paste the contents of `your-embeddable-font.css` into it. For these animations, the file is [font/base64-font_dosis.css](../font/base64-font_dosis.css) - it is a subset of the open source [Dosis](https://github.com/impallari/Dosis) typeface. 78 | 79 | - With the font now embedded, you can delete the line with the Google fonts link in the first ` 160 | 161 | 162 | 164 | 165 | 167 | 172 | 176 | 180 | 181 | 182 | 184 | 187 | 190 | 193 | 196 | 197 | 198 | 199 | 200 | 201 | 205 | 209 | 210 | 211 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 227 | 230 | 233 | 236 | 237 | 239 | 241 | 243 | 245 | 247 | 249 | 250 | 251 | 253 | 255 | 257 | 258 | 259 | 261 | 263 | 265 | 267 | 268 | 269 | 272 | 281 | 282 | 284 | 286 | 288 | 290 | 291 | 292 | 294 | 296 | 298 | 300 | 301 | 302 | 304 | 305 | 307 | 309 | 311 | 313 | 314 | 315 | 317 | 319 | 321 | 323 | 324 | 325 | 327 | 329 | 331 | 333 | 334 | 335 | 337 | 340 | 343 | 345 | 346 | 347 | 349 | 352 | 354 | 356 | 357 | 358 | 361 | 364 | 367 | 368 | 369 | 370 | 371 | 373 | 376 | 379 | 382 | 385 | 386 | 387 | 390 | 393 | 396 | 399 | 402 | 403 | 404 | 405 | 409 | 410 | 413 | 414 | 415 | 416 | 417 | 418 | 419 | 420 | 421 | 424 | 425 | 427 | 429 | 431 | 433 | 436 | 438 | 440 | 441 | 442 | 443 | 444 | 445 | 447 | 448 | 451 | 453 | 455 | 457 | 459 | 460 | 461 | 463 | 466 | 469 | 472 | 475 | 478 | 479 | 480 | 482 | 484 | 486 | 488 | 490 | 491 | 493 | 495 | 496 | 497 | 499 | 501 | 502 | 504 | 506 | 508 | 510 | 512 | 513 | 514 | 516 | 518 | 519 | 520 | 521 | 522 | 524 | 527 | 528 | 531 | 532 | 534 | 535 | 536 | 537 | 538 | 539 | 540 | 543 | 544 | 545 | 546 | 547 | 548 | 550 | 551 | 552 | 553 | 554 | 555 | 556 | 557 | 559 | 561 | 563 | 565 | 567 | 568 | 570 | 572 | 573 | 576 | 578 | 580 | 582 | 583 | 584 | 585 | 586 | 587 | 588 | 589 | 590 | 591 | -------------------------------------------------------------------------------- /svg/color-scheme.svg: -------------------------------------------------------------------------------- 1 | 6 | Āhau animation colors 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /svg/icons/README.md: -------------------------------------------------------------------------------- 1 | # SVG Icons 2 | 3 | 48px | 96px 4 | -----|----- 5 | ![ethernet_48px](ethernet_48.svg) ethernet_48.svg | ![ethernet_96px](ethernet_96.svg) ethernet_96.svg 6 | ![internet_48px](internet_48.svg) internet_48.svg | ![internet_96px](internet_96.svg) internet_96.svg 7 | ![laptop_48px](laptop_48.svg) laptop_48.svg | ![laptop_96px](laptop_96.svg) laptop_96.svg 8 | ![mobile_48px](mobile_48.svg) mobile_48.svg | ![mobile_96px](mobile_96.svg) mobile_96.svg 9 | ![router_48px](router_48.svg) router_48.svg | ![router_96px](router_96.svg) router_96.svg 10 | ![static-ip_48px](static-ip_48.svg) static-ip_48.svg | ![static-ip_96px](static-ip_96.svg) static-ip_96.svg 11 | ![wifi_48px](wifi_48.svg) wifi_48.svg | ![wifi_96px](wifi_96.svg) wifi_96.svg 12 | 13 | 14 | - The animation in the WiFi, Internet and Router icons can be removed by deleting or commenting out the `` section in the SVG file. 15 | 16 | - Icons are designed to have a stroke width displayed at 1px at both sizes (in the 96px versions, `stroke-width` is set to `0.5`, but this in a 48×48 `viewBox` scaled to 96px --- so it's shown on screen as 1px) 17 | 18 | - There has been some pixel-hinting done to ensure that straight lines and square shapes fall cleanly within the pixel grid, reducing blur. Curved shapes have had their bounding rectangles aligned but are not properly pixel-hinted. 19 | -------------------------------------------------------------------------------- /svg/icons/ethernet_48.svg: -------------------------------------------------------------------------------- 1 | 4 | Ethernet 48px 5 | 6 | 9 | 12 | 13 | 16 | 17 | -------------------------------------------------------------------------------- /svg/icons/ethernet_96.svg: -------------------------------------------------------------------------------- 1 | 4 | Ethernet 96px 5 | 6 | 9 | 12 | 13 | 16 | 17 | -------------------------------------------------------------------------------- /svg/icons/internet_48.svg: -------------------------------------------------------------------------------- 1 | 4 | Internet 48px 5 | 25 | 27 | 28 | 29 | 30 | 36 | 37 | 39 | 44 | 49 | 54 | 59 | 64 | 69 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /svg/icons/internet_96.svg: -------------------------------------------------------------------------------- 1 | 4 | Internet 96px 5 | 25 | 27 | 28 | 29 | 30 | 36 | 37 | 39 | 44 | 49 | 54 | 59 | 64 | 69 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /svg/icons/laptop_48.svg: -------------------------------------------------------------------------------- 1 | 4 | Laptop 48px 5 | 6 | 9 | 12 | 15 | 18 | 24 | 27 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /svg/icons/laptop_96.svg: -------------------------------------------------------------------------------- 1 | 4 | Laptop 96px 5 | 6 | 9 | 12 | 15 | 18 | 24 | 27 | 30 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /svg/icons/mobile_48.svg: -------------------------------------------------------------------------------- 1 | 4 | Mobile 48px 5 | 6 | 9 | 12 | 15 | 18 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /svg/icons/mobile_96.svg: -------------------------------------------------------------------------------- 1 | 4 | Mobile 96px 5 | 6 | 9 | 12 | 15 | 18 | 21 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /svg/icons/router_48.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | Router 48px 6 | 7 | 32 | 34 | 36 | 38 | 40 | 41 | 44 | 46 | 48 | 50 | 52 | 53 | 56 | 59 | 60 | -------------------------------------------------------------------------------- /svg/icons/router_96.svg: -------------------------------------------------------------------------------- 1 | 4 | Router 96px 5 | 30 | 33 | 35 | 37 | 39 | 40 | 44 | 47 | 49 | 51 | 53 | 54 | 58 | 62 | 63 | -------------------------------------------------------------------------------- /svg/icons/static-ip_48.svg: -------------------------------------------------------------------------------- 1 | 4 | Static IP 48px 5 | 7 | 9 | 11 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /svg/icons/static-ip_96.svg: -------------------------------------------------------------------------------- 1 | 4 | Static IP 96px 5 | 7 | 9 | 11 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /svg/icons/wifi_48.svg: -------------------------------------------------------------------------------- 1 | 4 | WiFi 48px 5 | 26 | 28 | 29 | 31 | 33 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /svg/icons/wifi_96.svg: -------------------------------------------------------------------------------- 1 | 4 | WiFi 48px 5 | 26 | 28 | 29 | 31 | 33 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /svg/port-forwarding.svg: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | image/svg+xml 12 | 13 | 14 | 15 | 16 | Sam Muirhead 17 | 18 | 19 | https://github.com/ssbc/visual-docs/ 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 286 | 287 | 289 | 292 | 293 | 295 | 297 | 298 | 300 | 302 | 303 | 304 | 306 | 308 | 314 | 320 | 321 | 323 | 327 | 331 | 335 | 336 | 337 | 342 | 343 | 349 | 350 | 356 | 358 | 362 | 366 | 370 | 371 | 372 | 373 | 374 | 375 | 379 | 380 | 382 | 384 | 387 | 390 | 393 | 394 | 396 | 397 | 398 | 399 | 400 | 402 | 404 | 405 | 406 | 407 | 409 | 410 | 413 | 415 | 417 | 418 | 420 | 422 | 423 | 424 | 426 | 428 | 430 | 432 | 434 | 436 | 438 | 439 | 440 | 443 | 444 | 446 | 449 | 452 | 453 | 454 | 455 | 456 | 458 | 459 | 460 | 461 | 462 | 463 | 464 | 465 | 467 | 468 | 469 | 470 | 471 | 472 | 476 | 480 | 481 | 482 | 483 | 485 | 486 | request: 487 | 488 | 489 | 491 | 72.243.14.15 492 | 493 | 495 | :443 496 | 497 | 498 | 500 | Router 501 | 502 | 504 | 72.243.14.15 505 | 506 | 507 | Internet 508 | 509 | 511 | 512 | No Port Forwarding 513 | 514 | 515 | With Port Forwarding 516 | 517 | 518 | 520 | 521 | 522 | 192.168.1.60 523 | 524 | 525 | Port 443 527 | 528 | 529 | 531 | 192.168.1.70 532 | 533 | 534 | 536 | 192.168.1.80 537 | 538 | 539 | 540 | 544 | 548 | 552 | 556 | 557 | 558 | -------------------------------------------------------------------------------- /svg/port-forwarding_02_with-port-forwarding.svg: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | image/svg+xml 12 | 13 | 14 | 15 | 16 | Sam Muirhead 17 | 18 | 19 | https://github.com/ssbc/visual-docs/ 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | With Port Forwarding 33 | 34 | 121 | 122 | 123 | 124 | 126 | 129 | 130 | 131 | 133 | 135 | 136 | 137 | 139 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 149 | 150 | 152 | 158 | 159 | 160 | 165 | 171 | 172 | 173 | 174 | 175 | 176 | 180 | 181 | 182 | 184 | 185 | 186 | 190 | 193 | 196 | 197 | 198 | 201 | 204 | 205 | 206 | 208 | 210 | 212 | 214 | 216 | 218 | 220 | 221 | 222 | 225 | 226 | 228 | 231 | 234 | 235 | 236 | 237 | 238 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 250 | 251 | 252 | 253 | 254 | 255 | 259 | 263 | 264 | 265 | 266 | 268 | 269 | request: 270 | 271 | 272 | 275 | 72.243.14.15 276 | 277 | 280 | :443 281 | 282 | 283 | 284 | 287 | 72.243.14.15 288 | 289 | 290 | 292 | 295 | 192.168.1.70 296 | 297 | 300 | 192.168.1.80 301 | 302 | 303 | 304 | 305 | 306 | 308 | 314 | 316 | 319 | 322 | 325 | 326 | 327 | 329 | 330 | 331 | 332 | 333 | 335 | 337 | 338 | 339 | 340 | 341 | 343 | 344 | 192.168.1.60 345 | 346 | 347 | Port 443 349 | 350 | 351 | 352 | 354 | 355 | With Port Forwarding 356 | 357 | 358 | 359 | 360 | 361 | 372 | 373 | --------------------------------------------------------------------------------