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
1-js/04-object-basics/01-object/object-user-delete.svg
View file

@ -1,36 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="248px" height="173px" viewBox="0 0 248 173" 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>object-user-delete.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="object-user-delete.svg">
<rect fill="#FFFFFF" x="0" y="0" width="248" height="173"></rect>
<path d="M127.93675,101 L111.270083,121 L241.729917,121 L225.06325,101 L127.93675,101 Z" id="Rectangle-4-Copy" stroke="#D1C4B1" stroke-width="4" fill="#D1C4B1" opacity="0.5"></path>
<g id="Group-2" transform="translate(141.000000, 8.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="110"></rect>
<path d="M0,0 L32,0 L32,110 L0,110 L0,0 Z M16.5,102.016129 C20.6421356,102.016129 24,99.0373784 24,95.3629032 C24,91.6884281 20.6421356,88.7096774 16.5,88.7096774 C12.3578644,88.7096774 9,91.6884281 9,95.3629032 C9,99.0373784 12.3578644,102.016129 16.5,102.016129 Z M4,4.43548387 L4,81.6129032 L28,81.6129032 L28,4.43548387 L4,4.43548387 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="name" transform="translate(15.500000, 42.858871) rotate(-90.000000) translate(-15.500000, -42.858871) " font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="-1.3" y="47.358871">name</tspan>
</text>
</g>
<g id="Group-2-Copy-2" transform="translate(179.000000, 8.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="110"></rect>
<path d="M0,0 L32,0 L32,110 L0,110 L0,0 Z M16.5,102.016129 C20.6421356,102.016129 24,99.0373784 24,95.3629032 C24,91.6884281 20.6421356,88.7096774 16.5,88.7096774 C12.3578644,88.7096774 9,91.6884281 9,95.3629032 C9,99.0373784 12.3578644,102.016129 16.5,102.016129 Z M4,4.43548387 L4,81.6129032 L28,81.6129032 L28,4.43548387 L4,4.43548387 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="isAdmin" transform="translate(14.500000, 41.653226) rotate(-90.000000) translate(-14.500000, -41.653226) " font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="-14.9" y="46.1532258">isAdmin</tspan>
</text>
</g>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="4" fill="#FFF9EB" x="109" y="115" width="135" height="50"></rect>
<rect id="Rectangle-8" stroke="#BCA68E" stroke-width="3" x="164.5" y="135.5" width="25" height="10"></rect>
<text id="user" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="9" y="145">user</tspan>
</text>
<path id="Line-8" d="M75.5,142 L49,142 L49,139 L75.5,139 L75.5,131 L94.5,140.5 L75.5,150 L75.5,142 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="248" height="173" viewBox="0 0 248 173"><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="combined" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="object-user-delete.svg"><path fill="#FFF" d="M0 0h248v173H0z"/><path id="Rectangle-4-Copy" fill="#D1C4B1" stroke="#D1C4B1" stroke-width="4" d="M127.937 101l-16.667 20h130.46l-16.667-20h-97.126z" opacity=".5"/><g id="Group-2" transform="translate(141 8)"><g id="Group"><path id="Rectangle-7" fill="#FFF" d="M0 0h32v110H0z"/><path id="Combined-Shape" fill="#E8C48F" d="M0 0h32v110H0V0zm16.5 102.016c4.142 0 7.5-2.979 7.5-6.653 0-3.675-3.358-6.653-7.5-6.653-4.142 0-7.5 2.978-7.5 6.653 0 3.674 3.358 6.653 7.5 6.653zM4 4.436v77.177h24V4.435H4z"/></g><text id="name" fill="#EE6B47" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" transform="rotate(-90 15.5 42.859)"><tspan x="-1.3" y="47.359">name</tspan></text></g><g id="Group-2-Copy-2" transform="translate(179 8)"><g id="Group"><path id="Rectangle-7" fill="#FFF" d="M0 0h32v110H0z"/><path id="Combined-Shape" fill="#E8C48F" d="M0 0h32v110H0V0zm16.5 102.016c4.142 0 7.5-2.979 7.5-6.653 0-3.675-3.358-6.653-7.5-6.653-4.142 0-7.5 2.978-7.5 6.653 0 3.674 3.358 6.653 7.5 6.653zM4 4.436v77.177h24V4.435H4z"/></g><text id="isAdmin" fill="#EE6B47" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" transform="rotate(-90 14.5 41.653)"><tspan x="-14.9" y="46.153">isAdmin</tspan></text></g><path id="Rectangle-4" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4" d="M109 115h135v50H109z"/><path id="Rectangle-8" stroke="#BCA68E" stroke-width="3" d="M164.5 135.5h25v10h-25z"/><text id="user" fill="#EE6B47" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="9" y="145">user</tspan></text><path id="Line-8" fill="#EE6B47" fill-rule="nonzero" d="M75.5 142H49v-3h26.5v-8l19 9.5-19 9.5v-8z"/></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

Before After
Before After

22
1-js/04-object-basics/01-object/object-user-empty.svg
View file

@ -1,21 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="248px" height="92px" viewBox="0 0 248 92" 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>object-user-empty.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="object-user-empty.svg">
<rect fill="#FFFFFF" x="0" y="0" width="248" height="92"></rect>
<path d="M123.93675,12 L107.270083,32 L237.729917,32 L221.06325,12 L123.93675,12 Z" id="Rectangle-4-Copy" stroke="#D1C4B1" stroke-width="4" fill="#D1C4B1" opacity="0.5"></path>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="4" fill="#FFF9EB" x="105" y="26" width="135" height="50"></rect>
<rect id="Rectangle-8" stroke="#BCA68E" stroke-width="3" x="160.5" y="46.5" width="25" height="10"></rect>
<text id="empty" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#9B9B9B">
<tspan x="151" y="22">empty</tspan>
</text>
<text id="user" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="4" y="56">user</tspan>
</text>
<path id="Line-8" d="M70.5,53 L44,53 L44,50 L70.5,50 L70.5,42 L89.5,51.5 L70.5,61 L70.5,53 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="248" height="92" viewBox="0 0 248 92"><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="combined" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="object-user-empty.svg"><path fill="#FFF" d="M0 0h248v92H0z"/><path id="Rectangle-4-Copy" fill="#D1C4B1" stroke="#D1C4B1" stroke-width="4" d="M123.937 12L107.27 32h130.46l-16.667-20h-97.126z" opacity=".5"/><path id="Rectangle-4" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4" d="M105 26h135v50H105z"/><path id="Rectangle-8" stroke="#BCA68E" stroke-width="3" d="M160.5 46.5h25v10h-25z"/><text id="empty" fill="#9B9B9B" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="151" y="22">empty</tspan></text><text id="user" fill="#EE6B47" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="4" y="56">user</tspan></text><path id="Line-8" fill="#EE6B47" fill-rule="nonzero" d="M70.5 53H44v-3h26.5v-8l19 9.5-19 9.5v-8z"/></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

Before After
Before After

46
1-js/04-object-basics/01-object/object-user-isadmin.svg
View file

@ -1,45 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="248px" height="173px" viewBox="0 0 248 173" 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>object-user-isadmin.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="object-user-isadmin.svg">
<rect fill="#FFFFFF" x="0" y="0" width="248" height="173"></rect>
<path d="M127.93675,101 L111.270083,121 L241.729917,121 L225.06325,101 L127.93675,101 Z" id="Rectangle-4-Copy" stroke="#D1C4B1" stroke-width="4" fill="#D1C4B1" opacity="0.5"></path>
<g id="Group-2" transform="translate(125.000000, 8.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="110"></rect>
<path d="M0,0 L32,0 L32,110 L0,110 L0,0 Z M16.5,102.016129 C20.6421356,102.016129 24,99.0373784 24,95.3629032 C24,91.6884281 20.6421356,88.7096774 16.5,88.7096774 C12.3578644,88.7096774 9,91.6884281 9,95.3629032 C9,99.0373784 12.3578644,102.016129 16.5,102.016129 Z M4,4.43548387 L4,81.6129032 L28,81.6129032 L28,4.43548387 L4,4.43548387 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="name" transform="translate(15.500000, 42.858871) rotate(-90.000000) translate(-15.500000, -42.858871) " font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="-1.3" y="47.358871">name</tspan>
</text>
</g>
<g id="Group-2-Copy" transform="translate(162.000000, 8.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="110"></rect>
<path d="M0,0 L32,0 L32,110 L0,110 L0,0 Z M16.5,102.016129 C20.6421356,102.016129 24,99.0373784 24,95.3629032 C24,91.6884281 20.6421356,88.7096774 16.5,88.7096774 C12.3578644,88.7096774 9,91.6884281 9,95.3629032 C9,99.0373784 12.3578644,102.016129 16.5,102.016129 Z M4,4.43548387 L4,81.6129032 L28,81.6129032 L28,4.43548387 L4,4.43548387 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="age" transform="translate(14.500000, 41.653226) rotate(-90.000000) translate(-14.500000, -41.653226) " font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="1.9" y="46.1532258">age</tspan>
</text>
</g>
<g id="Group-2-Copy-2" transform="translate(199.000000, 8.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="110"></rect>
<path d="M0,0 L32,0 L32,110 L0,110 L0,0 Z M16.5,102.016129 C20.6421356,102.016129 24,99.0373784 24,95.3629032 C24,91.6884281 20.6421356,88.7096774 16.5,88.7096774 C12.3578644,88.7096774 9,91.6884281 9,95.3629032 C9,99.0373784 12.3578644,102.016129 16.5,102.016129 Z M4,4.43548387 L4,81.6129032 L28,81.6129032 L28,4.43548387 L4,4.43548387 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="isAdmin" transform="translate(14.500000, 41.653226) rotate(-90.000000) translate(-14.500000, -41.653226) " font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="-14.9" y="46.1532258">isAdmin</tspan>
</text>
</g>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="4" fill="#FFF9EB" x="109" y="115" width="135" height="50"></rect>
<rect id="Rectangle-8" stroke="#BCA68E" stroke-width="3" x="164.5" y="135.5" width="25" height="10"></rect>
<text id="user" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="12" y="145">user</tspan>
</text>
<path id="Line-8" d="M78.5,142 L52,142 L52,139 L78.5,139 L78.5,131 L97.5,140.5 L78.5,150 L78.5,142 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="248" height="173" viewBox="0 0 248 173"><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="combined" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="object-user-isadmin.svg"><path fill="#FFF" d="M0 0h248v173H0z"/><path id="Rectangle-4-Copy" fill="#D1C4B1" stroke="#D1C4B1" stroke-width="4" d="M127.937 101l-16.667 20h130.46l-16.667-20h-97.126z" opacity=".5"/><g id="Group-2" transform="translate(125 8)"><g id="Group"><path id="Rectangle-7" fill="#FFF" d="M0 0h32v110H0z"/><path id="Combined-Shape" fill="#E8C48F" d="M0 0h32v110H0V0zm16.5 102.016c4.142 0 7.5-2.979 7.5-6.653 0-3.675-3.358-6.653-7.5-6.653-4.142 0-7.5 2.978-7.5 6.653 0 3.674 3.358 6.653 7.5 6.653zM4 4.436v77.177h24V4.435H4z"/></g><text id="name" fill="#EE6B47" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" transform="rotate(-90 15.5 42.859)"><tspan x="-1.3" y="47.359">name</tspan></text></g><g id="Group-2-Copy" transform="translate(162 8)"><g id="Group"><path id="Rectangle-7" fill="#FFF" d="M0 0h32v110H0z"/><path id="Combined-Shape" fill="#E8C48F" d="M0 0h32v110H0V0zm16.5 102.016c4.142 0 7.5-2.979 7.5-6.653 0-3.675-3.358-6.653-7.5-6.653-4.142 0-7.5 2.978-7.5 6.653 0 3.674 3.358 6.653 7.5 6.653zM4 4.436v77.177h24V4.435H4z"/></g><text id="age" fill="#EE6B47" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" transform="rotate(-90 14.5 41.653)"><tspan x="1.9" y="46.153">age</tspan></text></g><g id="Group-2-Copy-2" transform="translate(199 8)"><g id="Group"><path id="Rectangle-7" fill="#FFF" d="M0 0h32v110H0z"/><path id="Combined-Shape" fill="#E8C48F" d="M0 0h32v110H0V0zm16.5 102.016c4.142 0 7.5-2.979 7.5-6.653 0-3.675-3.358-6.653-7.5-6.653-4.142 0-7.5 2.978-7.5 6.653 0 3.674 3.358 6.653 7.5 6.653zM4 4.436v77.177h24V4.435H4z"/></g><text id="isAdmin" fill="#EE6B47" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" transform="rotate(-90 14.5 41.653)"><tspan x="-14.9" y="46.153">isAdmin</tspan></text></g><path id="Rectangle-4" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4" d="M109 115h135v50H109z"/><path id="Rectangle-8" stroke="#BCA68E" stroke-width="3" d="M164.5 135.5h25v10h-25z"/><text id="user" fill="#EE6B47" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="12" y="145">user</tspan></text><path id="Line-8" fill="#EE6B47" fill-rule="nonzero" d="M78.5 142H52v-3h26.5v-8l19 9.5-19 9.5v-8z"/></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

Before After
Before After

46
1-js/04-object-basics/01-object/object-user-props.svg
View file

@ -1,45 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="248px" height="215px" viewBox="0 0 248 215" 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>object-user-props.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="object-user-props.svg">
<rect fill="#FFFFFF" x="0" y="0" width="248" height="215"></rect>
<path d="M127.93675,143 L111.270083,163 L241.729917,163 L225.06325,143 L127.93675,143 Z" id="Rectangle-4-Copy" stroke="#D1C4B1" stroke-width="4" fill="#D1C4B1" opacity="0.5"></path>
<g id="Group-2" transform="translate(124.000000, 3.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="157"></rect>
<path d="M0,0 L32,0 L32,157 L0,157 L0,0 Z M16.5,145.604839 C20.6421356,145.604839 24,141.353349 24,136.108871 C24,130.864393 20.6421356,126.612903 16.5,126.612903 C12.3578644,126.612903 9,130.864393 9,136.108871 C9,141.353349 12.3578644,145.604839 16.5,145.604839 Z M4,6.33064516 L4,116.483871 L28,116.483871 L28,6.33064516 L4,6.33064516 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="name" transform="translate(15.500000, 60.141129) rotate(-90.000000) translate(-15.500000, -60.141129) " font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#EE6B47">
<tspan x="-3.7" y="62.7459677">name</tspan>
</text>
</g>
<g id="Group-2-Copy" transform="translate(161.000000, 3.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="157"></rect>
<path d="M0,0 L32,0 L32,157 L0,157 L0,0 Z M16.5,145.604839 C20.6421356,145.604839 24,141.353349 24,136.108871 C24,130.864393 20.6421356,126.612903 16.5,126.612903 C12.3578644,126.612903 9,130.864393 9,136.108871 C9,141.353349 12.3578644,145.604839 16.5,145.604839 Z M4,6.33064516 L4,116.483871 L28,116.483871 L28,6.33064516 L4,6.33064516 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="age" transform="translate(15.500000, 60.141129) rotate(-90.000000) translate(-15.500000, -60.141129) " font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#EE6B47">
<tspan x="1.1" y="62.7459677">age</tspan>
</text>
</g>
<g id="Group-2-Copy-2" transform="translate(198.000000, 3.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="157"></rect>
<path d="M0,0 L32,0 L32,157 L0,157 L0,0 Z M16.5,145.604839 C20.6421356,145.604839 24,141.353349 24,136.108871 C24,130.864393 20.6421356,126.612903 16.5,126.612903 C12.3578644,126.612903 9,130.864393 9,136.108871 C9,141.353349 12.3578644,145.604839 16.5,145.604839 Z M4,6.33064516 L4,116.483871 L28,116.483871 L28,6.33064516 L4,6.33064516 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="likes-birds" transform="translate(17.500000, 60.774194) rotate(-90.000000) translate(-17.500000, -60.774194) " font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="-28.7" y="63.2782258">likes birds</tspan>
</text>
</g>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="4" fill="#FFF9EB" x="109" y="157" width="135" height="50"></rect>
<rect id="Rectangle-8" stroke="#BCA68E" stroke-width="3" x="164.5" y="177.5" width="25" height="10"></rect>
<text id="user" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="5" y="187">user</tspan>
</text>
<path id="Line-8" d="M71.5,184 L45,184 L45,181 L71.5,181 L71.5,173 L90.5,182.5 L71.5,192 L71.5,184 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="248" height="215" viewBox="0 0 248 215"><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="combined" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="object-user-props.svg"><path fill="#FFF" d="M0 0h248v215H0z"/><path id="Rectangle-4-Copy" fill="#D1C4B1" stroke="#D1C4B1" stroke-width="4" d="M127.937 143l-16.667 20h130.46l-16.667-20h-97.126z" opacity=".5"/><g id="Group-2" transform="translate(124 3)"><g id="Group"><path id="Rectangle-7" fill="#FFF" d="M0 0h32v157H0z"/><path id="Combined-Shape" fill="#E8C48F" d="M0 0h32v157H0V0zm16.5 145.605c4.142 0 7.5-4.252 7.5-9.496 0-5.245-3.358-9.496-7.5-9.496-4.142 0-7.5 4.251-7.5 9.496 0 5.244 3.358 9.496 7.5 9.496zM4 6.33v110.153h24V6.33H4z"/></g><text id="name" fill="#EE6B47" font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" transform="rotate(-90 15.5 60.141)"><tspan x="-3.7" y="62.746">name</tspan></text></g><g id="Group-2-Copy" transform="translate(161 3)"><g id="Group"><path id="Rectangle-7" fill="#FFF" d="M0 0h32v157H0z"/><path id="Combined-Shape" fill="#E8C48F" d="M0 0h32v157H0V0zm16.5 145.605c4.142 0 7.5-4.252 7.5-9.496 0-5.245-3.358-9.496-7.5-9.496-4.142 0-7.5 4.251-7.5 9.496 0 5.244 3.358 9.496 7.5 9.496zM4 6.33v110.153h24V6.33H4z"/></g><text id="age" fill="#EE6B47" font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" transform="rotate(-90 15.5 60.141)"><tspan x="1.1" y="62.746">age</tspan></text></g><g id="Group-2-Copy-2" transform="translate(198 3)"><g id="Group"><path id="Rectangle-7" fill="#FFF" d="M0 0h32v157H0z"/><path id="Combined-Shape" fill="#E8C48F" d="M0 0h32v157H0V0zm16.5 145.605c4.142 0 7.5-4.252 7.5-9.496 0-5.245-3.358-9.496-7.5-9.496-4.142 0-7.5 4.251-7.5 9.496 0 5.244 3.358 9.496 7.5 9.496zM4 6.33v110.153h24V6.33H4z"/></g><text id="likes-birds" fill="#EE6B47" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" transform="rotate(-90 17.5 60.774)"><tspan x="-28.7" y="63.278">likes birds</tspan></text></g><path id="Rectangle-4" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4" d="M109 157h135v50H109z"/><path id="Rectangle-8" stroke="#BCA68E" stroke-width="3" d="M164.5 177.5h25v10h-25z"/><text id="user" fill="#EE6B47" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="5" y="187">user</tspan></text><path id="Line-8" fill="#EE6B47" fill-rule="nonzero" d="M71.5 184H45v-3h26.5v-8l19 9.5-19 9.5v-8z"/></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

Before After
Before After

37
1-js/04-object-basics/01-object/object-user.svg
View file

@ -1,36 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="248px" height="173px" viewBox="0 0 248 173" 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>object-user.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="object-user.svg">
<rect fill="#FFFFFF" x="0" y="0" width="248" height="173"></rect>
<path d="M127.93675,101 L111.270083,121 L241.729917,121 L225.06325,101 L127.93675,101 Z" id="Rectangle-4-Copy" stroke="#D1C4B1" stroke-width="4" fill="#D1C4B1" opacity="0.5"></path>
<g id="Group-2" transform="translate(142.000000, 8.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="110"></rect>
<path d="M0,0 L32,0 L32,110 L0,110 L0,0 Z M16.5,102.016129 C20.6421356,102.016129 24,99.0373784 24,95.3629032 C24,91.6884281 20.6421356,88.7096774 16.5,88.7096774 C12.3578644,88.7096774 9,91.6884281 9,95.3629032 C9,99.0373784 12.3578644,102.016129 16.5,102.016129 Z M4,4.43548387 L4,81.6129032 L28,81.6129032 L28,4.43548387 L4,4.43548387 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="name" transform="translate(15.500000, 42.858871) rotate(-90.000000) translate(-15.500000, -42.858871) " font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="-1.3" y="47.358871">name</tspan>
</text>
</g>
<g id="Group-2-Copy" transform="translate(179.000000, 8.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="110"></rect>
<path d="M0,0 L32,0 L32,110 L0,110 L0,0 Z M16.5,102.016129 C20.6421356,102.016129 24,99.0373784 24,95.3629032 C24,91.6884281 20.6421356,88.7096774 16.5,88.7096774 C12.3578644,88.7096774 9,91.6884281 9,95.3629032 C9,99.0373784 12.3578644,102.016129 16.5,102.016129 Z M4,4.43548387 L4,81.6129032 L28,81.6129032 L28,4.43548387 L4,4.43548387 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="age" transform="translate(14.500000, 41.653226) rotate(-90.000000) translate(-14.500000, -41.653226) " font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="1.9" y="46.1532258">age</tspan>
</text>
</g>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="4" fill="#FFF9EB" x="109" y="115" width="135" height="50"></rect>
<rect id="Rectangle-8" stroke="#BCA68E" stroke-width="3" x="164.5" y="135.5" width="25" height="10"></rect>
<text id="user" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="11" y="145">user</tspan>
</text>
<path id="Line-8" d="M77.5,142 L51,142 L51,139 L77.5,139 L77.5,131 L96.5,140.5 L77.5,150 L77.5,142 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="248" height="173" viewBox="0 0 248 173"><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="combined" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="object-user.svg"><path fill="#FFF" d="M0 0h248v173H0z"/><path id="Rectangle-4-Copy" fill="#D1C4B1" stroke="#D1C4B1" stroke-width="4" d="M127.937 101l-16.667 20h130.46l-16.667-20h-97.126z" opacity=".5"/><g id="Group-2" transform="translate(142 8)"><g id="Group"><path id="Rectangle-7" fill="#FFF" d="M0 0h32v110H0z"/><path id="Combined-Shape" fill="#E8C48F" d="M0 0h32v110H0V0zm16.5 102.016c4.142 0 7.5-2.979 7.5-6.653 0-3.675-3.358-6.653-7.5-6.653-4.142 0-7.5 2.978-7.5 6.653 0 3.674 3.358 6.653 7.5 6.653zM4 4.436v77.177h24V4.435H4z"/></g><text id="name" fill="#EE6B47" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" transform="rotate(-90 15.5 42.859)"><tspan x="-1.3" y="47.359">name</tspan></text></g><g id="Group-2-Copy" transform="translate(179 8)"><g id="Group"><path id="Rectangle-7" fill="#FFF" d="M0 0h32v110H0z"/><path id="Combined-Shape" fill="#E8C48F" d="M0 0h32v110H0V0zm16.5 102.016c4.142 0 7.5-2.979 7.5-6.653 0-3.675-3.358-6.653-7.5-6.653-4.142 0-7.5 2.978-7.5 6.653 0 3.674 3.358 6.653 7.5 6.653zM4 4.436v77.177h24V4.435H4z"/></g><text id="age" fill="#EE6B47" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" transform="rotate(-90 14.5 41.653)"><tspan x="1.9" y="46.153">age</tspan></text></g><path id="Rectangle-4" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4" d="M109 115h135v50H109z"/><path id="Rectangle-8" stroke="#BCA68E" stroke-width="3" d="M164.5 135.5h25v10h-25z"/><text id="user" fill="#EE6B47" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="11" y="145">user</tspan></text><path id="Line-8" fill="#EE6B47" fill-rule="nonzero" d="M77.5 142H51v-3h26.5v-8l19 9.5-19 9.5v-8z"/></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

Before After
Before After

42
1-js/04-object-basics/01-object/object.svg
View file

@ -1,41 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="176px" height="183px" viewBox="0 0 176 183" 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>object.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="object.svg">
<rect fill="#FFFFFF" x="0" y="0" width="176" height="183"></rect>
<path d="M36.9367499,113 L20.2700832,133 L150.729917,133 L134.06325,113 L36.9367499,113 Z" id="Rectangle-4-Copy" stroke="#D1C4B1" stroke-width="4" fill="#D1C4B1" opacity="0.5"></path>
<g id="Group-2" transform="translate(33.000000, 6.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="124"></rect>
<path d="M0,0 L32,0 L32,124 L0,124 L0,0 Z M16.5,115 C20.6421356,115 24,111.642136 24,107.5 C24,103.357864 20.6421356,100 16.5,100 C12.3578644,100 9,103.357864 9,107.5 C9,111.642136 12.3578644,115 16.5,115 Z M4,5 L4,92 L28,92 L28,5 L4,5 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="key1" transform="translate(15.500000, 47.500000) rotate(-90.000000) translate(-15.500000, -47.500000) " font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#EE6B47">
<tspan x="-3.7" y="52.5">key1</tspan>
</text>
</g>
<g id="Group-2-Copy" transform="translate(70.000000, 6.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="124"></rect>
<path d="M0,0 L32,0 L32,124 L0,124 L0,0 Z M16.5,115 C20.6421356,115 24,111.642136 24,107.5 C24,103.357864 20.6421356,100 16.5,100 C12.3578644,100 9,103.357864 9,107.5 C9,111.642136 12.3578644,115 16.5,115 Z M4,5 L4,92 L28,92 L28,5 L4,5 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="key2" transform="translate(15.500000, 47.500000) rotate(-90.000000) translate(-15.500000, -47.500000) " font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#EE6B47">
<tspan x="-3.7" y="52.5">key2</tspan>
</text>
</g>
<g id="Group-2-Copy-2" transform="translate(107.000000, 6.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="124"></rect>
<path d="M0,0 L32,0 L32,124 L0,124 L0,0 Z M16.5,115 C20.6421356,115 24,111.642136 24,107.5 C24,103.357864 20.6421356,100 16.5,100 C12.3578644,100 9,103.357864 9,107.5 C9,111.642136 12.3578644,115 16.5,115 Z M4,5 L4,92 L28,92 L28,5 L4,5 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="key3" transform="translate(15.500000, 47.500000) rotate(-90.000000) translate(-15.500000, -47.500000) " font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#EE6B47">
<tspan x="-3.7" y="52.5">key3</tspan>
</text>
</g>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="4" fill="#FFF9EB" x="18" y="127" width="135" height="50"></rect>
<rect id="Rectangle-8" stroke="#BCA68E" stroke-width="3" x="73.5" y="147.5" width="25" height="10"></rect>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="176" height="183" viewBox="0 0 176 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(/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="combined" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="object.svg"><path fill="#FFF" d="M0 0h176v183H0z"/><path id="Rectangle-4-Copy" fill="#D1C4B1" stroke="#D1C4B1" stroke-width="4" d="M36.937 113L20.27 133h130.46l-16.667-20H36.937z" opacity=".5"/><g id="Group-2" transform="translate(33 6)"><g id="Group"><path id="Rectangle-7" fill="#FFF" d="M0 0h32v124H0z"/><path id="Combined-Shape" fill="#E8C48F" d="M0 0h32v124H0V0zm16.5 115a7.5 7.5 0 100-15 7.5 7.5 0 000 15zM4 5v87h24V5H4z"/></g><text id="key1" fill="#EE6B47" font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" transform="rotate(-90 15.5 47.5)"><tspan x="-3.7" y="52.5">key1</tspan></text></g><g id="Group-2-Copy" transform="translate(70 6)"><g id="Group"><path id="Rectangle-7" fill="#FFF" d="M0 0h32v124H0z"/><path id="Combined-Shape" fill="#E8C48F" d="M0 0h32v124H0V0zm16.5 115a7.5 7.5 0 100-15 7.5 7.5 0 000 15zM4 5v87h24V5H4z"/></g><text id="key2" fill="#EE6B47" font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" transform="rotate(-90 15.5 47.5)"><tspan x="-3.7" y="52.5">key2</tspan></text></g><g id="Group-2-Copy-2" transform="translate(107 6)"><g id="Group"><path id="Rectangle-7" fill="#FFF" d="M0 0h32v124H0z"/><path id="Combined-Shape" fill="#E8C48F" d="M0 0h32v124H0V0zm16.5 115a7.5 7.5 0 100-15 7.5 7.5 0 000 15zM4 5v87h24V5H4z"/></g><text id="key3" fill="#EE6B47" font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" transform="rotate(-90 15.5 47.5)"><tspan x="-3.7" y="52.5">key3</tspan></text></g><path id="Rectangle-4" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4" d="M18 127h135v50H18z"/><path id="Rectangle-8" stroke="#BCA68E" stroke-width="3" d="M73.5 147.5h25v10h-25z"/></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

Before After
Before After

37
1-js/04-object-basics/01-object/variable-contains-reference.svg
View file

@ -1,36 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="370px" height="249px" viewBox="0 0 370 249" 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>variable-contains-reference.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="variable-contains-reference.svg">
<g id="noun_1211_cc" transform="translate(12.000000, 119.000000)" fill="#E8C48F">
<path d="M17,28.1960457 L129.557785,28.1960457 L129.557785,71.1456641 C129.557785,71.5185728 129.479295,72.0083855 129.279367,72.4404861 C129.07944,72.8725868 112.704625,108 112.704625,108 L112.704625,53.6396695 L129.559266,28.1960457 L148,0 L35.4407339,0 L17,28.1960457 L17,28.1960457 Z" id="Shape"></path>
<polyline id="Shape" points="17 57 17 29 2 57"></polyline>
<path d="M0,59 L0,113.729971 C0,117.150501 1.4836395,119 4.38712201,119 L104.473443,119 C107.59502,119 110,116.4521 110,115.524372 L110,59 L0,59 L0,59 Z" id="Shape"></path>
</g>
<text id="user" font-family="OpenSans-SemiBold, Open Sans" font-size="18" font-weight="500" fill="#FFFFFF">
<tspan x="47" y="215">user</tspan>
</text>
<rect id="Rectangle-4" fill="#FFFFFF" x="116" y="153" width="44" height="6"></rect>
<path d="M123.854043,154.321929 L137.633029,140.846349 C139.246288,139.571606 142.818195,136.418958 141.204936,135.144404 C139.591676,133.868906 138.540503,134.671996 136.929629,135.947493 L118.43143,154.32193 C116.818171,155.596673 116.818171,157.16666 118.43143,158.441214 C118.43143,158.441214 139.913731,178.508876 141.204935,178.508876 C144.209997,178.508876 143.882164,176.687821 142.268905,175.413266 L123.854043,157.587044 L158.842523,157.587044 L182.224064,157.587044 L201.028364,157.587044 C203.308965,157.587044 204.778514,157.865709 204.778514,156.062589 C204.778514,154.259469 203.308964,154.321929 201.028364,154.321929 L123.854043,154.321929 Z" id="Shape-3" fill="#EE6B47" transform="translate(161.000000, 156.504438) scale(-1, 1) translate(-161.000000, -156.504438) "></path>
<g id="Rectangle-3-+-Shape" transform="translate(58.000000, 135.000000)">
<rect id="Rectangle-3" fill="#FFFFFF" x="0" y="0" width="47" height="37"></rect>
<path d="M44,33.7718421 L4,33.7718421 L4,4 L44,4 L44,33.7718421 L44,33.7718421 Z M8.7332,31.0177632 L39.2664,31.0177632 L29.2192,20.8671053 L27.3168,22.7567105 C26.4932,23.5690789 25.314,24.0340789 24.0748,24.0340789 C24.068,24.0340789 24.0608,24.0328947 24.054,24.0328947 C22.81,24.0277632 21.6272,23.5528947 20.808,22.7286842 L18.874,20.7964474 L8.7332,31.0177632 L8.7332,31.0177632 Z M6.7908,8.72618421 L6.7908,29.0397368 L16.9128,18.8381579 L6.7908,8.72618421 L6.7908,8.72618421 Z M31.1856,18.9131579 L41.2092,29.0385526 L41.2092,8.95434211 L31.1856,18.9131579 L31.1856,18.9131579 Z M8.7396,6.75486842 L22.7968,20.7968421 C23.1012,21.1023684 23.5632,21.2776316 24.0664,21.2788158 L24.0748,21.2788158 C24.5708,21.2788158 25.0432,21.1059211 25.3392,20.8122368 L39.4888,6.75486842 L8.7396,6.75486842 L8.7396,6.75486842 Z" id="Shape" fill="#EE6B47"></path>
</g>
<path d="M241.93675,117 L225.270083,137 L355.729917,137 L339.06325,117 L241.93675,117 Z" id="Rectangle-4-Copy" stroke="#D1C4B1" stroke-width="4" fill="#D1C4B1" opacity="0.5"></path>
<g id="Group-2" transform="translate(271.000000, 10.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="124"></rect>
<path d="M0,0 L32,0 L32,124 L0,124 L0,0 Z M16.5,115 C20.6421356,115 24,111.642136 24,107.5 C24,103.357864 20.6421356,100 16.5,100 C12.3578644,100 9,103.357864 9,107.5 C9,111.642136 12.3578644,115 16.5,115 Z M4,5 L4,92 L28,92 L28,5 L4,5 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="name" transform="translate(15.500000, 47.500000) rotate(-90.000000) translate(-15.500000, -47.500000) " font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#EE6B47">
<tspan x="-3.7" y="52.5">name</tspan>
</text>
</g>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="4" fill="#FFF9EB" x="223" y="131" width="135" height="50"></rect>
<rect id="Rectangle-8" stroke="#BCA68E" stroke-width="3" x="278.5" y="151.5" width="25" height="10"></rect>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="370" height="249" viewBox="0 0 370 249"><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="combined" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="variable-contains-reference.svg"><g id="noun_1211_cc" fill="#E8C48F" transform="translate(12 119)"><path id="Shape" d="M17 28.196h112.558v42.95c0 .373-.079.862-.279 1.294-.2.433-16.574 35.56-16.574 35.56V53.64l16.854-25.444L148 0H35.44L17 28.196zM17 57V29L2 57"/><path id="Shape" d="M0 59v54.73c0 3.42 1.484 5.27 4.387 5.27h100.086c3.122 0 5.527-2.548 5.527-3.476V59H0z"/></g><text id="user" fill="#FFF" font-family="OpenSans-Bold, Open Sans" font-size="18" font-weight="bold"><tspan x="47" y="215">user</tspan></text><path id="Rectangle-4" fill="#FFF" d="M116 153h44v6h-44z"/><path id="Shape-3" fill="#EE6B47" d="M123.854 154.322l13.779-13.476c1.613-1.274 5.185-4.427 3.572-5.702-1.613-1.275-2.664-.472-4.275.803l-18.499 18.375c-1.613 1.275-1.613 2.845 0 4.12 0 0 21.483 20.067 22.774 20.067 3.005 0 2.677-1.821 1.064-3.096l-18.415-17.826H201.028c2.281 0 3.75.279 3.75-1.524 0-1.804-1.469-1.741-3.75-1.741h-77.174z" transform="matrix(-1 0 0 1 322 0)"/><g id="Rectangle-3-+-Shape" transform="translate(58 135)"><path id="Rectangle-3" fill="#FFF" d="M0 0h47v37H0z"/><path id="Shape" fill="#EE6B47" d="M44 33.772H4V4h40v29.772zM8.733 31.018h30.533L29.22 20.868l-1.902 1.889c-.824.812-2.003 1.277-3.242 1.277l-.021-.001c-1.244-.005-2.427-.48-3.246-1.304l-1.934-1.933-10.14 10.222zM6.791 8.726V29.04l10.122-10.202L6.79 8.726zm24.395 10.187L41.209 29.04V8.954l-10.023 9.96zM8.74 6.755l14.057 14.042c.304.305.766.48 1.27.482h.008c.496 0 .968-.173 1.264-.467L39.49 6.755H8.739z"/></g><path id="Rectangle-4-Copy" fill="#D1C4B1" stroke="#D1C4B1" stroke-width="4" d="M241.937 117l-16.667 20h130.46l-16.667-20h-97.126z" opacity=".5"/><g id="Group-2" transform="translate(271 10)"><g id="Group"><path id="Rectangle-7" fill="#FFF" d="M0 0h32v124H0z"/><path id="Combined-Shape" fill="#E8C48F" d="M0 0h32v124H0V0zm16.5 115a7.5 7.5 0 100-15 7.5 7.5 0 000 15zM4 5v87h24V5H4z"/></g><text id="name" fill="#EE6B47" font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" transform="rotate(-90 15.5 47.5)"><tspan x="-3.7" y="52.5">name</tspan></text></g><path id="Rectangle-4" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4" d="M223 131h135v50H223z"/><path id="Rectangle-8" stroke="#BCA68E" stroke-width="3" d="M278.5 151.5h25v10h-25z"/></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

Before After
Before After

57
1-js/04-object-basics/01-object/variable-copy-reference.svg
View file

@ -1,56 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="599px" height="260px" viewBox="0 0 599 260" 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>variable-copy-reference.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="variable-copy-reference.svg">
<g id="Group" transform="translate(11.000000, 125.000000)">
<g id="noun_1211_cc" fill="#E8C48F">
<path d="M17,28.1960457 L129.557785,28.1960457 L129.557785,71.1456641 C129.557785,71.5185728 129.479295,72.0083855 129.279367,72.4404861 C129.07944,72.8725868 112.704625,108 112.704625,108 L112.704625,53.6396695 L129.559266,28.1960457 L148,0 L35.4407339,0 L17,28.1960457 L17,28.1960457 Z" id="Shape"></path>
<polyline id="Shape" points="17 57 17 29 2 57"></polyline>
<path d="M0,59 L0,113.729971 C0,117.150501 1.4836395,119 4.38712201,119 L104.473443,119 C107.59502,119 110,116.4521 110,115.524372 L110,59 L0,59 L0,59 Z" id="Shape"></path>
</g>
<text id="user" font-family="OpenSans-SemiBold, Open Sans" font-size="18" font-weight="500" fill="#FFFFFF">
<tspan x="35" y="96">user</tspan>
</text>
<g id="Rectangle-4-+-Shape-3" transform="translate(104.000000, 15.000000)">
<rect id="Rectangle-4" fill="#FFFFFF" x="0" y="19" width="44" height="6"></rect>
<path d="M7.85404284,20.3219293 L21.6330289,6.84634915 C23.2462881,5.57160629 26.8181947,2.41895793 25.2049355,1.14440364 C23.5916764,-0.131093502 22.5405033,0.671996159 20.9296292,1.9474933 L2.43143016,20.3219299 C0.818170998,21.5966728 0.818171047,23.1666601 2.43143021,24.4412144 C2.43143021,24.4412144 23.9137313,44.5088763 25.2049351,44.5088763 C28.2099969,44.5088763 27.882164,42.6878208 26.2689048,41.4132665 L7.8540433,23.5870439 L42.8425234,23.5870439 L66.2240642,23.5870439 L85.0283644,23.5870439 C87.3089653,23.5870439 88.7785142,23.8657087 88.7785142,22.0625887 C88.7785142,20.2594687 87.3089645,20.3219293 85.0283637,20.3219293 L7.85404284,20.3219293 Z" id="Shape-3" fill="#EE6B47" transform="translate(45.000000, 22.504438) scale(-1, 1) translate(-45.000000, -22.504438) "></path>
</g>
<g id="Rectangle-3-+-Shape" transform="translate(46.000000, 16.000000)">
<rect id="Rectangle-3" fill="#FFFFFF" x="0" y="0" width="47" height="37"></rect>
<path d="M44,33.7718421 L4,33.7718421 L4,4 L44,4 L44,33.7718421 L44,33.7718421 Z M8.7332,31.0177632 L39.2664,31.0177632 L29.2192,20.8671053 L27.3168,22.7567105 C26.4932,23.5690789 25.314,24.0340789 24.0748,24.0340789 C24.068,24.0340789 24.0608,24.0328947 24.054,24.0328947 C22.81,24.0277632 21.6272,23.5528947 20.808,22.7286842 L18.874,20.7964474 L8.7332,31.0177632 L8.7332,31.0177632 Z M6.7908,8.72618421 L6.7908,29.0397368 L16.9128,18.8381579 L6.7908,8.72618421 L6.7908,8.72618421 Z M31.1856,18.9131579 L41.2092,29.0385526 L41.2092,8.95434211 L31.1856,18.9131579 L31.1856,18.9131579 Z M8.7396,6.75486842 L22.7968,20.7968421 C23.1012,21.1023684 23.5632,21.2776316 24.0664,21.2788158 L24.0748,21.2788158 C24.5708,21.2788158 25.0432,21.1059211 25.3392,20.8122368 L39.4888,6.75486842 L8.7396,6.75486842 L8.7396,6.75486842 Z" id="Shape" fill="#EE6B47"></path>
</g>
</g>
<g id="noun_1211_cc" transform="translate(418.000000, 125.000000)" fill="#E8C48F">
<path d="M17,28.1960457 L129.557785,28.1960457 L129.557785,71.1456641 C129.557785,71.5185728 129.479295,72.0083855 129.279367,72.4404861 C129.07944,72.8725868 112.704625,108 112.704625,108 L112.704625,53.6396695 L129.559266,28.1960457 L148,0 L35.4407339,0 L17,28.1960457 L17,28.1960457 Z" id="Shape"></path>
<polyline id="Shape" points="17 57 17 29 2 57"></polyline>
<path d="M0,59 L0,113.729971 C0,117.150501 1.4836395,119 4.38712201,119 L104.473443,119 C107.59502,119 110,116.4521 110,115.524372 L110,59 L0,59 L0,59 Z" id="Shape"></path>
</g>
<text id="admin" font-family="OpenSans-SemiBold, Open Sans" font-size="18" font-weight="500" fill="#FFFFFF">
<tspan x="446" y="221">admin</tspan>
</text>
<g id="Rectangle-4-+-Shape-3" transform="translate(406.500000, 162.500000) scale(-1, 1) translate(-406.500000, -162.500000) translate(362.000000, 140.000000)">
<rect id="Rectangle-4" fill="#FFFFFF" x="0" y="19" width="44" height="6"></rect>
<path d="M7.85404284,20.3219293 L21.6330289,6.84634915 C23.2462881,5.57160629 26.8181947,2.41895793 25.2049355,1.14440364 C23.5916764,-0.131093502 22.5405033,0.671996159 20.9296292,1.9474933 L2.43143016,20.3219299 C0.818170998,21.5966728 0.818171047,23.1666601 2.43143021,24.4412144 C2.43143021,24.4412144 23.9137313,44.5088763 25.2049351,44.5088763 C28.2099969,44.5088763 27.882164,42.6878208 26.2689048,41.4132665 L7.8540433,23.5870439 L42.8425234,23.5870439 L66.2240642,23.5870439 L85.0283644,23.5870439 C87.3089653,23.5870439 88.7785142,23.8657087 88.7785142,22.0625887 C88.7785142,20.2594687 87.3089645,20.3219293 85.0283637,20.3219293 L7.85404284,20.3219293 Z" id="Shape-3" fill="#EE6B47" transform="translate(45.000000, 22.504438) scale(-1, 1) translate(-45.000000, -22.504438) "></path>
</g>
<g id="Rectangle-3-+-Shape" transform="translate(464.000000, 141.000000)">
<rect id="Rectangle-3" fill="#FFFFFF" x="0" y="0" width="47" height="37"></rect>
<path d="M44,33.7718421 L4,33.7718421 L4,4 L44,4 L44,33.7718421 L44,33.7718421 Z M8.7332,31.0177632 L39.2664,31.0177632 L29.2192,20.8671053 L27.3168,22.7567105 C26.4932,23.5690789 25.314,24.0340789 24.0748,24.0340789 C24.068,24.0340789 24.0608,24.0328947 24.054,24.0328947 C22.81,24.0277632 21.6272,23.5528947 20.808,22.7286842 L18.874,20.7964474 L8.7332,31.0177632 L8.7332,31.0177632 Z M6.7908,8.72618421 L6.7908,29.0397368 L16.9128,18.8381579 L6.7908,8.72618421 L6.7908,8.72618421 Z M31.1856,18.9131579 L41.2092,29.0385526 L41.2092,8.95434211 L31.1856,18.9131579 L31.1856,18.9131579 Z M8.7396,6.75486842 L22.7968,20.7968421 C23.1012,21.1023684 23.5632,21.2776316 24.0664,21.2788158 L24.0748,21.2788158 C24.5708,21.2788158 25.0432,21.1059211 25.3392,20.8122368 L39.4888,6.75486842 L8.7396,6.75486842 L8.7396,6.75486842 Z" id="Shape" fill="#EE6B47"></path>
</g>
<path d="M235.93675,125 L219.270083,145 L349.729917,145 L333.06325,125 L235.93675,125 Z" id="Rectangle-4-Copy" stroke="#D1C4B1" stroke-width="4" fill="#D1C4B1" opacity="0.5"></path>
<g id="Group-2" transform="translate(265.000000, 18.000000)">
<g id="Group">
<rect id="Rectangle-7" fill="#FFFFFF" x="0" y="0" width="32" height="124"></rect>
<path d="M0,0 L32,0 L32,124 L0,124 L0,0 Z M16.5,115 C20.6421356,115 24,111.642136 24,107.5 C24,103.357864 20.6421356,100 16.5,100 C12.3578644,100 9,103.357864 9,107.5 C9,111.642136 12.3578644,115 16.5,115 Z M4,5 L4,92 L28,92 L28,5 L4,5 Z" id="Combined-Shape" fill="#E8C48F"></path>
</g>
<text id="name" transform="translate(15.500000, 47.500000) rotate(-90.000000) translate(-15.500000, -47.500000) " font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" fill="#EE6B47">
<tspan x="-3.7" y="52.5">name</tspan>
</text>
</g>
<rect id="Rectangle-4" stroke="#BCA68E" stroke-width="4" fill="#FFF9EB" x="217" y="139" width="135" height="50"></rect>
<rect id="Rectangle-8" stroke="#BCA68E" stroke-width="3" x="272.5" y="159.5" width="25" height="10"></rect>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="599" height="260" viewBox="0 0 599 260"><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="combined" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="variable-copy-reference.svg"><g id="Group" transform="translate(11 125)"><g id="noun_1211_cc" fill="#E8C48F"><path id="Shape" d="M17 28.196h112.558v42.95c0 .373-.079.862-.279 1.294-.2.433-16.574 35.56-16.574 35.56V53.64l16.854-25.444L148 0H35.44L17 28.196zM17 57V29L2 57"/><path id="Shape" d="M0 59v54.73c0 3.42 1.484 5.27 4.387 5.27h100.086c3.122 0 5.527-2.548 5.527-3.476V59H0z"/></g><text id="user" fill="#FFF" font-family="OpenSans-Bold, Open Sans" font-size="18" font-weight="bold"><tspan x="35" y="96">user</tspan></text><g id="Rectangle-4-+-Shape-3" transform="translate(104 15)"><path id="Rectangle-4" fill="#FFF" d="M0 19h44v6H0z"/><path id="Shape-3" fill="#EE6B47" d="M7.854 20.322L21.633 6.846c1.613-1.274 5.185-4.427 3.572-5.702-1.613-1.275-2.664-.472-4.275.803L2.43 20.322c-1.613 1.275-1.613 2.845 0 4.12 0 0 21.483 20.067 22.774 20.067 3.005 0 2.677-1.821 1.064-3.096L7.854 23.587H85.028c2.281 0 3.75.279 3.75-1.524 0-1.804-1.469-1.741-3.75-1.741H7.854z" transform="matrix(-1 0 0 1 90 0)"/></g><g id="Rectangle-3-+-Shape" transform="translate(46 16)"><path id="Rectangle-3" fill="#FFF" d="M0 0h47v37H0z"/><path id="Shape" fill="#EE6B47" d="M44 33.772H4V4h40v29.772zM8.733 31.018h30.533L29.22 20.868l-1.902 1.889c-.824.812-2.003 1.277-3.242 1.277l-.021-.001c-1.244-.005-2.427-.48-3.246-1.304l-1.934-1.933-10.14 10.222zM6.791 8.726V29.04l10.122-10.202L6.79 8.726zm24.395 10.187L41.209 29.04V8.954l-10.023 9.96zM8.74 6.755l14.057 14.042c.304.305.766.48 1.27.482h.008c.496 0 .968-.173 1.264-.467L39.49 6.755H8.739z"/></g></g><g id="noun_1211_cc" fill="#E8C48F" transform="translate(418 125)"><path id="Shape" d="M17 28.196h112.558v42.95c0 .373-.079.862-.279 1.294-.2.433-16.574 35.56-16.574 35.56V53.64l16.854-25.444L148 0H35.44L17 28.196zM17 57V29L2 57"/><path id="Shape" d="M0 59v54.73c0 3.42 1.484 5.27 4.387 5.27h100.086c3.122 0 5.527-2.548 5.527-3.476V59H0z"/></g><text id="admin" fill="#FFF" font-family="OpenSans-Bold, Open Sans" font-size="18" font-weight="bold"><tspan x="446" y="221">admin</tspan></text><g id="Rectangle-4-+-Shape-3" transform="matrix(-1 0 0 1 451 140)"><path id="Rectangle-4" fill="#FFF" d="M0 19h44v6H0z"/><path id="Shape-3" fill="#EE6B47" d="M7.854 20.322L21.633 6.846c1.613-1.274 5.185-4.427 3.572-5.702-1.613-1.275-2.664-.472-4.275.803L2.43 20.322c-1.613 1.275-1.613 2.845 0 4.12 0 0 21.483 20.067 22.774 20.067 3.005 0 2.677-1.821 1.064-3.096L7.854 23.587H85.028c2.281 0 3.75.279 3.75-1.524 0-1.804-1.469-1.741-3.75-1.741H7.854z" transform="matrix(-1 0 0 1 90 0)"/></g><g id="Rectangle-3-+-Shape" transform="translate(464 141)"><path id="Rectangle-3" fill="#FFF" d="M0 0h47v37H0z"/><path id="Shape" fill="#EE6B47" d="M44 33.772H4V4h40v29.772zM8.733 31.018h30.533L29.22 20.868l-1.902 1.889c-.824.812-2.003 1.277-3.242 1.277l-.021-.001c-1.244-.005-2.427-.48-3.246-1.304l-1.934-1.933-10.14 10.222zM6.791 8.726V29.04l10.122-10.202L6.79 8.726zm24.395 10.187L41.209 29.04V8.954l-10.023 9.96zM8.74 6.755l14.057 14.042c.304.305.766.48 1.27.482h.008c.496 0 .968-.173 1.264-.467L39.49 6.755H8.739z"/></g><path id="Rectangle-4-Copy" fill="#D1C4B1" stroke="#D1C4B1" stroke-width="4" d="M235.937 125l-16.667 20h130.46l-16.667-20h-97.126z" opacity=".5"/><g id="Group-2" transform="translate(265 18)"><g id="Group"><path id="Rectangle-7" fill="#FFF" d="M0 0h32v124H0z"/><path id="Combined-Shape" fill="#E8C48F" d="M0 0h32v124H0V0zm16.5 115a7.5 7.5 0 100-15 7.5 7.5 0 000 15zM4 5v87h24V5H4z"/></g><text id="name" fill="#EE6B47" font-family="PTMono-Bold, PT Mono" font-size="16" font-weight="bold" transform="rotate(-90 15.5 47.5)"><tspan x="-3.7" y="52.5">name</tspan></text></g><path id="Rectangle-4" fill="#FFF9EB" stroke="#BCA68E" stroke-width="4" d="M217 139h135v50H217z"/><path id="Rectangle-8" stroke="#BCA68E" stroke-width="3" d="M272.5 159.5h25v10h-25z"/></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.8 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

Before After
Before After

41
1-js/04-object-basics/01-object/variable-copy-value.svg
View file

@ -1,40 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="359px" height="143px" viewBox="0 0 359 143" 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>variable-copy-value.svg</title>
<desc>Created with sketchtool.</desc>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="variable-copy-value.svg">
<g id="noun_1211_cc-+-Message" transform="translate(11.000000, 6.000000)">
<g id="noun_1211_cc">
<path d="M17,37.1960457 L129.557785,37.1960457 L129.557785,80.1456641 C129.557785,80.5185728 129.479295,81.0083855 129.279367,81.4404861 C129.07944,81.8725868 112.704625,117 112.704625,117 L112.704625,62.6396695 L129.559266,37.1960457 L148,9 L35.4407339,9 L17,37.1960457 L17,37.1960457 Z" id="Shape" fill="#E8C48F"></path>
<polyline id="Shape" fill="#E8C48F" points="17 66 17 38 2 66"></polyline>
<g id="Rectangle-5-+-&quot;World!&quot;" transform="translate(15.000000, 0.000000)">
<path d="M18.8613371,1.80856046 L1.99871056,17.5332141 L55.1386629,74.5188362 L72.0012894,58.7941826 L18.8613371,1.80856046 Z" id="Rectangle-5" stroke="#8A704D" stroke-width="2" fill="#FFF9EB"></path>
<text id="&quot;Hello!&quot;" transform="translate(38.099228, 39.181970) rotate(47.000000) translate(-38.099228, -39.181970) " font-family="OpenSans-SemiBold, Open Sans" font-size="14" font-weight="500" line-spacing="17" fill="#8A704D">
<tspan x="4.41856411" y="43.9983764">"Hello!"</tspan>
</text>
</g>
<path d="M0,68 L0,122.729971 C0,126.150501 1.4836395,128 4.38712201,128 L104.473443,128 C107.59502,128 110,125.4521 110,124.524372 L110,68 L0,68 L0,68 Z" id="Shape" fill="#E8C48F"></path>
</g>
<text id="message" font-family="OpenSans-SemiBold, Open Sans" font-size="18" font-weight="500" fill="#FFFFFF">
<tspan x="17" y="105">message</tspan>
</text>
</g>
<g id="Group" transform="translate(210.000000, 6.000000)">
<path d="M17,37.1960457 L130.417005,37.1960457 L130.417005,80.1456641 C130.417005,80.5185728 130.337916,81.0083855 130.136462,81.4404861 C129.935008,81.8725868 113.435195,117 113.435195,117 L113.435195,62.6396695 L130.418497,37.1960457 L149,9 L35.5815029,9 L17,37.1960457 L17,37.1960457 Z" id="Shape" fill="#E8C48F"></path>
<polyline id="Shape" fill="#E8C48F" points="18 66 18 38 2 66"></polyline>
<g id="Rectangle-5-+-&quot;World!&quot;" transform="translate(15.000000, 0.000000)">
<path d="M19.1172186,1.79919253 L2.01617912,17.5335434 L55.8827814,74.5282042 L72.9838209,58.7938532 L19.1172186,1.79919253 Z" id="Rectangle-5" stroke="#8A704D" stroke-width="2" fill="#FFF9EB"></path>
<text id="&quot;Hello!&quot;" transform="translate(38.155854, 37.706510) rotate(47.000000) translate(-38.155854, -37.706510) " font-family="OpenSans-SemiBold, Open Sans" font-size="14" font-weight="500" line-spacing="17" fill="#8A704D">
<tspan x="4.47519034" y="42.5229163">"Hello!"</tspan>
</text>
</g>
<path d="M0,68 L0,122.729971 C0,126.150501 1.49712713,128 4.42700494,128 L105.423201,128 C108.573157,128 111,125.4521 111,124.524372 L111,68 L0,68 L0,68 Z" id="Shape" fill="#E8C48F"></path>
<text id="phrase" font-family="OpenSans-SemiBold, Open Sans" font-size="18" font-weight="500" fill="#FFFFFF">
<tspan x="25" y="105">phrase</tspan>
</text>
</g>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="359" height="143" viewBox="0 0 359 143"><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="combined" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="variable-copy-value.svg"><g id="noun_1211_cc-+-Message" transform="translate(11 6)"><g id="noun_1211_cc"><path id="Shape" fill="#E8C48F" d="M17 37.196h112.558v42.95c0 .373-.079.862-.279 1.294-.2.433-16.574 35.56-16.574 35.56V62.64l16.854-25.444L148 9H35.44L17 37.196zM17 66V38L2 66"/><g id="Rectangle-5-+-&quot;World!&quot;" transform="translate(15)"><path id="Rectangle-5" fill="#FFF9EB" stroke="#8A704D" stroke-width="2" d="M18.861 1.809L2 17.533l53.14 56.986L72 58.794 18.861 1.81z"/><text id="&quot;Hello!&quot;" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" transform="rotate(47 38.202 38.946)"><tspan x="2.822" y="43.482">&quot;Hello!&quot;</tspan></text></g><path id="Shape" fill="#E8C48F" d="M0 68v54.73c0 3.42 1.484 5.27 4.387 5.27h100.086c3.122 0 5.527-2.548 5.527-3.476V68H0z"/></g><text id="message" fill="#FFF" font-family="OpenSans-Bold, Open Sans" font-size="18" font-weight="bold"><tspan x="17" y="105">message</tspan></text></g><g id="Group" transform="translate(210 6)"><path id="Shape" fill="#E8C48F" d="M17 37.196h113.417v42.95c0 .373-.08.862-.28 1.294-.202.433-16.702 35.56-16.702 35.56V62.64l16.983-25.444L149 9H35.582L17 37.196z"/><path id="Shape" fill="#E8C48F" d="M18 66V38L2 66"/><g id="Rectangle-5-+-&quot;World!&quot;" transform="translate(15)"><path id="Rectangle-5" fill="#FFF9EB" stroke="#8A704D" stroke-width="2" d="M19.117 1.8l-17.1 15.734 53.866 56.994 17.1-15.734L19.118 1.799z"/><text id="&quot;Hello!&quot;" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" transform="rotate(47 38.162 37.693)"><tspan x="2.782" y="42.23">&quot;Hello!&quot;</tspan></text></g><path id="Shape" fill="#E8C48F" d="M0 68v54.73c0 3.42 1.497 5.27 4.427 5.27h100.996c3.15 0 5.577-2.548 5.577-3.476V68H0z"/><text id="phrase" fill="#FFF" font-family="OpenSans-Bold, Open Sans" font-size="18" font-weight="bold"><tspan x="25" y="105">phras</tspan> <tspan x="25" y="129">e</tspan></text></g></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

Before After
Before After