jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

images

Browse source
This commit is contained in:
Ilya Kantor 2022-02-03 13:07:56 +03:00
parent 0f748275e2
commit a678674350
18 changed files with 17 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

2
1-js/05-data-types/10-destructuring-assignment/destructuring-complex.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 64 KiB

After

Width:  |  Height:  |  Size: 64 KiB

Before After
Before After

2
1-js/06-advanced-functions/01-recursion/recursive-salaries.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 96 KiB

After

Width:  |  Height:  |  Size: 96 KiB

Before After
Before After

2
1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/debounce.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="183" viewBox="0 0 500 183"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="combined" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="debounce.svg"><text id="200ms" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="117" y="142">200ms</tspan></text><text id="1500ms" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="321" y="142">1500ms</tspan></text><text id="1000ms" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="242" y="80">1000ms</tspan></text><path id="Shape" fill="#C06334" stroke="#C06334" stroke-linecap="square" stroke-width="3" d="M343.378 28.32L350.92 12 331 33.024l9.674 2.932L334.797 52 353 31.253l-9.622-2.932zm4.369-11.617l-5.669 12.226 9.206 2.767-13.887 15.989 4.525-12.338-9.206-2.766 15.031-15.878z"/><text id="0" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="93" y="142">0</tspan></text><text id="c" fill="#C06334" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="333" y="72">c</tspan></text><text id="f(a)" fill="#C06334" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="81" y="164">f(a)</tspan></text><text id="f(b)" fill="#C06334" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="121" y="164">f(b)</tspan></text><text id="f(c)" fill="#C06334" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="181" y="164">f(c)</tspan></text><text id="500ms" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="177" y="142">500ms</tspan></text><text id="time" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="427" y="125">time</tspan></text><text id="calls:" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="7" y="164">calls:</tspan></text><path id="Line" fill="#DBAF88" fill-rule="nonzero" d="M432.369 94.388l.871.49 12 6.75 1.55.872-1.55.872-12 6.75-.871.49-.98-1.743.87-.49 8.673-4.879H48v-2h392.932l-8.672-4.878-.872-.49.98-1.744z"/><text id="after-1000ms" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="358" y="36"> after 1000ms</tspan></text><path id="Line-Copy" stroke="#DBAF88" stroke-linecap="square" stroke-width="2" d="M137.5 125V80M97.5 125V80M197.5 125V80"/><path id="Line-2" stroke="#C06334" stroke-linecap="square" stroke-width="3" d="M337.5 125V80"/><path id="Line-25" fill="#DBAF88" fill-rule="nonzero" d="M212.631 77.888l.98 1.743-.87.49L204.066 85H206v2h-1.933l8.673 4.878.872.49-.98 1.744-.872-.49-12-6.75-1.55-.872 1.55-.872 12-6.75.871-.49zm108.738 0l.871.49 12 6.75 1.55.872-1.55.872-12 6.75-.871.49-.98-1.743.87-.49L329.932 87H329v-2h.934l-8.674-4.878-.872-.49.98-1.744zM214 85v2h-5v-2h5zm8 0v2h-5v-2h5zm8 0v2h-5v-2h5zm8 0v2h-5v-2h5zm8 0v2h-5v-2h5zm8 0v2h-5v-2h5zm8 0v2h-5v-2h5zm8 0v2h-5v-2h5zm8 0v2h-5v-2h5zm8 0v2h-5v-2h5zm8 0v2h-5v-2h5zm8 0v2h-5v-2h5zm8 0v2h-5v-2h5zm8 0v2h-5v-2h5zm8 0v2h-5v-2h5z"/></g></g></svg> <svg xmlns="http://www.w3.org/2000/svg" width="500" height="183" viewBox="0 0 500 183"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="combined" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="debounce.svg"><text id="200ms" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="117" y="142">200ms</tspan></text><text id="1500ms" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="321" y="142">1500ms</tspan></text><text id="1000ms" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="242" y="80">1000ms</tspan></text><path id="Shape" fill="#C06334" stroke="#C06334" stroke-linecap="square" stroke-width="3" d="M343.378 28.32L350.92 12 331 33.024l9.674 2.932L334.797 52 353 31.253l-9.622-2.932zm4.369-11.617l-5.669 12.226 9.206 2.767-13.887 15.989 4.525-12.338-9.206-2.766 15.031-15.878z"/><text id="0" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="93" y="142">0</tspan></text><text id="c" fill="#C06334" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="333" y="72">c</tspan></text><text id="f(a)" fill="#C06334" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="81" y="164">f(a)</tspan></text><text id="f(b)" fill="#C06334" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="121" y="164">f(b)</tspan></text><text id="f(c)" fill="#C06334" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="181" y="164">f(c)</tspan></text><text id="500ms" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="177" y="142">500ms</tspan></text><text id="time" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="427" y="125">time</tspan></text><text id="calls:" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="7" y="164">calls:</tspan></text><path id="Line" fill="#DBAF88" fill-rule="nonzero" d="M432.369 94.388l.871.49 12 6.75 1.55.872-1.55.872-12 6.75-.871.49-.98-1.743.87-.49 8.673-4.879H48v-2h392.932l-8.672-4.878-.872-.49.98-1.744z"/><text id="after-1000ms" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="358" y="36"> after 1000ms</tspan></text><path id="Line-Copy" stroke="#DBAF88" stroke-linecap="square" stroke-width="2" d="M137.5 125V80M97.5 125V80M197.5 125V80"/><path id="Line-2" stroke="#C06334" stroke-linecap="square" stroke-width="3" d="M337.5 125V80"/><path id="Line-25" fill="#DBAF88" fill-rule="nonzero" d="M212.631 77.888l.98 1.743-.87.49L204.066 85H206v2h-1.933l8.673 4.878.872.49-.98 1.744-.872-.49-12-6.75-1.55-.872 1.55-.872 12-6.75.871-.49zm108.738 0l.871.49 12 6.75 1.55.872-1.55.872-12 6.75-.871.49-.98-1.743.87-.49L329.933 87H329v-2h.932l-8.672-4.878-.872-.49.98-1.744zM214 85v2h-5v-2h5zm8 0v2h-5v-2h5zm8 0v2h-5v-2h5zm8 0v2h-5v-2h5zm8 0v2h-5v-2h5zm8 0v2h-5v-2h5zm8 0v2h-5v-2h5zm8 0v2h-5v-2h5zm8 0v2h-5v-2h5zm8 0v2h-5v-2h5zm8 0v2h-5v-2h5zm8 0v2h-5v-2h5zm8 0v2h-5v-2h5zm8 0v2h-5v-2h5zm8 0v2h-5v-2h5z"/></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

Before After
Before After

2
1-js/11-async/02-promise-basics/promise-reject-1.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="535" height="106" viewBox="0 0 535 106"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="promise" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="promise-reject-1.svg"><path id="Rectangle-1" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M184 34v58H9V34h175z"/><text id="new-Promise(executor" fill="#7E7C7B" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="10" y="22">new Promise(executor)</tspan></text><text id="state:-&quot;pending&quot;-res" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="21" y="54">state: &quot;pending&quot;</tspan> <tspan x="21" y="74">result: undefined</tspan></text><text id="reject(error)" fill="#C06334" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="212.4" y="49">reject(error)</tspan></text><path id="Rectangle-1-Copy-3" fill="#FEF1F0" stroke="#D35155" stroke-width="2" d="M353 34h175v58H353z"/><text id="state:-&quot;rejected&quot;-re" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="368" y="55">state: &quot;rejected&quot;</tspan> <tspan x="368" y="75">result: error</tspan></text><path id="Line-Copy" fill="#C06334" fill-rule="nonzero" d="M329 53l14 7-14 7v-6H196v-2h133v-6z"/></g></g></svg> <svg xmlns="http://www.w3.org/2000/svg" width="535" height="106" viewBox="0 0 535 106"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="promise" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="promise-reject-1.svg"><path id="Rectangle-1" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M184 34v58H9V34h175z"/><text id="new-Promise(executor" fill="#7E7C7B" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="10" y="22">new Promise(executor)</tspan></text><text id="state:-&quot;pending&quot;-res" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="21" y="54">state: &quot;pending&quot;</tspan> <tspan x="21" y="74">result: undefined</tspan></text><text id="reject(error)" fill="#C06334" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="212.4" y="49">reject(error)</tspan></text><path id="Rectangle-1-Copy-3" fill="#FEF1F0" stroke="#D35155" stroke-width="2" d="M353 34h175v58H353z"/><text id="state:-&quot;rejected&quot;-re" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="368" y="55">state: &quot;rejected&quot;</tspan> <tspan x="368" y="75">result: error</tspan></text><path id="Line-Copy" fill="#C06334" fill-rule="nonzero" d="M329 53l14 7-14 7v-6H196v-2h133v-6z" transform="matrix(1 0 0 -1 0 120)"/></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

Before After
Before After

2
1-js/11-async/02-promise-basics/promise-resolve-1.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="538" height="106" viewBox="0 0 538 106"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="promise" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="promise-resolve-1.svg"><path id="Rectangle-1" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M187 34v58H6V34h181z"/><text id="new-Promise(executor" fill="#7E7C7B" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="8" y="22">new Promise(executor)</tspan></text><text id="state:-&quot;pending&quot;-res" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="19" y="54">state: &quot;pending&quot;</tspan> <tspan x="19" y="74">result: undefined</tspan></text><path id="Line-Copy" fill="#C06334" fill-rule="nonzero" d="M329 53l14 7-14 7v-6H196v-2h133v-6z"/><text id="resolve(&quot;done&quot;)" fill="#C06334" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="200.5" y="49">resolve(&quot;done&quot;)</tspan></text><path id="Rectangle-1-Copy" fill="#FBF2EC" stroke="#478964" stroke-width="2" d="M353 35h181v57H353z"/><text id="state:-&quot;fulfilled&quot;-r" fill="#478964" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="368" y="55">state: &quot;fulfilled&quot;</tspan> <tspan x="368" y="75">result: &quot;done&quot;</tspan></text></g></g></svg> <svg xmlns="http://www.w3.org/2000/svg" width="538" height="106" viewBox="0 0 538 106"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="promise" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="promise-resolve-1.svg"><path id="Rectangle-1" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M187 34v58H6V34h181z"/><text id="new-Promise(executor" fill="#7E7C7B" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="8" y="22">new Promise(executor)</tspan></text><text id="state:-&quot;pending&quot;-res" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="19" y="54">state: &quot;pending&quot;</tspan> <tspan x="19" y="74">result: undefined</tspan></text><path id="Line-Copy" fill="#C06334" fill-rule="nonzero" d="M329 53l14 7-14 7v-6H196v-2h133v-6z" transform="matrix(1 0 0 -1 0 120)"/><text id="resolve(&quot;done&quot;)" fill="#C06334" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="200.5" y="49">resolve(&quot;done&quot;)</tspan></text><path id="Rectangle-1-Copy" fill="#FBF2EC" stroke="#478964" stroke-width="2" d="M353 35h181v57H353z"/><text id="state:-&quot;fulfilled&quot;-r" fill="#478964" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="368" y="55">state: &quot;fulfilled&quot;</tspan> <tspan x="368" y="75">result: &quot;done&quot;</tspan></text></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

Before After
Before After

2
1-js/12-generators-iterators/1-generators/generateSequence-2.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 28 KiB

Before After
Before After

2
1-js/12-generators-iterators/1-generators/generateSequence-3.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 28 KiB

Before After
Before After

2
1-js/99-js-misc/01-proxy/proxy-inherit-admin.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="241" height="285" viewBox="0 0 241 285"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="misc" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="proxy-inherit-admin.svg"><path id="Oval" stroke="#DBAF88" stroke-dasharray="5" stroke-width="2" d="M116 181c43.63 0 79-30.668 79-68.5S159.63 44 116 44s-79 30.668-79 68.5S72.37 181 116 181z"/><path id="Rectangle-2" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M52 96h130v48H52z"/><text id="_name:-&quot;Guest&quot;-name:" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="59" y="116">_name: &quot;Guest&quot;</tspan> <tspan x="59" y="131">name: getter</tspan></text><path id="Rectangle-2-Copy" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M52 242h130v28H52z"/><text id="_name:-&quot;Admin&quot;" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="59" y="260">_name: &quot;Admin&quot;</tspan></text><text id="user-(proxied)" fill="#181717" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="57" y="29">user (proxied)</tspan></text><text id="original-user" fill="#181717" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="61" y="87">original user</tspan></text><path id="Line-Copy-3" fill="#C06334" fill-rule="nonzero" d="M115.963 180.5l9.5 19h-8V241h-3v-41.5h-8l9.5-19z"/><text id="admin" fill="#181717" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="51" y="233">admin</tspan></text><text id="[[Prototype]]" fill="#181717" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="122" y="217">[[Prototype]]</tspan></text></g></g></svg> <svg xmlns="http://www.w3.org/2000/svg" width="241" height="285" viewBox="0 0 241 285"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="misc" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="proxy-inherit-admin.svg"><path id="Oval" stroke="#DBAF88" stroke-dasharray="5" stroke-width="2" d="M116 181c43.63 0 79-30.668 79-68.5S159.63 44 116 44s-79 30.668-79 68.5S72.37 181 116 181z"/><path id="Rectangle-2" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M52 96h130v48H52z"/><text id="_name:-&quot;Guest&quot;-name:" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="59" y="116">_name: &quot;Guest&quot;</tspan> <tspan x="59" y="131">name: getter</tspan></text><path id="Rectangle-2-Copy" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M52 242h130v28H52z"/><text id="_name:-&quot;Admin&quot;" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="59" y="260">_name: &quot;Admin&quot;</tspan></text><text id="user-(proxied)" fill="#181717" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="57" y="29">user (proxied)</tspan></text><text id="original-user" fill="#181717" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="61" y="87">original user</tspan></text><path id="Line-Copy-3" fill="#C06334" fill-rule="nonzero" d="M115.963 180.5l9.5 19h-8V241h-3v-41.5h-8l9.5-19z" transform="matrix(-1 0 0 1 232 0)"/><text id="admin" fill="#181717" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="51" y="233">admin</tspan></text><text id="[[Prototype]]" fill="#181717" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="122" y="217">[[Prototype]]</tspan></text></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

Before After
Before After

2
2-ui/1-document/10-size-and-scroll-window/document-client-width-height.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="508" height="203" viewBox="0 0 508 203"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="dom" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="document-client-width-height.svg"><g id="noun_69008_cc" fill="#DBAF88" transform="translate(275 8)"><path id="Shape" d="M179.188 145H3.813C1.708 145 0 143.369 0 141.375V3.625C0 1.631 1.708 0 3.813 0h175.375C181.284 0 183 1.631 183 3.625v137.75c0 1.994-1.716 3.625-3.813 3.625zM7.625 137.75h167.75V7.25H7.625v130.5z"/><path id="Shape" d="M175.375 36.25H7.625c-2.104 0-3.813-1.631-3.813-3.625S5.521 29 7.626 29h167.75c2.097 0 3.813 1.631 3.813 3.625s-1.716 3.625-3.813 3.625zM61.32 126.578c-1.266 0-2.508-.595-3.233-1.682L34.892 89.849a3.486 3.486 0 01.16-4.082l23.195-29.906c1.25-1.631 3.63-1.964 5.33-.746 1.693 1.188 2.059 3.458.8 5.067l-21.646 27.92 21.807 32.951c1.12 1.69.587 3.937-1.197 4.988a3.936 3.936 0 01-2.02.537zM122 126.578a3.802 3.802 0 01-2.028-.559c-1.784-1.058-2.326-3.298-1.197-4.988l21.807-32.95-21.655-27.928c-1.25-1.617-.892-3.878.8-5.067 1.694-1.197 4.08-.849 5.33.76l23.188 29.907a3.462 3.462 0 01.16 4.082L125.21 124.88c-.709 1.102-1.944 1.697-3.21 1.697zM76.25 119.937a4.07 4.07 0 01-1.86-.457c-1.838-.979-2.494-3.183-1.465-4.959l30.18-51.359c1.03-1.755 3.34-2.385 5.2-1.37 1.83.978 2.486 3.175 1.457 4.937l-30.18 51.359c-.701 1.182-1.998 1.849-3.332 1.849zM22.875 18.125c0 2.003-1.706 3.625-3.813 3.625-2.106 0-3.812-1.622-3.812-3.625s1.706-3.625 3.813-3.625c2.106 0 3.812 1.622 3.812 3.625zM38.125 18.125c0 2.003-1.706 3.625-3.813 3.625-2.106 0-3.812-1.622-3.812-3.625s1.706-3.625 3.813-3.625c2.106 0 3.812 1.622 3.812 3.625zM53.375 18.125c0 2.003-1.706 3.625-3.813 3.625-2.106 0-3.812-1.622-3.812-3.625s1.706-3.625 3.813-3.625c2.106 0 3.812 1.622 3.812 3.625z"/></g><text id="documentElement.clie" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="12" y="101">documentElement.clientHeight</tspan></text><text id="documentElement.clie" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="257" y="195">documentElement.clientWidth</tspan></text><path id="Line-3-Copy" fill="#C06334" fill-rule="nonzero" d="M431.025 158.653l19 9.5-19 9.5-.001-8h-132v8l-19-9.5 19-9.5v8h132v-8z"/><path id="Line" fill="#C06334" fill-rule="nonzero" d="M256.5 45l9.5 19-8-.001v64l8 .001-9.5 19-9.5-19 8-.001v-64L247 64l9.5-19z"/></g></g></svg> <svg xmlns="http://www.w3.org/2000/svg" width="508" height="203" viewBox="0 0 508 203"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="dom" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="document-client-width-height.svg"><g id="noun_69008_cc" fill="#DBAF88" transform="translate(275 8)"><path id="Shape" d="M179.188 145H3.813C1.708 145 0 143.369 0 141.375V3.625C0 1.631 1.708 0 3.813 0h175.375C181.284 0 183 1.631 183 3.625v137.75c0 1.994-1.716 3.625-3.813 3.625zM7.625 137.75h167.75V7.25H7.625v130.5z"/><path id="Shape" d="M175.375 36.25H7.625c-2.104 0-3.813-1.631-3.813-3.625S5.521 29 7.626 29h167.75c2.097 0 3.813 1.631 3.813 3.625s-1.716 3.625-3.813 3.625zM61.32 126.578c-1.266 0-2.508-.595-3.233-1.682L34.892 89.849a3.486 3.486 0 01.16-4.082l23.195-29.906c1.25-1.631 3.63-1.964 5.33-.746 1.693 1.188 2.059 3.458.8 5.067l-21.646 27.92 21.807 32.951c1.12 1.69.587 3.937-1.197 4.988a3.936 3.936 0 01-2.02.537zM122 126.578a3.802 3.802 0 01-2.028-.559c-1.784-1.058-2.326-3.298-1.197-4.988l21.807-32.95-21.655-27.928c-1.25-1.617-.892-3.878.8-5.067 1.694-1.197 4.08-.849 5.33.76l23.188 29.907a3.462 3.462 0 01.16 4.082L125.21 124.88c-.709 1.102-1.944 1.697-3.21 1.697zM76.25 119.937a4.07 4.07 0 01-1.86-.457c-1.838-.979-2.494-3.183-1.465-4.959l30.18-51.359c1.03-1.755 3.34-2.385 5.2-1.37 1.83.978 2.486 3.175 1.457 4.937l-30.18 51.359c-.701 1.182-1.998 1.849-3.332 1.849zM22.875 18.125c0 2.003-1.706 3.625-3.813 3.625-2.106 0-3.812-1.622-3.812-3.625s1.706-3.625 3.813-3.625c2.106 0 3.812 1.622 3.812 3.625zM38.125 18.125c0 2.003-1.706 3.625-3.813 3.625-2.106 0-3.812-1.622-3.812-3.625s1.706-3.625 3.813-3.625c2.106 0 3.812 1.622 3.812 3.625zM53.375 18.125c0 2.003-1.706 3.625-3.813 3.625-2.106 0-3.812-1.622-3.812-3.625s1.706-3.625 3.813-3.625c2.106 0 3.812 1.622 3.812 3.625z"/></g><text id="documentElement.clie" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="12" y="101">documentElement.clientHeight</tspan></text><text id="documentElement.clie" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="257" y="195">documentElement.clientWidth</tspan></text><path id="Line-3-Copy" fill="#C06334" fill-rule="nonzero" d="M431.025 158.653l19 9.5-19 9.5-.001-8h-132v8l-19-9.5 19-9.5v8h132v-8z" transform="matrix(-1 0 0 1 730.025 0)"/><path id="Line" fill="#C06334" fill-rule="nonzero" d="M256.5 45l9.5 19-8-.001v64l8 .001-9.5 19-9.5-19 8-.001v-64L247 64l9.5-19z"/></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

Before After
Before After

2
2-ui/1-document/11-coordinates/coordinates.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="521" height="411" viewBox="0 0 521 411"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="dom" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="coordinates.svg"><g id="noun_69008_cc" fill="#DBAF88" transform="translate(13 11)"><path id="Shape" d="M490.563 386H10.438C4.676 386 0 381.658 0 376.35V9.65C0 4.342 4.676 0 10.438 0h480.125C496.303 0 501 4.343 501 9.65v366.7c0 5.308-4.697 9.65-10.438 9.65zm-480.4-12.939h478.642V12.94H10.162V373.06z"/><path id="Shape" d="M20.859 54.1c-5.753 0-10.422-1.147-10.422-2.55 0-1.402 4.67-2.55 10.422-2.55H479.4c5.732 0 10.422 1.148 10.422 2.55 0 1.403-4.69 2.55-10.422 2.55H20.86zM33.8 31.627a6.024 6.024 0 11-12.05 0 6.024 6.024 0 1112.05 0zM63.988 31.627a6.024 6.024 0 11-12.05 0 6.024 6.024 0 1112.05 0zM94.177 31.627a6.024 6.024 0 11-12.05 0 6.024 6.024 0 1112.05 0z"/></g><text id="height" fill="#C06334" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="417" y="208">height</tspan></text><text id="bottom" fill="#7E7C7B" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="451" y="311">bottom</tspan></text><path id="Line-28" stroke="#C06334" stroke-dasharray="3,6" stroke-linecap="square" stroke-width="2" d="M395 293h103"/><path id="Line-30" stroke="#C06334" stroke-dasharray="3,6" stroke-linecap="square" stroke-width="2" d="M392 296v74.5"/><path id="Line-30-Copy" stroke="#C06334" stroke-dasharray="3,6" stroke-linecap="square" stroke-width="2" d="M119 296v46"/><path id="Line-29" stroke="#C06334" stroke-dasharray="3,6" stroke-linecap="square" stroke-width="2" d="M396 120h30"/><text id="x" fill="#C06334" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="62" y="113">x</tspan></text><text id="left" fill="#7E7C7B" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="50" y="135">left</tspan></text><text id="y" fill="#C06334" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="125" y="79">y</tspan></text><text id="width" fill="#C06334" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="234" y="339">width</tspan></text><path id="Line" fill="#C06334" fill-rule="nonzero" d="M414 118.5V273h8l-9.5 19-9.5-19h8V118.5h3z"/><path id="Line-Copy" fill="#7E7C7B" fill-rule="nonzero" d="M476 65v208h8l-9.5 19-9.5-19h8V65h3z"/><path id="Line-2" fill="#C06334" fill-rule="nonzero" d="M371 309l19 9.5-19 9.5-.001-8H116v-3h254.999l.001-8z"/><path id="Line-3" fill="#C06334" fill-rule="nonzero" d="M100.05 109.903l18.95 9.6-19.05 9.4.042-8.001-76.5-.402-1.5-.008.016-3 1.5.008 76.5.402.042-8z"/><text id="right" fill="#7E7C7B" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="180" y="375">right</tspan></text><path id="Line-3-Copy-2" fill="#7E7C7B" fill-rule="nonzero" d="M371 350l19 9.5-19 9.5v-8H21.005v-3H371v-8z"/><path id="Line-3-Copy" fill="#C06334" fill-rule="nonzero" d="M119 65v1.5l.003 34.249h8l-9.498 19.001-9.502-19h8L116 66.5V65h3z"/><path id="Rectangle-1" fill="#DBAF88" d="M392.629 119v175H118V119h274.629zM382 129H129v155h253V129z"/><text id="Introduction-This-Ec" fill="#643B0C" font-family="OpenSans-Bold, Open Sans" font-size="16" font-weight="bold" opacity=".8"><tspan x="138.946" y="153.8">Introduction</tspan> <tspan x="138.946" y="181.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">This Ecma Standard is based on </tspan> <tspan x="138.946" y="200.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">several originating technologies, </tspan> <tspan x="138.946" y="219.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">the most well known being </tspan> <tspan x="138.946" y="238.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">JavaScript (Netscape) and JScript </tspan> <tspan x="138.946" y="257.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">(Microsoft). The language was </tspan> <tspan x="138.946" y="276.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">invented by Brendan Eich at </tspan></text><text id="top" fill="#7E7C7B" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="125" y="96">top</tspan></text></g></g></svg> <svg xmlns="http://www.w3.org/2000/svg" width="521" height="411" viewBox="0 0 521 411"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="dom" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="coordinates.svg"><g id="noun_69008_cc" fill="#DBAF88" transform="translate(13 11)"><path id="Shape" d="M490.563 386H10.438C4.676 386 0 381.658 0 376.35V9.65C0 4.342 4.676 0 10.438 0h480.125C496.303 0 501 4.343 501 9.65v366.7c0 5.308-4.697 9.65-10.438 9.65zm-480.4-12.939h478.642V12.94H10.162V373.06z"/><path id="Shape" d="M20.859 54.1c-5.753 0-10.422-1.147-10.422-2.55 0-1.402 4.67-2.55 10.422-2.55H479.4c5.732 0 10.422 1.148 10.422 2.55 0 1.403-4.69 2.55-10.422 2.55H20.86zM33.8 31.627a6.024 6.024 0 11-12.05 0 6.024 6.024 0 1112.05 0zM63.988 31.627a6.024 6.024 0 11-12.05 0 6.024 6.024 0 1112.05 0zM94.177 31.627a6.024 6.024 0 11-12.05 0 6.024 6.024 0 1112.05 0z"/></g><text id="height" fill="#C06334" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="417" y="208">height</tspan></text><text id="bottom" fill="#7E7C7B" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="451" y="311">bottom</tspan></text><path id="Line-28" stroke="#C06334" stroke-dasharray="3,6" stroke-linecap="square" stroke-width="2" d="M395 293h103"/><path id="Line-30" stroke="#C06334" stroke-dasharray="3,6" stroke-linecap="square" stroke-width="2" d="M392 296v74.5"/><path id="Line-30-Copy" stroke="#C06334" stroke-dasharray="3,6" stroke-linecap="square" stroke-width="2" d="M119 296v46"/><path id="Line-29" stroke="#C06334" stroke-dasharray="3,6" stroke-linecap="square" stroke-width="2" d="M396 120h30"/><text id="x" fill="#C06334" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="62" y="113">x</tspan></text><text id="left" fill="#7E7C7B" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="50" y="135">left</tspan></text><text id="y" fill="#C06334" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="125" y="79">y</tspan></text><text id="width" fill="#C06334" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="234" y="339">width</tspan></text><path id="Line" fill="#C06334" fill-rule="nonzero" d="M414 118.5V273h8l-9.5 19-9.5-19h8V118.5h3z"/><path id="Line-Copy" fill="#7E7C7B" fill-rule="nonzero" d="M476 65v208h8l-9.5 19-9.5-19h8V65h3z"/><path id="Line-2" fill="#C06334" fill-rule="nonzero" d="M371 309l19 9.5-19 9.5-.001-8H116v-3h254.999l.001-8z"/><path id="Line-3" fill="#C06334" fill-rule="nonzero" d="M100.05 109.903l18.95 9.6-19.05 9.4.042-8.001-76.5-.402-1.5-.008.016-3 1.5.008 76.5.402.042-8z"/><text id="right" fill="#7E7C7B" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="180" y="375">right</tspan></text><path id="Line-3-Copy-2" fill="#7E7C7B" fill-rule="nonzero" d="M371 350l19 9.5-19 9.5v-8H21.005v-3H371v-8z"/><path id="Line-3-Copy" fill="#C06334" fill-rule="nonzero" d="M119 65v1.5l.003 34.249h8l-9.498 19.001-9.502-19h8L116 66.5V65h3z" transform="matrix(-1 0 0 1 235.005 0)"/><path id="Rectangle-1" fill="#DBAF88" d="M392.629 119v175H118V119h274.629zM382 129H129v155h253V129z"/><text id="Introduction-This-Ec" fill="#643B0C" font-family="OpenSans-Bold, Open Sans" font-size="16" font-weight="bold" opacity=".8"><tspan x="138.946" y="153.8">Introduction</tspan> <tspan x="138.946" y="181.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">This Ecma Standard is based on </tspan> <tspan x="138.946" y="200.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">several originating technologies, </tspan> <tspan x="138.946" y="219.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">the most well known being </tspan> <tspan x="138.946" y="238.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">JavaScript (Netscape) and JScript </tspan> <tspan x="138.946" y="257.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">(Microsoft). The language was </tspan> <tspan x="138.946" y="276.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">invented by Brendan Eich at </tspan></text><text id="top" fill="#7E7C7B" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="125" y="96">top</tspan></text></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 4.7 KiB

Before After
Before After

2
2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="353" height="216" viewBox="0 0 353 216"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="dom" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="event-order-bubbling.svg"><path id="Rectangle-210" fill="#DBAF88" d="M159.488 140L174 186H60l14.512-46z"/><path id="Rectangle-209" stroke="#91C2A3" stroke-width="18" d="M173.634 81l16.09 51H43.276l16.09-51h114.267z"/><path id="Rectangle-208" stroke="#EFA39F" stroke-width="18" d="M39.986 29h153.028l22.71 72H17.276l22.71-72z"/><path id="Fill-46" fill="#166388" d="M121.5 141v13.816a4.5 4.5 0 11-9 0V141h9zm0-31v13h-9v-13h9zM117 20.53a4.471 4.471 0 013.362 1.3l17.64 17.64a4.5 4.5 0 01-6.364 6.364L121.5 35.698V92h-9V35.7l-10.138 10.136a4.5 4.5 0 11-6.363-6.364l17.639-17.64a4.477 4.477 0 013.363-1.3z"/><text id="1" fill="#643B0C" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="210" y="105">1</tspan></text><text id="2" fill="#643B0C" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="185" y="136">2</tspan></text><text id="3" fill="#C06334" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="157" y="181">3</tspan></text><text id="Most-deeply-nested-e" fill="#AF6E24" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="233.48" y="175">Most deeply</tspan> <tspan x="221.306" y="194">nested element</tspan></text><path id="Line-30" stroke="#C06334" stroke-dasharray="3,6" stroke-linecap="square" stroke-width="2" d="M179.5 177.5h30"/></g></g></svg> <svg xmlns="http://www.w3.org/2000/svg" width="353" height="216" viewBox="0 0 353 216"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="dom" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="event-order-bubbling.svg"><path id="Rectangle-210" fill="#DBAF88" d="M159.488 140L174 186H60l14.512-46z"/><path id="Rectangle-209" stroke="#91C2A3" stroke-width="18" d="M173.634 81l16.09 51H43.276l16.09-51h114.267z"/><path id="Rectangle-208" stroke="#EFA39F" stroke-width="18" d="M193.014 29l22.71 72H17.276l22.71-72h153.028z"/><path id="Fill-46" fill="#166388" d="M121.5 141v13.816a4.5 4.5 0 11-9 0V141h9zm0-31v13h-9v-13h9zM117 20.53a4.471 4.471 0 013.362 1.3l17.64 17.64a4.5 4.5 0 01-6.364 6.364L121.5 35.698V92h-9V35.7l-10.138 10.136a4.5 4.5 0 11-6.363-6.364l17.639-17.64a4.477 4.477 0 013.363-1.3z"/><text id="1" fill="#643B0C" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="210" y="105">1</tspan></text><text id="2" fill="#643B0C" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="185" y="136">2</tspan></text><text id="3" fill="#C06334" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="157" y="181">3</tspan></text><text id="Most-deeply-nested-e" fill="#AF6E24" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="233.48" y="175">Most deeply</tspan> <tspan x="221.306" y="194">nested element</tspan></text><path id="Line-30" stroke="#C06334" stroke-dasharray="3,6" stroke-linecap="square" stroke-width="2" d="M179.5 177.5h30"/></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

Before After
Before After

2
2-ui/2-events/03-event-delegation/bagua-bubble.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="369" height="216" viewBox="0 0 369 216"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="dom" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="bagua-bubble.svg"><path id="Rectangle-210" fill="#DBAF88" d="M202.488 140L217 186H103l14.512-46z"/><path id="Rectangle-209" stroke="#91C2A3" stroke-width="18" d="M216.634 81l16.09 51H86.276l16.09-51h114.267z"/><path id="Rectangle-208" stroke="#EFA39F" stroke-width="18" d="M82.986 29h153.028l22.71 72H60.276l22.71-72z"/><path id="Fill-46" fill="#166388" d="M164.5 141v13.816a4.5 4.5 0 11-9 0V141h9zm0-31v13h-9v-13h9zM160 20.53a4.471 4.471 0 013.362 1.3l17.64 17.64a4.5 4.5 0 01-6.364 6.364L164.5 35.698V92h-9V35.7l-10.138 10.136a4.5 4.5 0 11-6.363-6.364l17.639-17.64a4.477 4.477 0 013.363-1.3z"/><text id="&lt;table&gt;" fill="#D35155" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="9" y="30">&lt;table&gt;</tspan></text><text id="&lt;td&gt;" fill="#478964" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="36" y="136">&lt;td&gt;</tspan></text><text id="&lt;strong&gt;" fill="#AF6E24" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="35" y="181">&lt;strong&gt;</tspan></text><text id="event.target" fill="#AF6E24" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="271.537" y="181">event.target</tspan></text><path id="Line-30" stroke="#C06334" stroke-dasharray="3,6" stroke-linecap="square" stroke-width="2" d="M229.5 177.5h30"/></g></g></svg> <svg xmlns="http://www.w3.org/2000/svg" width="369" height="216" viewBox="0 0 369 216"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="dom" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="bagua-bubble.svg"><path id="Rectangle-210" fill="#DBAF88" d="M202.488 140L217 186H103l14.512-46z"/><path id="Rectangle-209" stroke="#91C2A3" stroke-width="18" d="M216.634 81l16.09 51H86.276l16.09-51h114.267z"/><path id="Rectangle-208" stroke="#EFA39F" stroke-width="18" d="M236.014 29l22.71 72H60.276l22.71-72h153.028z"/><path id="Fill-46" fill="#166388" d="M164.5 141v13.816a4.5 4.5 0 11-9 0V141h9zm0-31v13h-9v-13h9zM160 20.53a4.471 4.471 0 013.362 1.3l17.64 17.64a4.5 4.5 0 01-6.364 6.364L164.5 35.698V92h-9V35.7l-10.138 10.136a4.5 4.5 0 11-6.363-6.364l17.639-17.64a4.477 4.477 0 013.363-1.3z"/><text id="&lt;table&gt;" fill="#D35155" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="9" y="30">&lt;table&gt;</tspan></text><text id="&lt;td&gt;" fill="#478964" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="36" y="136">&lt;td&gt;</tspan></text><text id="&lt;strong&gt;" fill="#AF6E24" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="35" y="181">&lt;strong&gt;</tspan></text><text id="event.target" fill="#AF6E24" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="271.537" y="181">event.target</tspan></text><path id="Line-30" stroke="#C06334" stroke-dasharray="3,6" stroke-linecap="square" stroke-width="2" d="M229.5 177.5h30"/></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

Before After
Before After

2
2-ui/99-ui-misc/03-event-loop/eventLoop.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="479" height="279" viewBox="0 0 479 279"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="promise" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="eventLoop.svg"><path id="Rectangle-1-Copy-5" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M218 173h108v28H218z"/><text id="..." fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="258.9" y="189">...</tspan></text><path id="Rectangle-1-Copy-6" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M218 90h108v28H218z"/><path id="Rectangle-1-Copy-8" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M218 117h108v28H218z"/><text id="mousemove" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="233.7" y="136">mousemove</tspan></text><path id="Rectangle-1-Copy-9" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M218 145h108v28H218z"/><text id="script" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="246.8" y="109">script</tspan></text><text id="event-loop" fill="#C06334" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal"><tspan x="69.422" y="134">event</tspan> <tspan x="75.615" y="167">loop</tspan></text><text id="macrotask-queue" fill="#AF6E24" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal"><tspan x="344.871" y="136">macrotask</tspan> <tspan x="367.951" y="169">queue</tspan></text><path id="Path" fill="#C06334" fill-rule="nonzero" d="M192 40c22.467 0 43.818 7.359 61.285 20.712l.622.479.143.122 8.961 8.422-4.584-14.61 3.817-1.197 6.869 21.895 1.064 3.392-3.452-.852-22.278-5.5.959-3.883 14.864 3.669-8.886-8.352-.55-.424c-16.564-12.656-36.757-19.698-58.036-19.87L192 44c-30.748 0-59.095 14.403-77.315 38.412l-.549.73-3.208-2.387C129.87 55.303 159.664 40 192 40z"/><path id="Path-Copy-2" fill="#C06334" fill-rule="nonzero" d="M269.882 208.148l2.823 2.834-.366.365a533.245 533.245 0 00-3.982 4.033l-.333.34c-9.922 10.12-14.79 14.544-22.017 19.272-15.185 9.934-34.01 15.688-51.594 15.688-25.222 0-47.144-6.827-64.077-19.673l-.589-.45-.089-.07-.08-.078-8.854-8.581 4.36 14.68-3.835 1.138-6.532-21.998-1.012-3.409 3.439.906 22.19 5.841-1.018 3.868-14.808-3.898 8.766 8.497.488.374c16.02 12.15 36.782 18.698 60.792 18.85l.859.003c16.796 0 34.862-5.522 49.404-15.035 6.911-4.521 11.624-8.806 21.35-18.725l.334-.34a633.126 633.126 0 013.46-3.511l.736-.736.185-.185z"/><text id="setTimeout" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="230" y="164">setTimeout</tspan></text></g></g></svg> <svg xmlns="http://www.w3.org/2000/svg" width="479" height="279" viewBox="0 0 479 279"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="promise" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="eventLoop.svg"><path id="Rectangle-1-Copy-5" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M218 173h108v28H218z"/><text id="..." fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="258.9" y="189">...</tspan></text><path id="Rectangle-1-Copy-6" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M218 90h108v28H218z"/><path id="Rectangle-1-Copy-8" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M218 117h108v28H218z"/><text id="mousemove" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="233.7" y="136">mousemove</tspan></text><path id="Rectangle-1-Copy-9" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M218 145h108v28H218z"/><text id="script" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="246.8" y="109">script</tspan></text><text id="event-loop" fill="#C06334" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal"><tspan x="73.658" y="134">even</tspan> <tspan x="96.264" y="167">t</tspan> <tspan x="75.615" y="200">loop</tspan></text><text id="macrotask-queue" fill="#AF6E24" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal"><tspan x="351.17" y="136">macrotas</tspan> <tspan x="397.201" y="169">k</tspan> <tspan x="367.951" y="202">queue</tspan></text><path id="Path" fill="#C06334" fill-rule="nonzero" d="M192 40c22.467 0 43.818 7.359 61.285 20.712l.622.479.143.122 8.961 8.422-4.584-14.61 3.817-1.197 6.869 21.895 1.064 3.392-3.452-.852-22.278-5.5.959-3.883 14.864 3.669-8.886-8.352-.55-.424c-16.564-12.656-36.757-19.698-58.036-19.87L192 44c-30.748 0-59.095 14.403-77.315 38.412l-.549.73-3.208-2.387C129.87 55.303 159.664 40 192 40z"/><path id="Path-Copy-2" fill="#C06334" fill-rule="nonzero" d="M269.882 208.148l2.823 2.834-.366.365a533.245 533.245 0 00-3.982 4.033l-.333.34c-9.922 10.12-14.79 14.544-22.017 19.272-15.185 9.934-34.01 15.688-51.594 15.688-25.222 0-47.144-6.827-64.077-19.673l-.589-.45-.089-.07-.08-.078-8.854-8.581 4.36 14.68-3.835 1.138-6.532-21.998-1.012-3.409 3.439.906 22.19 5.841-1.018 3.868-14.808-3.898 8.766 8.497.488.374c16.02 12.15 36.782 18.698 60.792 18.85l.859.003c16.796 0 34.862-5.522 49.404-15.035 6.911-4.521 11.624-8.806 21.35-18.725l.334-.34a633.126 633.126 0 013.46-3.511l.736-.736.185-.185z"/><text id="setTimeout" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="230" y="164">setTimeout</tspan></text></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3 KiB

After

Width:  |  Height:  |  Size: 3 KiB

Before After
Before After

2
5-network/05-fetch-crossorigin/xhr-preflight.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 5.1 KiB

Before After
Before After

2
5-network/11-websocket/websocket-handshake.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="429" height="348" viewBox="0 0 429 348"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="network" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="websocket-handshake.svg"><path id="Rectangle-227" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M2 16h128v64H2z"/><text id="Browser" fill="#AF6E24" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="40" y="49">Browser</tspan></text><path id="Rectangle-228" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M298 16h128v64H298z"/><text id="Server" fill="#AF6E24" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="340" y="49">Server</tspan></text><path id="Line" stroke="#7E7C7B" stroke-linecap="square" d="M67 81v250.5M363 81v251.5"/><path id="Line" fill="#C06334" fill-rule="nonzero" d="M349 133l14 7-14 7v-6H68v-2h281v-6z"/><path id="Line-Copy" fill="#C06334" fill-rule="nonzero" d="M83 204v6h281v2H83v6l-14-7 14-7z"/><text id="HTTP-request" fill="#AF6E24" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="172.015" y="130">HTTP-request</tspan></text><text id="&quot;Hey,-server,-let's" fill="#AF6E24" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="102.605" y="161">&quot;Hey, server, let&apos;s talk WebSocket?&quot;</tspan></text><text id="HTTP-response-&quot;Okay!" fill="#AF6E24" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="166.419" y="204">HTTP-response</tspan> <tspan x="191.972" y="226">&quot;Okay!&quot;</tspan></text><path id="Line-Copy-2" fill="#C06334" fill-rule="nonzero" d="M81 272v6h2v2h-2v6l-14-7 14-7zm268 0l14 7-14 7v-14zm-260 6v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4z"/><text id="WebSocket-protocol" fill="#AF6E24" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="151.604" y="272">WebSocket protocol</tspan></text></g></g></svg> <svg xmlns="http://www.w3.org/2000/svg" width="429" height="348" viewBox="0 0 429 348"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="network" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="websocket-handshake.svg"><path id="Rectangle-227" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M2 16h128v64H2z"/><text id="Browser" fill="#AF6E24" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="40" y="49">Browser</tspan></text><path id="Rectangle-228" fill="#FBF2EC" stroke="#DBAF88" stroke-width="2" d="M298 16h128v64H298z"/><text id="Server" fill="#AF6E24" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="340" y="49">Server</tspan></text><path id="Line" stroke="#7E7C7B" stroke-linecap="square" d="M67 81v250.5M363 81v251.5"/><path id="Line" fill="#C06334" fill-rule="nonzero" d="M349 133l14 7-14 7v-6H68v-2h281v-6z"/><path id="Line-Copy" fill="#C06334" fill-rule="nonzero" d="M83 204v6h281v2H83v6l-14-7 14-7z"/><text id="HTTP-request" fill="#AF6E24" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="172.015" y="130">HTTP-request</tspan></text><text id="&quot;Hey,-server,-let's" fill="#AF6E24" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="102.605" y="161">&quot;Hey, server, let&apos;s talk WebSocket?&quot;</tspan></text><text id="HTTP-response-&quot;Okay!" fill="#AF6E24" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="166.419" y="204">HTTP-response</tspan> <tspan x="191.972" y="226">&quot;Okay!&quot;</tspan></text><path id="Line-Copy-2" fill="#C06334" fill-rule="nonzero" d="M81 272v6h2v2h-2v6l-14-7 14-7zm268 0l14 7-14 7v-14zm-260 6v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4zm6 0v2h-4v-2h4z" transform="matrix(-1 0 0 1 430 0)"/><text id="WebSocket-protocol" fill="#AF6E24" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="151.604" y="272">WebSocket protocol</tspan></text></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

Before After
Before After

2
7-animation/1-bezier-curve/bezier3-e.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="149" height="187" viewBox="0 0 149 187"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="animation" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="bezier3-e.svg"><path id="Triangle-1" stroke="#DBAF88" d="M74.5 43L125 144H24z"/><path id="Path-4" stroke="#A7333A" stroke-width="2" d="M24.279 143.124c50.221-100.184 89.93-17.718 99.822.521"/><circle id="Oval-1" cx="24" cy="144" r="4" fill="#FFF" stroke="#DBAF88"/><text id="1" fill="#AF6E24" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="20" y="165">1</tspan></text><circle id="Oval-2" cx="124" cy="144" r="4" fill="#FFF" stroke="#DBAF88"/><text id="3" fill="#AF6E24" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="120" y="165">3</tspan></text><circle id="Oval-3" cx="74" cy="44" r="4" fill="#FFF" stroke="#DBAF88"/><text id="-4" fill="#AF6E24" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="70.19" y="36">3</tspan></text></g></g></svg> <svg xmlns="http://www.w3.org/2000/svg" width="149" height="187" viewBox="0 0 149 187"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="animation" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="bezier3-e.svg"><path id="Triangle-1" stroke="#DBAF88" d="M74.5 43L125 144H24z"/><path id="Path-4" stroke="#A7333A" stroke-width="2" d="M24.279 143.124c50.221-100.184 89.93-17.718 99.822.521"/><circle id="Oval-1" cx="24" cy="144" r="4" fill="#FFF" stroke="#DBAF88"/><text id="1" fill="#AF6E24" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="20" y="165">1</tspan></text><circle id="Oval-2" cx="124" cy="144" r="4" fill="#FFF" stroke="#DBAF88"/><text id="3" fill="#AF6E24" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="120" y="165">3</tspan></text><circle id="Oval-3" cx="74" cy="44" r="4" fill="#FFF" stroke="#DBAF88"/><text id="2" fill="#AF6E24" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="70.19" y="36">2</tspan></text></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

Before After
Before After

2
7-animation/1-bezier-curve/bezier3.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="149" height="187" viewBox="0 0 149 187"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="animation" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="bezier3.svg"><path id="Path-4" stroke="#A7333A" stroke-width="2" d="M24.279 143.124c50.221-100.184 89.93-17.718 99.822.521"/><circle id="Oval-1" cx="24" cy="144" r="4" fill="#FFF" stroke="#DBAF88"/><text id="1" fill="#AF6E24" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="20" y="165">1</tspan></text><circle id="Oval-2" cx="124" cy="144" r="4" fill="#FFF" stroke="#DBAF88"/><text id="3" fill="#AF6E24" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="120" y="165">3</tspan></text><circle id="Oval-3" cx="74" cy="44" r="4" fill="#FFF" stroke="#DBAF88"/><text id="2" fill="#AF6E24" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="69.99" y="32">2</tspan></text></g></g></svg> <svg xmlns="http://www.w3.org/2000/svg" width="149" height="187" viewBox="0 0 149 187"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="animation" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="bezier3.svg"><path id="Path-4" stroke="#A7333A" stroke-width="2" d="M24.279 143.124c50.221-100.184 89.93-17.718 99.822.521"/><circle id="Oval-1" cx="24" cy="144" r="4" fill="#FFF" stroke="#DBAF88"/><text id="1" fill="#AF6E24" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="20" y="165">1</tspan></text><circle id="Oval-2" cx="124" cy="144" r="4" fill="#FFF" stroke="#DBAF88"/><text id="3" fill="#AF6E24" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="120" y="165">3</tspan></text><circle id="Oval-3" cx="74" cy="44" r="4" fill="#FFF" stroke="#DBAF88"/><text id="2" fill="#AF6E24" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="70.19" y="36">2</tspan></text></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

Before After
Before After

BIN
figures.sketch
View file

Binary file not shown.