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

Embed font to SVG

Browse source
This commit is contained in:
Ilya Kantor 2019-08-11 14:17:38 +03:00
parent 1310171dd7
commit 4d44df6a3a
226 changed files with 225 additions and 11893 deletions
Download patch file Download diff file Expand all files Collapse all files

37
2-ui/99-ui-misc/02-selection-range/range-example-p-0-1.svg
View file

@ -1,36 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="640px" height="89px" viewBox="0 0 640 89" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>range-example-p-0-1.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<rect id="path-1" x="47" y="35" width="262" height="21"></rect>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="262" height="21" fill="white">
<use xlink:href="#path-1"></use>
</mask>
</defs>
<g id="misc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="range-example-p-0-1.svg">
<text id="&lt;p&gt;Example:-&lt;i&gt;itali" font-family="PTMono-Regular, PT Mono" font-size="18" font-weight="normal" letter-spacing="1" fill="#8A704D">
<tspan x="13" y="51">&lt;p&gt;Example: &lt;i&gt;italic&lt;/i&gt; and &lt;b&gt;bold&lt;/b&gt;&lt;/p&gt;</tspan>
</text>
<use id="Rectangle" stroke="#0000FF" mask="url(#mask-2)" stroke-width="2" fill-opacity="0.1" fill="#0000FF" stroke-dasharray="5,2" xlink:href="#path-1"></use>
<polyline id="Path-Copy" stroke="#EE6B47" stroke-width="2" transform="translate(99.000000, 62.500000) scale(1, -1) translate(-99.000000, -62.500000) " points="48 68 48 57 48 57 150 57 150 68"></polyline>
<polyline id="Path-Copy-2" stroke="#EE6B47" stroke-width="2" transform="translate(231.000000, 62.500000) scale(1, -1) translate(-231.000000, -62.500000) " points="154 68 154 57 154 57 308 57 308 68"></polyline>
<text id="0" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing="0.777777778" fill="#000000">
<tspan x="93" y="84">0</tspan>
</text>
<text id="1" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing="0.777777778" fill="#000000">
<tspan x="226" y="84">1</tspan>
</text>
<text id="2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing="0.777777778" fill="#000000">
<tspan x="334" y="84">2</tspan>
</text>
<text id="3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing="0.777777778" fill="#000000">
<tspan x="428" y="84">3</tspan>
</text>
<polyline id="Path-Copy-3" stroke="#EE6B47" stroke-width="2" transform="translate(338.500000, 62.500000) scale(1, -1) translate(-338.500000, -62.500000) " points="312 68 312 57 312 57 365 57 365 68"></polyline>
<polyline id="Path-Copy-4" stroke="#EE6B47" stroke-width="2" transform="translate(433.000000, 62.500000) scale(1, -1) translate(-433.000000, -62.500000) " points="369 68 369 57 369 57 497 57 497 68"></polyline>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="89" viewBox="0 0 640 89"><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(/pack/modules/styles/blocks/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><defs><path id="path-1" d="M47 35h262v21H47z"/><mask id="mask-2" width="262" height="21" x="0" y="0" fill="#fff" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox"><use xlink:href="#path-1"/></mask></defs><g id="misc" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="range-example-p-0-1.svg"><text id="&lt;p&gt;Example:-&lt;i&gt;itali" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="18" font-weight="normal" letter-spacing="1"><tspan x="13" y="51">&lt;p&gt;Example: &lt;i&gt;italic&lt;/i&gt; and &lt;b&gt;bold&lt;/b&gt;&lt;/p&gt;</tspan></text><use id="Rectangle" fill="#00F" fill-opacity=".1" stroke="#00F" stroke-dasharray="5,2" stroke-width="2" mask="url(#mask-2)" xlink:href="#path-1"/><path id="Path-Copy" stroke="#EE6B47" stroke-width="2" d="M48 57v11h102V57"/><path id="Path-Copy-2" stroke="#EE6B47" stroke-width="2" d="M154 57v11h154V57"/><text id="0" fill="#000" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing=".778"><tspan x="93" y="84">0</tspan></text><text id="1" fill="#000" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing=".778"><tspan x="226" y="84">1</tspan></text><text id="2" fill="#000" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing=".778"><tspan x="334" y="84">2</tspan></text><text id="3" fill="#000" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing=".778"><tspan x="428" y="84">3</tspan></text><path id="Path-Copy-3" stroke="#EE6B47" stroke-width="2" d="M312 57v11h53V57"/><path id="Path-Copy-4" stroke="#EE6B47" stroke-width="2" d="M369 57v11h128V57"/></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

Before After
Before After

37
2-ui/99-ui-misc/02-selection-range/range-example-p-1-3.svg
View file

@ -1,36 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="640px" height="89px" viewBox="0 0 640 89" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>range-example-p-1-3.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<rect id="path-1" x="153" y="35" width="345" height="21"></rect>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="345" height="21" fill="white">
<use xlink:href="#path-1"></use>
</mask>
</defs>
<g id="misc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="range-example-p-1-3.svg">
<text id="&lt;p&gt;Example:-&lt;i&gt;itali" font-family="PTMono-Regular, PT Mono" font-size="18" font-weight="normal" letter-spacing="1" fill="#8A704D">
<tspan x="13" y="51">&lt;p&gt;Example: &lt;i&gt;italic&lt;/i&gt; and &lt;b&gt;bold&lt;/b&gt;&lt;/p&gt;</tspan>
</text>
<use id="Rectangle" stroke="#0000FF" mask="url(#mask-2)" stroke-width="2" fill-opacity="0.1" fill="#0000FF" stroke-dasharray="5,2" xlink:href="#path-1"></use>
<polyline id="Path-Copy" stroke="#EE6B47" stroke-width="2" transform="translate(99.000000, 62.500000) scale(1, -1) translate(-99.000000, -62.500000) " points="48 68 48 57 48 57 150 57 150 68"></polyline>
<polyline id="Path-Copy-2" stroke="#EE6B47" stroke-width="2" transform="translate(231.000000, 62.500000) scale(1, -1) translate(-231.000000, -62.500000) " points="154 68 154 57 154 57 308 57 308 68"></polyline>
<text id="0" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing="0.777777778" fill="#000000">
<tspan x="93" y="84">0</tspan>
</text>
<text id="1" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing="0.777777778" fill="#000000">
<tspan x="226" y="84">1</tspan>
</text>
<text id="2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing="0.777777778" fill="#000000">
<tspan x="334" y="84">2</tspan>
</text>
<text id="3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing="0.777777778" fill="#000000">
<tspan x="428" y="84">3</tspan>
</text>
<polyline id="Path-Copy-3" stroke="#EE6B47" stroke-width="2" transform="translate(338.500000, 62.500000) scale(1, -1) translate(-338.500000, -62.500000) " points="312 68 312 57 312 57 365 57 365 68"></polyline>
<polyline id="Path-Copy-4" stroke="#EE6B47" stroke-width="2" transform="translate(433.000000, 62.500000) scale(1, -1) translate(-433.000000, -62.500000) " points="369 68 369 57 369 57 497 57 497 68"></polyline>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="89" viewBox="0 0 640 89"><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(/pack/modules/styles/blocks/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><defs><path id="path-1" d="M153 35h345v21H153z"/><mask id="mask-2" width="345" height="21" x="0" y="0" fill="#fff" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox"><use xlink:href="#path-1"/></mask></defs><g id="misc" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="range-example-p-1-3.svg"><text id="&lt;p&gt;Example:-&lt;i&gt;itali" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="18" font-weight="normal" letter-spacing="1"><tspan x="13" y="51">&lt;p&gt;Example: &lt;i&gt;italic&lt;/i&gt; and &lt;b&gt;bold&lt;/b&gt;&lt;/p&gt;</tspan></text><use id="Rectangle" fill="#00F" fill-opacity=".1" stroke="#00F" stroke-dasharray="5,2" stroke-width="2" mask="url(#mask-2)" xlink:href="#path-1"/><path id="Path-Copy" stroke="#EE6B47" stroke-width="2" d="M48 57v11h102V57"/><path id="Path-Copy-2" stroke="#EE6B47" stroke-width="2" d="M154 57v11h154V57"/><text id="0" fill="#000" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing=".778"><tspan x="93" y="84">0</tspan></text><text id="1" fill="#000" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing=".778"><tspan x="226" y="84">1</tspan></text><text id="2" fill="#000" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing=".778"><tspan x="334" y="84">2</tspan></text><text id="3" fill="#000" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing=".778"><tspan x="428" y="84">3</tspan></text><path id="Path-Copy-3" stroke="#EE6B47" stroke-width="2" d="M312 57v11h53V57"/><path id="Path-Copy-4" stroke="#EE6B47" stroke-width="2" d="M369 57v11h128V57"/></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

Before After
Before After

48
2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3-range.svg
View file

@ -1,47 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="683px" height="229px" viewBox="0 0 683 229" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>range-example-p-2-b-3-range.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<rect id="path-1" x="183" y="54" width="368" height="21"></rect>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="368" height="21" fill="white">
<use xlink:href="#path-1"></use>
</mask>
</defs>
<g id="misc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="range-example-p-2-b-3-range.svg">
<text id="&lt;p&gt;Example:-&lt;i&gt;itali" font-family="PTMono-Regular, PT Mono" font-size="18" font-weight="normal" letter-spacing="1" fill="#8A704D">
<tspan x="126" y="70">&lt;p&gt;Example: &lt;i&gt;italic&lt;/i&gt; and &lt;b&gt;bold&lt;/b&gt;&lt;/p&gt;</tspan>
</text>
<polyline id="Path" stroke="#EE6B47" stroke-width="2" transform="translate(213.000000, 73.000000) scale(1, -1) translate(-213.000000, -73.000000) " points="160 78 160 68 160 68 266 68 266 78"></polyline>
<polyline id="Path-Copy-2" stroke="#EE6B47" stroke-width="2" transform="translate(392.000000, 152.500000) scale(1, -1) translate(-392.000000, -152.500000) " points="126 162 126 143 126 143 658 143 658 162"></polyline>
<polyline id="Path-Copy" stroke="#EE6B47" stroke-width="2" transform="translate(539.000000, 75.000000) scale(1, -1) translate(-539.000000, -75.000000) " points="514 80 514 70 514 70 564 70 564 80"></polyline>
<path id="Line" d="M141.805422,96.0335122 L125.588919,81.8440721 L126.905928,80.3389187 L143.122431,94.5283588 L147.073459,90.0128986 L153,104.5 L137.854394,100.548972 L141.805422,96.0335122 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy-3" d="M484.805422,96.0335122 L468.588919,81.8440721 L469.905928,80.3389187 L486.122431,94.5283588 L490.073459,90.0128986 L496,104.5 L480.854394,100.548972 L484.805422,96.0335122 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<use id="Rectangle" stroke="#0000FF" mask="url(#mask-2)" stroke-width="2" fill-opacity="0.1" fill="#0000FF" stroke-dasharray="5,2" xlink:href="#path-1"></use>
<text id="startContainer-(&lt;p&gt;." font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#000000">
<tspan x="10.3" y="118">startContainer</tspan>
<tspan x="0.7" y="136">(&lt;p&gt;.firstChild)</tspan>
</text>
<path id="Line-Copy" d="M184,88 L184,104 L182,104 L182,88 L176,88 L183,74 L190,88 L184,88 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy-2" d="M552,87 L552,103 L550,103 L550,87 L544,87 L551,73 L558,87 L552,87 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="startOffset-(=2)" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#000000">
<tspan x="170.2" y="118">startOffset</tspan>
<tspan x="203.8" y="136">(=2)</tspan>
</text>
<text id="commonAncestorContai" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#000000">
<tspan x="316.1" y="181">commonAncestorContainer</tspan>
<tspan x="402.5" y="199">(&lt;p&gt;)</tspan>
</text>
<text id="endContainer-(&lt;b&gt;.fi" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#000000">
<tspan x="388.9" y="117">endContainer</tspan>
<tspan x="369.7" y="135">(&lt;b&gt;.firstChild)</tspan>
</text>
<text id="endOffset-(=3)" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#000000">
<tspan x="537.3" y="118">endOffset</tspan>
<tspan x="561.3" y="136">(=3)</tspan>
</text>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="683" height="229" viewBox="0 0 683 229"><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(/pack/modules/styles/blocks/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><defs><path id="path-1" d="M183 54h368v21H183z"/><mask id="mask-2" width="368" height="21" x="0" y="0" fill="#fff" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox"><use xlink:href="#path-1"/></mask></defs><g id="misc" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="range-example-p-2-b-3-range.svg"><text id="&lt;p&gt;Example:-&lt;i&gt;itali" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="18" font-weight="normal" letter-spacing="1"><tspan x="126" y="70">&lt;p&gt;Example: &lt;i&gt;italic&lt;/i&gt; and &lt;b&gt;bold&lt;/b&gt;&lt;/p&gt;</tspan></text><path id="Path" stroke="#EE6B47" stroke-width="2" d="M160 68v10h106V68"/><path id="Path-Copy-2" stroke="#EE6B47" stroke-width="2" d="M126 143v19h532v-19"/><path id="Path-Copy" stroke="#EE6B47" stroke-width="2" d="M514 70v10h50V70"/><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M141.805 96.034l-16.216-14.19 1.317-1.505 16.216 14.19 3.951-4.516L153 104.5l-15.146-3.951 3.951-4.515z"/><path id="Line-Copy-3" fill="#EE6B47" fill-rule="nonzero" d="M484.805 96.034l-16.216-14.19 1.317-1.505 16.216 14.19 3.951-4.516L496 104.5l-15.146-3.951 3.951-4.515z"/><use id="Rectangle" fill="#00F" fill-opacity=".1" stroke="#00F" stroke-dasharray="5,2" stroke-width="2" mask="url(#mask-2)" xlink:href="#path-1"/><text id="startContainer-(&lt;p&gt;." fill="#000" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal"><tspan x="10.3" y="118">startContainer</tspan> <tspan x=".7" y="136">(&lt;p&gt;.firstChild)</tspan></text><path id="Line-Copy" fill="#EE6B47" fill-rule="nonzero" d="M184 88v16h-2V88h-6l7-14 7 14h-6z"/><path id="Line-Copy-2" fill="#EE6B47" fill-rule="nonzero" d="M552 87v16h-2V87h-6l7-14 7 14h-6z"/><text id="startOffset-(=2)" fill="#000" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal"><tspan x="170.2" y="118">startOffset</tspan> <tspan x="203.8" y="136">(=2)</tspan></text><text id="commonAncestorContai" fill="#000" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal"><tspan x="316.1" y="181">commonAncestorContainer</tspan> <tspan x="402.5" y="199">(&lt;p&gt;)</tspan></text><text id="endContainer-(&lt;b&gt;.fi" fill="#000" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal"><tspan x="388.9" y="117">endContainer</tspan> <tspan x="369.7" y="135">(&lt;b&gt;.firstChild)</tspan></text><text id="endOffset-(=3)" fill="#000" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal"><tspan x="537.3" y="118">endOffset</tspan> <tspan x="561.3" y="136">(=3)</tspan></text></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

Before After
Before After

37
2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3.svg
View file

@ -1,36 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="640px" height="89px" viewBox="0 0 640 89" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>range-example-p-2-b-3.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<rect id="path-1" x="71" y="35" width="367" height="21"></rect>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="367" height="21" fill="white">
<use xlink:href="#path-1"></use>
</mask>
</defs>
<g id="misc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="range-example-p-2-b-3.svg">
<text id="&lt;p&gt;Example:-&lt;i&gt;itali" font-family="PTMono-Regular, PT Mono" font-size="18" font-weight="normal" letter-spacing="1" fill="#8A704D">
<tspan x="13" y="51">&lt;p&gt;Example: &lt;i&gt;italic&lt;/i&gt; and &lt;b&gt;bold&lt;/b&gt;&lt;/p&gt;</tspan>
</text>
<use id="Rectangle" stroke="#0000FF" mask="url(#mask-2)" stroke-width="2" fill-opacity="0.1" fill="#0000FF" stroke-dasharray="5,2" xlink:href="#path-1"></use>
<polyline id="Path-Copy" stroke="#EE6B47" stroke-width="2" transform="translate(99.000000, 62.500000) scale(1, -1) translate(-99.000000, -62.500000) " points="48 68 48 57 48 57 150 57 150 68"></polyline>
<polyline id="Path-Copy-2" stroke="#EE6B47" stroke-width="2" transform="translate(231.000000, 62.500000) scale(1, -1) translate(-231.000000, -62.500000) " points="154 68 154 57 154 57 308 57 308 68"></polyline>
<text id="0" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing="0.777777778" fill="#000000">
<tspan x="93" y="84">0</tspan>
</text>
<text id="1" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing="0.777777778" fill="#000000">
<tspan x="226" y="84">1</tspan>
</text>
<text id="2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing="0.777777778" fill="#000000">
<tspan x="334" y="84">2</tspan>
</text>
<text id="3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing="0.777777778" fill="#000000">
<tspan x="428" y="84">3</tspan>
</text>
<polyline id="Path-Copy-3" stroke="#EE6B47" stroke-width="2" transform="translate(338.500000, 62.500000) scale(1, -1) translate(-338.500000, -62.500000) " points="312 68 312 57 312 57 365 57 365 68"></polyline>
<polyline id="Path-Copy-4" stroke="#EE6B47" stroke-width="2" transform="translate(433.000000, 62.500000) scale(1, -1) translate(-433.000000, -62.500000) " points="369 68 369 57 369 57 497 57 497 68"></polyline>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="89" viewBox="0 0 640 89"><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(/pack/modules/styles/blocks/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><defs><path id="path-1" d="M71 35h367v21H71z"/><mask id="mask-2" width="367" height="21" x="0" y="0" fill="#fff" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox"><use xlink:href="#path-1"/></mask></defs><g id="misc" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="range-example-p-2-b-3.svg"><text id="&lt;p&gt;Example:-&lt;i&gt;itali" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="18" font-weight="normal" letter-spacing="1"><tspan x="13" y="51">&lt;p&gt;Example: &lt;i&gt;italic&lt;/i&gt; and &lt;b&gt;bold&lt;/b&gt;&lt;/p&gt;</tspan></text><use id="Rectangle" fill="#00F" fill-opacity=".1" stroke="#00F" stroke-dasharray="5,2" stroke-width="2" mask="url(#mask-2)" xlink:href="#path-1"/><path id="Path-Copy" stroke="#EE6B47" stroke-width="2" d="M48 57v11h102V57"/><path id="Path-Copy-2" stroke="#EE6B47" stroke-width="2" d="M154 57v11h154V57"/><text id="0" fill="#000" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing=".778"><tspan x="93" y="84">0</tspan></text><text id="1" fill="#000" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing=".778"><tspan x="226" y="84">1</tspan></text><text id="2" fill="#000" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing=".778"><tspan x="334" y="84">2</tspan></text><text id="3" fill="#000" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" letter-spacing=".778"><tspan x="428" y="84">3</tspan></text><path id="Path-Copy-3" stroke="#EE6B47" stroke-width="2" d="M312 57v11h53V57"/><path id="Path-Copy-4" stroke="#EE6B47" stroke-width="2" d="M369 57v11h128V57"/></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

Before After
Before After

47
2-ui/99-ui-misc/02-selection-range/selection-direction-backward.svg
View file

@ -1,46 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="559px" height="128px" viewBox="0 0 559 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>selection-direction-backward.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<rect id="path-1" x="47" y="62" width="262" height="21"></rect>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="262" height="21" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<linearGradient x1="0%" y1="50%" x2="100%" y2="50%" id="linearGradient-3">
<stop stop-color="#F2F2F2" offset="0%"></stop>
<stop stop-color="#808080" offset="100%"></stop>
</linearGradient>
<polygon id="path-4" points="7.84066209 8.51607073 12.4865478 6.86493774 1.13686838e-13 0 3.64025044 13.7764227 6.3662792 9.66798489 9.63003598 13.8454031 11.1044189 12.6934889"></polygon>
<filter x="-52.6%" y="-43.3%" width="212.1%" height="203.6%" filterUnits="objectBoundingBox" id="filter-5">
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="misc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="selection-direction-backward.svg">
<text id="&lt;p&gt;Example:-&lt;i&gt;itali" font-family="PTMono-Regular, PT Mono" font-size="18" font-weight="normal" letter-spacing="1" fill="#8A704D">
<tspan x="13" y="79">&lt;p&gt;Example: &lt;i&gt;italic&lt;/i&gt; and &lt;b&gt;bold&lt;/b&gt;&lt;/p&gt;</tspan>
</text>
<path id="Line-Copy-3" d="M308.675044,49.162478 L308.675044,49.5 L308,49.5 L296,55.5 L296,49.5 L47,49.5 L47,47.5 L296,47.5 L296,41.5 L308,47.5 L308.675044,47.5 L308.675044,47.837522 L310,48.5 L308.675044,49.162478 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="focus" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#000000">
<tspan x="25" y="32">focus</tspan>
</text>
<text id="anchor" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#000000">
<tspan x="277.2" y="32">anchor</tspan>
</text>
<use id="Rectangle" stroke="#0000FF" mask="url(#mask-2)" stroke-width="2" fill-opacity="0.1" fill="#0000FF" stroke-dasharray="5,2" xlink:href="#path-1"></use>
<rect id="Rectangle" fill="url(#linearGradient-3)" opacity="0.200000003" transform="translate(184.000000, 102.000000) scale(-1, 1) translate(-184.000000, -102.000000) " x="53" y="94" width="262" height="16"></rect>
<g id="Cursor-/-Default-White" transform="translate(49.000000, 94.000000)">
<g id="Rectangle-237">
<use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
<path stroke-opacity="0.8" stroke="#000000" stroke-width="1" d="M8.6617598,8.75489325 L11.806255,12.7796636 L9.54386134,14.5472392 L6.39936616,10.5224689 L3.44128728,14.9806328 L-0.781456351,-1.00021852 L13.7031213,6.96320943 L8.6617598,8.75489325 Z" fill="#FFFFFF" fill-rule="evenodd"></path>
</g>
</g>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="559" height="128" viewBox="0 0 559 128"><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(/pack/modules/styles/blocks/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><defs><path id="path-1" d="M47 62h262v21H47z"/><path id="path-4" d="M7.84 8.516l4.647-1.651L0 0l3.64 13.776 2.726-4.108 3.264 4.177 1.474-1.152z"/><linearGradient id="linearGradient-3" x1="0%" x2="100%" y1="50%" y2="50%"><stop offset="0%" stop-color="#F2F2F2"/><stop offset="100%" stop-color="gray"/></linearGradient><filter id="filter-5" width="212.1%" height="203.6%" x="-52.6%" y="-43.3%" filterUnits="objectBoundingBox"><feMorphology in="SourceAlpha" operator="dilate" radius="1" result="shadowSpreadOuter1"/><feOffset dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/><feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/></filter><mask id="mask-2" width="262" height="21" x="0" y="0" fill="#fff" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox"><use xlink:href="#path-1"/></mask></defs><g id="misc" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="selection-direction-backward.svg"><text id="&lt;p&gt;Example:-&lt;i&gt;itali" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="18" font-weight="normal" letter-spacing="1"><tspan x="13" y="79">&lt;p&gt;Example: &lt;i&gt;italic&lt;/i&gt; and &lt;b&gt;bold&lt;/b&gt;&lt;/p&gt;</tspan></text><path id="Line-Copy-3" fill="#EE6B47" fill-rule="nonzero" d="M308.675 49.162v.338H308l-12 6v-6H47v-2h249v-6l12 6h.675v.338L310 48.5l-1.325.662z"/><text id="focus" fill="#000" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal"><tspan x="25" y="32">focus</tspan></text><text id="anchor" fill="#000" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal"><tspan x="277.2" y="32">anchor</tspan></text><use id="Rectangle" fill="#00F" fill-opacity=".1" stroke="#00F" stroke-dasharray="5,2" stroke-width="2" mask="url(#mask-2)" xlink:href="#path-1"/><path id="Rectangle" fill="url(#linearGradient-3)" d="M53 94h262v16H53z" opacity=".2" transform="matrix(-1 0 0 1 368 0)"/><g id="Cursor-/-Default-White" transform="translate(49 94)"><g id="Rectangle-237"><use fill="#000" filter="url(#filter-5)" xlink:href="#path-4"/><path fill="#FFF" stroke="#000" stroke-opacity=".8" d="M8.662 8.755l3.144 4.025-2.262 1.767-3.145-4.025-2.958 4.459L-.78-1l14.484 7.963-5.041 1.792z"/></g></g></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 3 KiB

Before After
Before After

47
2-ui/99-ui-misc/02-selection-range/selection-direction-forward.svg
View file

@ -1,46 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="563px" height="128px" viewBox="0 0 563 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>selection-direction-forward.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<linearGradient x1="0%" y1="50%" x2="100%" y2="50%" id="linearGradient-1">
<stop stop-color="#F2F2F2" offset="0%"></stop>
<stop stop-color="#808080" offset="100%"></stop>
</linearGradient>
<rect id="path-2" x="47" y="72" width="262" height="21"></rect>
<mask id="mask-3" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="262" height="21" fill="white">
<use xlink:href="#path-2"></use>
</mask>
<polygon id="path-4" points="7.84066209 8.51607073 12.4865478 6.86493774 1.13686838e-13 0 3.64025044 13.7764227 6.3662792 9.66798489 9.63003598 13.8454031 11.1044189 12.6934889"></polygon>
<filter x="-52.6%" y="-43.3%" width="212.1%" height="203.6%" filterUnits="objectBoundingBox" id="filter-5">
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="misc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="selection-direction-forward.svg">
<rect id="Rectangle" fill="url(#linearGradient-1)" opacity="0.200000003" x="47" y="100" width="262" height="16"></rect>
<text id="&lt;p&gt;Example:-&lt;i&gt;itali" font-family="PTMono-Regular, PT Mono" font-size="18" font-weight="normal" letter-spacing="1" fill="#8A704D">
<tspan x="13" y="89">&lt;p&gt;Example: &lt;i&gt;italic&lt;/i&gt; and &lt;b&gt;bold&lt;/b&gt;&lt;/p&gt;</tspan>
</text>
<path id="Line-Copy-3" d="M308.675044,59.162478 L308.675044,59.5 L308,59.5 L296,65.5 L296,59.5 L47,59.5 L47,57.5 L296,57.5 L296,51.5 L308,57.5 L308.675044,57.5 L308.675044,57.837522 L310,58.5 L308.675044,59.162478 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="anchor" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#000000">
<tspan x="18.2" y="42">anchor</tspan>
</text>
<text id="focus" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#000000">
<tspan x="283" y="42">focus</tspan>
</text>
<use id="Rectangle" stroke="#0000FF" mask="url(#mask-3)" stroke-width="2" fill-opacity="0.1" fill="#0000FF" stroke-dasharray="5,2" xlink:href="#path-2"></use>
<g id="Cursor-/-Default-White" transform="translate(306.000000, 100.000000)">
<g id="Rectangle-237">
<use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
<path stroke-opacity="0.8" stroke="#000000" stroke-width="1" d="M8.6617598,8.75489325 L11.806255,12.7796636 L9.54386134,14.5472392 L6.39936616,10.5224689 L3.44128728,14.9806328 L-0.781456351,-1.00021852 L13.7031213,6.96320943 L8.6617598,8.75489325 Z" fill="#FFFFFF" fill-rule="evenodd"></path>
</g>
</g>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="563" height="128" viewBox="0 0 563 128"><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(/pack/modules/styles/blocks/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><defs><path id="path-2" d="M47 72h262v21H47z"/><path id="path-4" d="M7.84 8.516l4.647-1.651L0 0l3.64 13.776 2.726-4.108 3.264 4.177 1.474-1.152z"/><linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="50%" y2="50%"><stop offset="0%" stop-color="#F2F2F2"/><stop offset="100%" stop-color="gray"/></linearGradient><filter id="filter-5" width="212.1%" height="203.6%" x="-52.6%" y="-43.3%" filterUnits="objectBoundingBox"><feMorphology in="SourceAlpha" operator="dilate" radius="1" result="shadowSpreadOuter1"/><feOffset dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/><feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/></filter><mask id="mask-3" width="262" height="21" x="0" y="0" fill="#fff" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox"><use xlink:href="#path-2"/></mask></defs><g id="misc" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="selection-direction-forward.svg"><path id="Rectangle" fill="url(#linearGradient-1)" d="M47 100h262v16H47z" opacity=".2"/><text id="&lt;p&gt;Example:-&lt;i&gt;itali" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="18" font-weight="normal" letter-spacing="1"><tspan x="13" y="89">&lt;p&gt;Example: &lt;i&gt;italic&lt;/i&gt; and &lt;b&gt;bold&lt;/b&gt;&lt;/p&gt;</tspan></text><path id="Line-Copy-3" fill="#EE6B47" fill-rule="nonzero" d="M308.675 59.162v.338H308l-12 6v-6H47v-2h249v-6l12 6h.675v.338L310 58.5l-1.325.662z"/><text id="anchor" fill="#000" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal"><tspan x="18.2" y="42">anchor</tspan></text><text id="focus" fill="#000" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal"><tspan x="283" y="42">focus</tspan></text><use id="Rectangle" fill="#00F" fill-opacity=".1" stroke="#00F" stroke-dasharray="5,2" stroke-width="2" mask="url(#mask-3)" xlink:href="#path-2"/><g id="Cursor-/-Default-White" transform="translate(306 100)"><g id="Rectangle-237"><use fill="#000" filter="url(#filter-5)" xlink:href="#path-4"/><path fill="#FFF" stroke="#000" stroke-opacity=".8" d="M8.662 8.755l3.144 4.025-2.262 1.767-3.145-4.025-2.958 4.459L-.78-1l14.484 7.963-5.041 1.792z"/></g></g></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.7 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

Before After
Before After

24
2-ui/99-ui-misc/02-selection-range/selection-firefox.svg
View file

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

Before

Width:  |  Height:  |  Size: 106 KiB

After

Width:  |  Height:  |  Size: 106 KiB

Before After
Before After

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

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

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 8.2 KiB

Before After
Before After

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

@ -1,36 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="479px" height="279px" viewBox="0 0 479 279" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>eventLoop.svg</title>
<desc>Created with sketchtool.</desc>
<g id="promise" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="eventLoop.svg">
<rect id="Rectangle-1-Copy-5" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="218" y="173" width="108" height="28"></rect>
<text id="..." font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#8A704D">
<tspan x="258.9" y="189">...</tspan>
</text>
<rect id="Rectangle-1-Copy-6" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="218" y="90" width="108" height="28"></rect>
<rect id="Rectangle-1-Copy-8" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="218" y="117" width="108" height="28"></rect>
<text id="mousemove" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#8A704D">
<tspan x="233.7" y="136">mousemove</tspan>
</text>
<rect id="Rectangle-1-Copy-9" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="218" y="145" width="108" height="28"></rect>
<text id="script" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#8A704D">
<tspan x="246.8" y="109">script</tspan>
</text>
<text id="event-loop" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal" fill="#000000">
<tspan x="69.6621094" y="134">event</tspan>
<tspan x="75.6152344" y="167">loop</tspan>
</text>
<text id="macrotask-queue" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal" fill="#9B9B9B">
<tspan x="345.111328" y="136">macrotask</tspan>
<tspan x="367.951172" y="169">queue</tspan>
</text>
<path id="Path" d="M263.010725,69.7351956 L258.427178,55.1253877 L262.243758,53.9280087 L270.177144,79.2152421 L244.446978,72.8637563 L245.405602,68.9803249 L260.271316,72.6499231 L251.379057,64.2925256 C234.508006,51.2131452 213.805751,44 192,44 C160.941365,44 132.332745,58.6951996 114.136419,83.1428166 L110.927659,80.7545412 C129.87093,55.303369 159.663534,40 192,40 C214.734181,40 236.326559,47.5348634 253.906792,61.1909666 L254.049591,61.3130651 L263.010725,69.7351956 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Path-Copy-2" d="M120.724894,221.828651 L125.083129,236.507247 L121.248579,237.645767 L113.705173,212.239473 L139.334576,218.986062 L138.316319,222.854285 L123.508821,218.956414 L132.2805,227.4584 C148.5538,239.990276 169.796977,246.679687 194.412852,246.679687 C211.208683,246.679687 229.275076,241.15794 243.817212,231.644681 C250.728173,227.123628 255.441499,222.839019 265.167458,212.919811 L265.501312,212.579321 C267.561111,210.478661 268.636053,209.389458 269.882343,208.148251 L272.704986,210.98245 C271.473253,212.20916 270.406519,213.290045 268.357381,215.379834 L268.02357,215.72028 C258.101872,225.839116 253.233892,230.264312 246.007006,234.992038 C230.82183,244.925965 211.996447,250.679687 194.412852,250.679687 C168.89777,250.679687 146.759649,243.69382 129.747255,230.556099 L129.658358,230.487449 L120.724894,221.828651 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="setTimeout" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#8A704D">
<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(/pack/modules/styles/blocks/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/pack/modules/styles/blocks/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/pack/modules/styles/blocks/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="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M218 173h108v28H218z"/><text id="..." fill="#8A704D" 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="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M218 90h108v28H218z"/><path id="Rectangle-1-Copy-8" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M218 117h108v28H218z"/><text id="mousemove" fill="#8A704D" 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="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M218 145h108v28H218z"/><text id="script" fill="#8A704D" 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="#000" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal"><tspan x="69.662" y="134">event</tspan> <tspan x="75.615" y="167">loop</tspan></text><text id="macrotask-queue" fill="#9B9B9B" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal"><tspan x="345.111" y="136">macrotask</tspan> <tspan x="367.951" y="169">queue</tspan></text><path id="Path" fill="#EE6B47" fill-rule="nonzero" d="M263.01 69.735l-4.583-14.61 3.817-1.197 7.933 25.287-25.73-6.351.959-3.884 14.865 3.67-8.892-8.357C234.508 51.213 213.806 44 192 44c-31.059 0-59.667 14.695-77.864 39.143l-3.208-2.388C129.87 55.303 159.664 40 192 40c22.734 0 44.327 7.535 61.907 21.191l.143.122 8.96 8.422z"/><path id="Path-Copy-2" fill="#EE6B47" fill-rule="nonzero" d="M120.725 221.829l4.358 14.678-3.834 1.139-7.544-25.407 25.63 6.747-1.019 3.868-14.807-3.898 8.771 8.502c16.274 12.532 37.517 19.222 62.133 19.222 16.796 0 34.862-5.522 49.404-15.035 6.911-4.521 11.624-8.806 21.35-18.725l.334-.34c2.06-2.101 3.135-3.19 4.381-4.432l2.823 2.834a488.86 488.86 0 00-4.348 4.398l-.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.515 0-47.653-6.986-64.666-20.124l-.089-.069-8.933-8.658z"/><text id="setTimeout" fill="#8A704D" 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.8 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

Before After
Before After