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

32
7-animation/1-bezier-curve/bezier-car.svg
View file

@ -1,31 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="260px" height="130px" viewBox="0 0 260 130" 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>bezier-car.svg</title>
<desc>Created with sketchtool.</desc>
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="bezier-car.svg" stroke="#000000">
<g id="car" transform="translate(20.000000, 12.000000)">
<path d="M3.5483871,89.7419355 C-8.27956989,60.9784946 15.3763441,43.7204301 74.516129,37.9677419 C80.4301075,26.4623656 83.3870968,14.9569892 83.3870968,3.4516129 C183.924731,-8.05376344 228.27957,20.7096774 216.451613,89.7419355 L3.5483871,89.7419355 Z" id="Shape" stroke-width="2" fill="#C0C0C0"></path>
<g id="crvpnt-link" transform="translate(0.000000, 86.290323)" fill="#D3D3D3">
<ellipse id="crvpnt" cx="3.5483871" cy="3.4516129" rx="3.5483871" ry="3.4516129"></ellipse>
</g>
<g id="crvpnt-link" transform="translate(70.967742, 34.516129)" fill="#D3D3D3">
<ellipse id="crvpnt" cx="3.5483871" cy="3.4516129" rx="3.5483871" ry="3.4516129"></ellipse>
</g>
<g id="crvpnt-link" transform="translate(79.838710, 0.000000)" fill="#D3D3D3">
<ellipse id="crvpnt" cx="3.5483871" cy="3.4516129" rx="3.5483871" ry="3.4516129"></ellipse>
</g>
<g id="crvpnt-link" transform="translate(212.903226, 86.290323)" fill="#D3D3D3">
<ellipse id="crvpnt" cx="3.5483871" cy="3.4516129" rx="3.5483871" ry="3.4516129"></ellipse>
</g>
<g id="wheel-link" transform="translate(39.032258, 72.483871)" fill="#D3D3D3" stroke-width="5">
<ellipse id="wheel" cx="17.7419355" cy="17.2580645" rx="17.7419355" ry="17.2580645"></ellipse>
</g>
<g id="wheel-link" transform="translate(154.354839, 72.483871)" fill="#D3D3D3" stroke-width="5">
<ellipse id="wheel" cx="17.7419355" cy="17.2580645" rx="17.7419355" ry="17.2580645"></ellipse>
</g>
</g>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="260" height="130" viewBox="0 0 260 130"><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="animation" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="bezier-car.svg" stroke="#000"><g id="car" transform="translate(20 12)"><path id="Shape" fill="silver" stroke-width="2" d="M3.548 89.742C-8.28 60.978 15.376 43.72 74.516 37.968c5.914-11.506 8.871-23.011 8.871-34.516C183.925-8.054 228.28 20.71 216.452 89.742H3.548z"/><g id="crvpnt-link" fill="#D3D3D3" transform="translate(0 86.29)"><ellipse id="crvpnt" cx="3.548" cy="3.452" rx="3.548" ry="3.452"/></g><g id="crvpnt-link" fill="#D3D3D3" transform="translate(70.968 34.516)"><ellipse id="crvpnt" cx="3.548" cy="3.452" rx="3.548" ry="3.452"/></g><g id="crvpnt-link" fill="#D3D3D3" transform="translate(79.839)"><ellipse id="crvpnt" cx="3.548" cy="3.452" rx="3.548" ry="3.452"/></g><g id="crvpnt-link" fill="#D3D3D3" transform="translate(212.903 86.29)"><ellipse id="crvpnt" cx="3.548" cy="3.452" rx="3.548" ry="3.452"/></g><g id="wheel-link" fill="#D3D3D3" stroke-width="5" transform="translate(39.032 72.484)"><ellipse id="wheel" cx="17.742" cy="17.258" rx="17.742" ry="17.258"/></g><g id="wheel-link" fill="#D3D3D3" stroke-width="5" transform="translate(154.355 72.484)"><ellipse id="wheel" cx="17.742" cy="17.258" rx="17.742" ry="17.258"/></g></g></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

Before After
Before After

50
7-animation/1-bezier-curve/bezier-letter.svg
View file

@ -1,49 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="166px" height="173px" viewBox="0 0 166 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>bezier-letter.svg</title>
<desc>Created with sketchtool.</desc>
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="bezier-letter.svg">
<g id="blue-zones" transform="translate(13.000000, 3.000000)">
<g id="g10" transform="translate(74.667210, 82.907153) scale(1, -1) translate(-74.667210, -82.907153) translate(0.167210, 0.907153)">
<g id="g12" transform="translate(0.082789, 0.014893)">
<g id="g14" transform="translate(0.000000, 0.000000)">
<g id="g24" transform="translate(0.000000, 0.778344)">
<path d="M94.1950078,31.5813173 C95.4706172,17.7726644 104.08103,3.27358276 119.069517,3.27358276 C125.766502,3.27358276 145.219636,8.10661506 145.219636,36.0691123 L145.219636,55.4012263 L137.247042,55.4012263 L137.247042,36.0691123 C137.247042,16.0465847 129.274434,13.975283 125.766502,13.975283 C115.242661,13.975283 113.967052,29.5100156 113.967052,31.2360953 L113.967052,100.279314 C113.967052,114.778396 113.967052,128.241826 102.486511,141.014828 C90.0492562,154.478259 74.1040547,160.001705 58.7966719,160.001705 C32.6465531,160.001705 10.6421719,143.776559 10.6421719,120.992285 C10.6421719,110.635807 17.0202609,104.767124 25.31175,104.767124 C34.2410719,104.767124 39.9813422,111.671458 39.9813422,120.647079 C39.9813422,124.789667 38.3868234,136.181796 23.7172453,136.527018 C32.3276438,148.609576 47.9539359,152.406957 58.1588672,152.406957 C73.7851594,152.406957 91.9626844,138.943527 91.9626844,108.219283 L91.9626844,95.4462967 C75.6985734,94.4106459 53.3752969,93.374995 33.2843578,83.0185168 C9.3665625,71.2811657 1.39396875,53.3299246 1.39396875,38.1404141 C1.39396875,10.1779168 32.3276437,1.54750305 52.4185969,1.54750305 C73.46625,1.54750305 88.1358281,15.3561407 94.1950078,31.5813173 L94.1950078,31.5813173 Z" id="path30" fill="#B3B3B3"></path>
<path d="M91.9626844,88.1967559 L91.9626844,53.6751466 C91.9626844,20.879617 69.0016031,9.14226592 54.6509203,9.14226592 C39.0246281,9.14226592 25.9495688,21.2248238 25.9495688,38.4856361 C25.9495688,57.4725281 39.3435375,86.1254542 91.9626844,88.1967559 L91.9626844,88.1967559 Z" id="path32" fill="#FFFFFF"></path>
<polygon id="path34" fill="#000000" points="93.0700078 30.3634803 95.3200078 30.3634803 95.3200078 32.7991391 93.0700078 32.7991391"></polygon>
<polygon id="path36" fill="#000000" points="117.944503 2.05576097 120.194517 2.05576097 120.194517 4.49141976 117.944503 4.49141976"></polygon>
<polygon id="path38" fill="#000000" points="144.094636 34.8512906 146.344636 34.8512906 146.344636 37.2869493 144.094636 37.2869493"></polygon>
<polygon id="path40" fill="#000000" points="144.094636 54.1833893 146.344636 54.1833893 146.344636 56.6190481 144.094636 56.6190481"></polygon>
<polygon id="path42" fill="#000000" points="136.122028 54.1833893 138.372042 54.1833893 138.372042 56.6190481 136.122028 56.6190481"></polygon>
<polygon id="path44" fill="#000000" points="136.122028 34.8512906 138.372042 34.8512906 138.372042 37.2869493 136.122028 37.2869493"></polygon>
<polygon id="path46" fill="#000000" points="124.641487 12.7574612 126.891502 12.7574612 126.891502 15.1931048 124.641487 15.1931048 124.641487 12.7574612"></polygon>
<polygon id="path48" fill="#000000" points="112.842052 30.0182583 115.092052 30.0182583 115.092052 32.453917 112.842052 32.453917"></polygon>
<polygon id="path50" fill="#000000" points="112.842052 99.061492 115.092052 99.061492 115.092052 101.497151 112.842052 101.497151"></polygon>
<polygon id="path52" fill="#000000" points="101.361511 139.796991 103.611511 139.796991 103.611511 142.23265 101.361511 142.23265"></polygon>
<polygon id="path54" fill="#000000" points="57.6716719 158.783883 59.9216719 158.783883 59.9216719 161.219527 57.6716719 161.219527"></polygon>
<polygon id="path56" fill="#000000" points="9.51717187 119.774464 11.7671859 119.774464 11.7671859 122.210107 9.51717187 122.210107"></polygon>
<polygon id="path58" fill="#000000" points="24.18675 103.549302 26.4367641 103.549302 26.4367641 105.984961 24.18675 105.984961"></polygon>
<polygon id="path60" fill="#000000" points="38.8563281 119.429242 41.1063422 119.429242 41.1063422 121.8649 38.8563281 121.8649"></polygon>
<polygon id="path62" fill="#000000" points="22.5922313 135.309181 24.8422453 135.309181 24.8422453 137.74484 22.5922313 137.74484"></polygon>
<polygon id="path64" fill="#000000" points="57.0338531 151.189136 59.2838672 151.189136 59.2838672 153.624779 57.0338531 153.624779"></polygon>
<polygon id="path66" fill="#000000" points="90.8376703 107.001462 93.0876844 107.001462 93.0876844 109.437121 90.8376703 109.437121"></polygon>
<polygon id="path68" fill="#000000" points="90.8376703 94.228475 93.0876844 94.228475 93.0876844 96.6641185 90.8376703 96.6641185"></polygon>
<polygon id="path70" fill="#000000" points="32.1593438 81.8006798 34.4093578 81.8006798 34.4093578 84.2363386 32.1593438 84.2363386 32.1593438 81.8006798"></polygon>
<polygon id="path72" fill="#000000" points="0.26896875 36.9225923 2.51896875 36.9225923 2.51896875 39.3582358 0.26896875 39.3582358"></polygon>
<polygon id="path74" fill="#000000" points="51.2935828 0.329681271 53.5435969 0.329681271 53.5435969 2.76534006 51.2935828 2.76534006"></polygon>
<polygon id="path76" fill="#000000" points="93.0700078 30.3634803 95.3200078 30.3634803 95.3200078 32.7991391 93.0700078 32.7991391"></polygon>
<polygon id="path78" fill="#000000" points="90.8376703 86.9789341 93.0876844 86.9789341 93.0876844 89.4145777 90.8376703 89.4145777"></polygon>
<polygon id="path80" fill="#000000" points="90.8376703 52.4573096 93.0876844 52.4573096 93.0876844 54.8929684 90.8376703 54.8929684 90.8376703 52.4573096"></polygon>
<polygon id="path82" fill="#000000" points="53.5259062 7.92442892 55.7759203 7.92442892 55.7759203 10.3600877 53.5259062 10.3600877"></polygon>
<polygon id="path84" fill="#000000" points="24.8245688 37.2677991 27.0745688 37.2677991 27.0745688 39.7034579 24.8245688 39.7034579"></polygon>
<polygon id="path86" fill="#000000" points="90.8376703 86.9789341 93.0876844 86.9789341 93.0876844 89.4145777 90.8376703 89.4145777"></polygon>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="166" height="173" viewBox="0 0 166 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="animation" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="bezier-letter.svg"><g id="blue-zones" transform="translate(13 3)"><g id="g10" transform="matrix(1 0 0 -1 .167 164.907)"><g id="g12" transform="translate(.083 .015)"><g id="g14"><g id="g24" transform="translate(0 .778)"><path id="path30" fill="#B3B3B3" d="M94.195 31.581c1.276-13.808 9.886-28.307 24.875-28.307 6.697 0 26.15 4.833 26.15 32.795v19.332h-7.973V36.07c0-20.022-7.973-22.094-11.48-22.094-10.524 0-11.8 15.535-11.8 17.261v69.043c0 14.5 0 27.963-11.48 40.736-12.438 13.463-28.383 18.987-43.69 18.987-26.15 0-48.155-16.225-48.155-39.01 0-10.356 6.378-16.225 14.67-16.225 8.93 0 14.67 6.904 14.67 15.88 0 4.143-1.595 15.535-16.265 15.88 8.61 12.083 24.237 15.88 34.442 15.88 15.626 0 33.804-13.463 33.804-44.188V95.446c-16.264-1.035-38.588-2.071-58.679-12.427C9.367 71.28 1.394 53.329 1.394 38.14c0-27.962 30.934-36.592 51.025-36.592 21.047 0 35.717 13.808 41.776 30.033z"/><path id="path32" fill="#FFF" d="M91.963 88.197V53.675c0-32.795-22.961-44.533-37.312-44.533-15.626 0-28.701 12.083-28.701 29.344 0 18.987 13.394 47.64 66.013 49.71z"/><path id="path34" fill="#000" d="M93.07 30.363h2.25V32.8h-2.25z"/><path id="path36" fill="#000" d="M117.945 2.056h2.25V4.49h-2.25z"/><path id="path38" fill="#000" d="M144.095 34.851h2.25v2.436h-2.25z"/><path id="path40" fill="#000" d="M144.095 54.183h2.25v2.436h-2.25z"/><path id="path42" fill="#000" d="M136.122 54.183h2.25v2.436h-2.25z"/><path id="path44" fill="#000" d="M136.122 34.851h2.25v2.436h-2.25z"/><path id="path46" fill="#000" d="M124.641 12.757h2.25v2.436h-2.25v-2.436z"/><path id="path48" fill="#000" d="M112.842 30.018h2.25v2.436h-2.25z"/><path id="path50" fill="#000" d="M112.842 99.061h2.25v2.436h-2.25z"/><path id="path52" fill="#000" d="M101.362 139.797h2.25v2.436h-2.25z"/><path id="path54" fill="#000" d="M57.672 158.784h2.25v2.436h-2.25z"/><path id="path56" fill="#000" d="M9.517 119.774h2.25v2.436h-2.25z"/><path id="path58" fill="#000" d="M24.187 103.55h2.25v2.435h-2.25z"/><path id="path60" fill="#000" d="M38.856 119.43h2.25v2.435h-2.25z"/><path id="path62" fill="#000" d="M22.592 135.31h2.25v2.435h-2.25z"/><path id="path64" fill="#000" d="M57.034 151.19h2.25v2.435h-2.25z"/><path id="path66" fill="#000" d="M90.838 107.001h2.25v2.436h-2.25z"/><path id="path68" fill="#000" d="M90.838 94.228h2.25v2.436h-2.25z"/><path id="path70" fill="#000" d="M32.16 81.8h2.25v2.436h-2.25v-2.435z"/><path id="path72" fill="#000" d="M.269 36.923h2.25v2.435H.269z"/><path id="path74" fill="#000" d="M51.294.33h2.25v2.435h-2.25z"/><path id="path76" fill="#000" d="M93.07 30.363h2.25V32.8h-2.25z"/><path id="path78" fill="#000" d="M90.838 86.979h2.25v2.436h-2.25z"/><path id="path80" fill="#000" d="M90.838 52.457h2.25v2.436h-2.25v-2.436z"/><path id="path82" fill="#000" d="M53.526 7.924h2.25v2.436h-2.25z"/><path id="path84" fill="#000" d="M24.825 37.268h2.25v2.435h-2.25z"/><path id="path86" fill="#000" d="M90.838 86.979h2.25v2.436h-2.25z"/></g></g></g></g></g></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.4 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

Before After
Before After

49
7-animation/1-bezier-curve/bezier-vase.svg
View file

@ -1,48 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="110px" height="170px" viewBox="0 0 110 170" 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>bezier-vase.svg</title>
<desc>Created with sketchtool.</desc>
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="bezier-vase.svg">
<g id="figure4-15" transform="translate(5.000000, 1.000000)">
<path d="M32.0099502,161.208955 C12.5074627,121.606965 12.5074627,82.0049751 32.0099502,42.4029851 C38.5107794,29.2023217 38.5107794,16.0016584 32.0099502,2.80099502 L71.0149254,2.80099502 C64.5140962,16.0016584 64.5140962,29.2023217 71.0149254,42.4029851 C90.5174129,82.0049751 90.5174129,121.606965 71.0149254,161.208955 L32.0099502,161.208955 Z" id="Shape" stroke="#A0522D" stroke-width="2"></path>
<path d="M32.0099502,2.80099502 L41.761194,22.60199 L2.75621891,101.80597 L32.0099502,161.208955" id="Shape" stroke="#000000" stroke-width="0.5" stroke-dasharray="2"></path>
<path d="M71.0149254,2.80099502 L61.2636816,22.60199 L100.268657,101.80597 L71.0149254,161.208955" id="Shape" stroke="#000000" stroke-width="0.5" stroke-dasharray="2"></path>
<g id="dot-link" transform="translate(49.562189, 0.820896)" fill="#FFFFFF" stroke="#000000">
<ellipse id="dot" cx="1.95024876" cy="1.9800995" rx="1.95024876" ry="1.9800995"></ellipse>
</g>
<g id="dot-link" transform="translate(30.059701, 0.820896)" fill="#FFFFFF" stroke="#000000">
<ellipse id="dot" cx="1.95024876" cy="1.9800995" rx="1.95024876" ry="1.9800995"></ellipse>
</g>
<g id="dot-link" transform="translate(39.810945, 20.621891)" fill="#FFFFFF" stroke="#000000">
<ellipse id="dot" cx="1.95024876" cy="1.9800995" rx="1.95024876" ry="1.9800995"></ellipse>
</g>
<g id="dot-link" transform="translate(30.059701, 40.422886)" fill="#FFFFFF" stroke="#000000">
<ellipse id="dot" cx="1.95024876" cy="1.9800995" rx="1.95024876" ry="1.9800995"></ellipse>
</g>
<g id="dot-link" transform="translate(0.805970, 99.825871)" fill="#FFFFFF" stroke="#000000">
<ellipse id="dot" cx="1.95024876" cy="1.9800995" rx="1.95024876" ry="1.9800995"></ellipse>
</g>
<g id="dot-link" transform="translate(30.059701, 159.228856)" fill="#FFFFFF" stroke="#000000">
<ellipse id="dot" cx="1.95024876" cy="1.9800995" rx="1.95024876" ry="1.9800995"></ellipse>
</g>
<g id="dot-link" transform="translate(69.064677, 0.820896)" fill="#FFFFFF" stroke="#000000">
<ellipse id="dot" cx="1.95024876" cy="1.9800995" rx="1.95024876" ry="1.9800995"></ellipse>
</g>
<g id="dot-link" transform="translate(59.313433, 20.621891)" fill="#FFFFFF" stroke="#000000">
<ellipse id="dot" cx="1.95024876" cy="1.9800995" rx="1.95024876" ry="1.9800995"></ellipse>
</g>
<g id="dot-link" transform="translate(69.064677, 40.422886)" fill="#FFFFFF" stroke="#000000">
<ellipse id="dot" cx="1.95024876" cy="1.9800995" rx="1.95024876" ry="1.9800995"></ellipse>
</g>
<g id="dot-link" transform="translate(98.318408, 99.825871)" fill="#FFFFFF" stroke="#000000">
<ellipse id="dot" cx="1.95024876" cy="1.9800995" rx="1.95024876" ry="1.9800995"></ellipse>
</g>
<g id="dot-link" transform="translate(69.064677, 159.228856)" fill="#FFFFFF" stroke="#000000">
<ellipse id="dot" cx="1.95024876" cy="1.9800995" rx="1.95024876" ry="1.9800995"></ellipse>
</g>
</g>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="110" height="170" viewBox="0 0 110 170"><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="animation" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="bezier-vase.svg"><g id="figure4-15" transform="translate(5 1)"><path id="Shape" stroke="sienna" stroke-width="2" d="M32.01 161.209c-19.503-39.602-19.503-79.204 0-118.806 6.5-13.2 6.5-26.401 0-39.602h39.005c-6.5 13.2-6.5 26.401 0 39.602 19.502 39.602 19.502 79.204 0 118.806H32.01z"/><path id="Shape" stroke="#000" stroke-dasharray="2" stroke-width=".5" d="M32.01 2.801l9.751 19.801-39.005 79.204 29.254 59.403M71.015 2.801l-9.751 19.801 39.005 79.204-29.254 59.403"/><g id="dot-link" fill="#FFF" stroke="#000" transform="translate(49.562 .82)"><ellipse id="dot" cx="1.95" cy="1.98" rx="1.95" ry="1.98"/></g><g id="dot-link" fill="#FFF" stroke="#000" transform="translate(30.06 .82)"><ellipse id="dot" cx="1.95" cy="1.98" rx="1.95" ry="1.98"/></g><g id="dot-link" fill="#FFF" stroke="#000" transform="translate(39.81 20.622)"><ellipse id="dot" cx="1.95" cy="1.98" rx="1.95" ry="1.98"/></g><g id="dot-link" fill="#FFF" stroke="#000" transform="translate(30.06 40.423)"><ellipse id="dot" cx="1.95" cy="1.98" rx="1.95" ry="1.98"/></g><g id="dot-link" fill="#FFF" stroke="#000" transform="translate(.806 99.826)"><ellipse id="dot" cx="1.95" cy="1.98" rx="1.95" ry="1.98"/></g><g id="dot-link" fill="#FFF" stroke="#000" transform="translate(30.06 159.229)"><ellipse id="dot" cx="1.95" cy="1.98" rx="1.95" ry="1.98"/></g><g id="dot-link" fill="#FFF" stroke="#000" transform="translate(69.065 .82)"><ellipse id="dot" cx="1.95" cy="1.98" rx="1.95" ry="1.98"/></g><g id="dot-link" fill="#FFF" stroke="#000" transform="translate(59.313 20.622)"><ellipse id="dot" cx="1.95" cy="1.98" rx="1.95" ry="1.98"/></g><g id="dot-link" fill="#FFF" stroke="#000" transform="translate(69.065 40.423)"><ellipse id="dot" cx="1.95" cy="1.98" rx="1.95" ry="1.98"/></g><g id="dot-link" fill="#FFF" stroke="#000" transform="translate(98.318 99.826)"><ellipse id="dot" cx="1.95" cy="1.98" rx="1.95" ry="1.98"/></g><g id="dot-link" fill="#FFF" stroke="#000" transform="translate(69.065 159.229)"><ellipse id="dot" cx="1.95" cy="1.98" rx="1.95" ry="1.98"/></g></g></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

Before After
Before After

20
7-animation/1-bezier-curve/bezier2.svg
View file

@ -1,19 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="149px" height="187px" viewBox="0 0 149 187" 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>bezier2.svg</title>
<desc>Created with sketchtool.</desc>
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="bezier2.svg">
<path d="M24.1700721,143.347957 L124.314002,43.5051082" id="Path-6" stroke="#CB1E31" stroke-width="2"></path>
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" cx="24" cy="144" r="4"></circle>
<text id="1" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="20" y="165">1</tspan>
</text>
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" cx="124" cy="44" r="4"></circle>
<text id="2" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="120.100962" y="65">2</tspan>
</text>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="149" height="187" viewBox="0 0 149 187"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/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="animation" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="bezier2.svg"><path id="Path-6" stroke="#CB1E31" stroke-width="2" d="M24.17 143.348l100.144-99.843"/><circle id="Oval-1" cx="24" cy="144" r="4" fill="#FFF" stroke="#E8C48E"/><text id="1" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="20" y="165">1</tspan></text><circle id="Oval-2" cx="124" cy="44" r="4" fill="#FFF" stroke="#E8C48E"/><text id="2" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="120.101" y="65">2</tspan></text></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

Before After
Before After

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

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

Before

Width:  |  Height:  |  Size: 6.4 KiB

After

Width:  |  Height:  |  Size: 6.1 KiB

Before After
Before After

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

@ -1,37 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="340px" height="350px" viewBox="0 0 340 350" 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>bezier3-draw2.svg</title>
<desc>Created with sketchtool.</desc>
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="bezier3-draw2.svg">
<g id="Group" transform="translate(33.000000, 24.000000)">
<polyline id="Path-8" stroke="#E8C48E" points="4.28174735 290.327897 138.238321 22.8198382 273.203643 291.314199"></polyline>
<path d="M4.73847812,290.327897 C103.049771,92.7662372 192.925337,132.466387 272.894562,291.818178" id="Path-7" stroke="#CB1E31" stroke-width="2"></path>
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" cx="4" cy="292" r="4"></circle>
<text id="1" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="0" y="313">1</tspan>
</text>
<circle id="Oval-3" stroke="#E8C48E" fill="#FFFFFF" cx="273" cy="292" r="4"></circle>
<text id="3" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="269" y="313">3</tspan>
</text>
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" cx="138" cy="23" r="4"></circle>
<circle id="Oval-4" fill="#CB1E31" cx="138" cy="157" r="4"></circle>
<path d="M71.5,157 L205,157" id="Line" stroke="#62C0DC" stroke-width="2" stroke-linecap="square"></path>
<text id="2" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="134" y="15">2</tspan>
</text>
<text id="0.5" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="128" y="181">0.5</tspan>
</text>
<text id="t-=-0.5" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="17" y="163">t = 0.5</tspan>
</text>
<text id="0.5" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="216" y="163">0.5</tspan>
</text>
</g>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="340" height="350" viewBox="0 0 340 350"><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="animation" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="bezier3-draw2.svg"><g id="Group" transform="translate(33 24)"><path id="Path-8" stroke="#E8C48E" d="M4.282 290.328L138.238 22.82l134.966 268.494"/><path id="Path-7" stroke="#CB1E31" stroke-width="2" d="M4.738 290.328c98.312-197.562 188.187-157.862 268.157 1.49"/><circle id="Oval-1" cx="4" cy="292" r="4" fill="#FFF" stroke="#E8C48E"/><text id="1" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="0" y="313">1</tspan></text><circle id="Oval-3" cx="273" cy="292" r="4" fill="#FFF" stroke="#E8C48E"/><text id="3" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="269" y="313">3</tspan></text><circle id="Oval-2" cx="138" cy="23" r="4" fill="#FFF" stroke="#E8C48E"/><circle id="Oval-4" cx="138" cy="157" r="4" fill="#CB1E31"/><path id="Line" stroke="#62C0DC" stroke-linecap="square" stroke-width="2" d="M71.5 157H205"/><text id="2" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="134" y="15">2</tspan></text><text id=".5" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="128" y="181">0.5</tspan></text><text id="t-=-0.5" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="17" y="163">t = 0.5</tspan></text><text id=".5" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="216" y="163">0.5</tspan></text></g></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

Before After
Before After

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

@ -1,24 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="149px" height="187px" viewBox="0 0 149 187" 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>bezier3-e.svg</title>
<desc>Created with sketchtool.</desc>
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="bezier3-e.svg">
<polygon id="Triangle-1" stroke="#E8C48E" points="74.5 43 125 144 24 144"></polygon>
<path d="M24.2788462,143.124399 C74.499953,42.9398992 114.209434,125.40565 124.100962,143.645433" id="Path-4" stroke="#CB1E31" stroke-width="2"></path>
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" cx="24" cy="144" r="4"></circle>
<text id="1" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="20" y="165">1</tspan>
</text>
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" cx="124" cy="144" r="4"></circle>
<text id="3" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="120" y="165">3</tspan>
</text>
<circle id="Oval-3" stroke="#E8C48E" fill="#FFFFFF" cx="74" cy="44" r="4"></circle>
<text id="-4" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="70.1899038" y="36">3</tspan>
</text>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="149" height="187" viewBox="0 0 149 187"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/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="animation" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="bezier3-e.svg"><path id="Triangle-1" stroke="#E8C48E" d="M74.5 43L125 144H24z"/><path id="Path-4" stroke="#CB1E31" stroke-width="2" d="M24.279 143.124c50.221-100.184 89.93-17.718 99.822.521"/><circle id="Oval-1" cx="24" cy="144" r="4" fill="#FFF" stroke="#E8C48E"/><text id="1" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="20" y="165">1</tspan></text><circle id="Oval-2" cx="124" cy="144" r="4" fill="#FFF" stroke="#E8C48E"/><text id="3" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="120" y="165">3</tspan></text><circle id="Oval-3" cx="74" cy="44" r="4" fill="#FFF" stroke="#E8C48E"/><text id="-4" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="70.19" y="36">3</tspan></text></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

Before After
Before After

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

@ -1,23 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="149px" height="187px" viewBox="0 0 149 187" 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>bezier3.svg</title>
<desc>Created with sketchtool.</desc>
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="bezier3.svg">
<path d="M24.2788462,143.124399 C74.499953,42.9398992 114.209434,125.40565 124.100962,143.645433" id="Path-4" stroke="#CB1E31" stroke-width="2"></path>
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" cx="24" cy="144" r="4"></circle>
<text id="1" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="20" y="165">1</tspan>
</text>
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" cx="124" cy="144" r="4"></circle>
<text id="3" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="120" y="165">3</tspan>
</text>
<circle id="Oval-3" stroke="#E8C48E" fill="#FFFFFF" cx="74" cy="44" r="4"></circle>
<text id="2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="17" fill="#8A704D">
<tspan x="69.9899038" y="32">2</tspan>
</text>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="149" height="187" viewBox="0 0 149 187"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/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="animation" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="bezier3.svg"><path id="Path-4" stroke="#CB1E31" stroke-width="2" d="M24.279 143.124c50.221-100.184 89.93-17.718 99.822.521"/><circle id="Oval-1" cx="24" cy="144" r="4" fill="#FFF" stroke="#E8C48E"/><text id="1" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="20" y="165">1</tspan></text><circle id="Oval-2" cx="124" cy="144" r="4" fill="#FFF" stroke="#E8C48E"/><text id="3" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="120" y="165">3</tspan></text><circle id="Oval-3" cx="74" cy="44" r="4" fill="#FFF" stroke="#E8C48E"/><text id="2" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="69.99" y="32">2</tspan></text></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

29
7-animation/1-bezier-curve/bezier4-e.svg
View file

@ -1,28 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="149px" height="187px" viewBox="0 0 149 187" 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>bezier4-e.svg</title>
<desc>Created with sketchtool.</desc>
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="bezier4-e.svg">
<path d="M72.5144872,143.5 L122.714983,43.5 L74.0143159,43.5 L23.81382,143.5 L72.5144872,143.5 Z" id="Rectangle-1" stroke="#E8C48E"></path>
<path d="M23.6882043,143.904835 C73.7030381,143.904854 74.3912999,43.4905636 124.154864,43.4905689" id="Path-1" stroke="#CB1E31" stroke-width="2"></path>
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" cx="24" cy="144" r="4"></circle>
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" cx="124" cy="43" r="4"></circle>
<circle id="Oval-3" stroke="#E8C48E" fill="#FFFFFF" cx="73" cy="43" r="4"></circle>
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" cx="73" cy="143" r="4"></circle>
<text id="1" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="20" y="165">1</tspan>
</text>
<text id="2" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="69" y="165">2</tspan>
</text>
<text id="3" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="69" y="35">3</tspan>
</text>
<text id="4" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="121" y="35">4</tspan>
</text>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="149" height="187" viewBox="0 0 149 187"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/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="animation" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="bezier4-e.svg"><path id="Rectangle-1" stroke="#E8C48E" d="M72.514 143.5l50.201-100h-48.7l-50.201 100h48.7z"/><path id="Path-1" stroke="#CB1E31" stroke-width="2" d="M23.688 143.905c50.015 0 50.703-100.414 100.467-100.414"/><circle id="Oval-1" cx="24" cy="144" r="4" fill="#FFF" stroke="#E8C48E"/><circle id="Oval-2" cx="124" cy="43" r="4" fill="#FFF" stroke="#E8C48E"/><circle id="Oval-3" cx="73" cy="43" r="4" fill="#FFF" stroke="#E8C48E"/><circle id="Oval-4" cx="73" cy="143" r="4" fill="#FFF" stroke="#E8C48E"/><text id="1" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="20" y="165">1</tspan></text><text id="2" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="69" y="165">2</tspan></text><text id="3" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="69" y="35">3</tspan></text><text id="4" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="121" y="35">4</tspan></text></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

Before After
Before After

28
7-animation/1-bezier-curve/bezier4.svg
View file

@ -1,27 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="149px" height="187px" viewBox="0 0 149 187" 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>bezier4.svg</title>
<desc>Created with sketchtool.</desc>
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="bezier4.svg">
<path d="M23.6882043,143.904835 C73.7030381,143.904854 74.3912999,43.4905636 124.154864,43.4905689" id="Path-1" stroke="#CB1E31" stroke-width="2"></path>
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" cx="24" cy="144" r="4"></circle>
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" cx="124" cy="43" r="4"></circle>
<circle id="Oval-3" stroke="#E8C48E" fill="#FFFFFF" cx="73" cy="43" r="4"></circle>
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" cx="73" cy="143" r="4"></circle>
<text id="1" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="20" y="165">1</tspan>
</text>
<text id="2" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="69" y="165">2</tspan>
</text>
<text id="3" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="69" y="35">3</tspan>
</text>
<text id="4" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="121" y="35">4</tspan>
</text>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="149" height="187" viewBox="0 0 149 187"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/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="animation" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="bezier4.svg"><path id="Path-1" stroke="#CB1E31" stroke-width="2" d="M23.688 143.905c50.015 0 50.703-100.414 100.467-100.414"/><circle id="Oval-1" cx="24" cy="144" r="4" fill="#FFF" stroke="#E8C48E"/><circle id="Oval-2" cx="124" cy="43" r="4" fill="#FFF" stroke="#E8C48E"/><circle id="Oval-3" cx="73" cy="43" r="4" fill="#FFF" stroke="#E8C48E"/><circle id="Oval-4" cx="73" cy="143" r="4" fill="#FFF" stroke="#E8C48E"/><text id="1" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="20" y="165">1</tspan></text><text id="2" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="69" y="165">2</tspan></text><text id="3" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="69" y="35">3</tspan></text><text id="4" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="121" y="35">4</tspan></text></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

Before After
Before After

31
7-animation/2-css-animations/2-animate-logo-bezier-css/bezier-up.svg
View file

@ -1,30 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="149px" height="187px" viewBox="0 0 149 187" 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>bezier-up.svg</title>
<desc>Created with sketchtool.</desc>
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="bezier-up.svg">
<path d="M12.5,60.5 L135.5,60.5" id="Line-3" stroke="#979797" opacity="0.7" stroke-linecap="square" stroke-dasharray="3,2,3,3"></path>
<path d="M24.5,160.5 L49.5,13.5" id="Line" stroke="#E8C48E" stroke-linecap="square"></path>
<path d="M124.5,60.5 L99.5,9.5" id="Line-2" stroke="#E8C48E" stroke-linecap="square"></path>
<path d="M23.6666667,160.666667 C48.6666667,10.6666667 98.6666667,10.6666667 123.666667,60.6666667" id="bezier-path" stroke="#CB1E00" stroke-width="2"></path>
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" cx="24" cy="161" r="4"></circle>
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" cx="124" cy="60" r="4"></circle>
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" cx="49" cy="11" r="4"></circle>
<circle id="Oval-5" stroke="#E8C48E" fill="#FFFFFF" cx="99" cy="11" r="4"></circle>
<text id="1" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="20" y="182">1</tspan>
</text>
<text id="2" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="33" y="16">2</tspan>
</text>
<text id="3" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="106" y="16">3</tspan>
</text>
<text id="4" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="127" y="52">4</tspan>
</text>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="149" height="187" viewBox="0 0 149 187"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/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="animation" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="bezier-up.svg"><path id="Line-3" stroke="#979797" stroke-dasharray="3,2,3,3" stroke-linecap="square" d="M12.5 60.5h123" opacity=".7"/><path id="Line" stroke="#E8C48E" stroke-linecap="square" d="M24.5 160.5l25-147"/><path id="Line-2" stroke="#E8C48E" stroke-linecap="square" d="M124.5 60.5l-25-51"/><path id="bezier-path" stroke="#CB1E00" stroke-width="2" d="M23.667 160.667c25-150 75-150 100-100"/><circle id="Oval-1" cx="24" cy="161" r="4" fill="#FFF" stroke="#E8C48E"/><circle id="Oval-2" cx="124" cy="60" r="4" fill="#FFF" stroke="#E8C48E"/><circle id="Oval-4" cx="49" cy="11" r="4" fill="#FFF" stroke="#E8C48E"/><circle id="Oval-5" cx="99" cy="11" r="4" fill="#FFF" stroke="#E8C48E"/><text id="1" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="20" y="182">1</tspan></text><text id="2" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="33" y="16">2</tspan></text><text id="3" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="106" y="16">3</tspan></text><text id="4" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="127" y="52">4</tspan></text></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

Before After
Before After

24
7-animation/2-css-animations/bezier-linear.svg
View file

@ -1,23 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="144px" height="150px" viewBox="0 0 144 150" 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>bezier-linear.svg</title>
<desc>Created with sketchtool.</desc>
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="bezier-linear.svg">
<g id="1" transform="translate(12.000000, 13.000000)">
<g id="Group">
<path d="M4.17,103.348 L104.314,3.505" id="Shape" stroke="#CB1E31" stroke-width="2"></path>
<circle id="Oval" stroke="#E8C48E" fill="#FFFFFF" cx="4" cy="104" r="4"></circle>
<text id="1" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="10.2803872" font-weight="bold">
<tspan x="0" y="125">1</tspan>
</text>
<circle id="Oval" stroke="#E8C48E" fill="#FFFFFF" cx="104" cy="4" r="4"></circle>
<text id="2" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="10.2803872" font-weight="bold">
<tspan x="100.101" y="25">2</tspan>
</text>
</g>
</g>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="144" height="150" viewBox="0 0 144 150"><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="animation" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="bezier-linear.svg"><g id="1" transform="translate(12 13)"><g id="Group"><path id="Shape" stroke="#CB1E31" stroke-width="2" d="M4.17 103.348L104.314 3.505"/><circle id="Oval" cx="4" cy="104" r="4" fill="#FFF" stroke="#E8C48E"/><text id="1" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="10.28" font-weight="bold"><tspan x="0" y="125">1</tspan></text><circle id="Oval" cx="104" cy="4" r="4" fill="#FFF" stroke="#E8C48E"/><text id="2" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="10.28" font-weight="bold"><tspan x="100.101" y="25">2</tspan></text></g></g></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

Before After
Before After

51
7-animation/2-css-animations/bezier-train-over.svg
View file

@ -1,50 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="225px" height="331px" viewBox="0 0 225 331" 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>bezier-train-over.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<rect id="path-1" x="34" y="15" width="150" height="150"></rect>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="150" height="150" fill="white">
<use xlink:href="#path-1"></use>
</mask>
</defs>
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="bezier-train-over.svg">
<g id="Group" opacity="0.7" transform="translate(0.000000, 74.000000)">
<use id="Rectangle-233" stroke="#979797" mask="url(#mask-2)" stroke-width="2" stroke-dasharray="3,2,3,2" xlink:href="#path-1"></use>
<text id="(1,1)" font-family="PTMono-Bold, PT Mono" font-size="12" font-weight="bold" fill="#838383">
<tspan x="189" y="11">(1,1)</tspan>
</text>
<text id="(0,0)" font-family="PTMono-Bold, PT Mono" font-size="12" font-weight="bold" fill="#838383">
<tspan x="0" y="157">(0,0)</tspan>
</text>
<text id="(0,1)" font-family="PTMono-Bold, PT Mono" font-size="12" font-weight="bold" fill="#838383">
<tspan x="0" y="11">(0,1)</tspan>
</text>
<text id="(1,0)" font-family="PTMono-Bold, PT Mono" font-size="12" font-weight="bold" fill="#838383">
<tspan x="189" y="157">(1,0)</tspan>
</text>
</g>
<path d="M34.5,239.5 L107.5,312.5" id="Line-2" stroke="#E8C48E" stroke-linecap="square"></path>
<path d="M34,239 C109,314 109,14 184,89" id="bezier-path" stroke="#CB1E31" stroke-width="2"></path>
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" cx="34" cy="239" r="4"></circle>
<text id="-2" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="30" y="261">1</tspan>
</text>
<circle id="Oval-6" stroke="#E8C48E" fill="#FFFFFF" cx="109" cy="314" r="4"></circle>
<text id="-3" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="92" y="320">2</tspan>
</text>
<path d="M110.5,15.5 L183.5,88.5" id="Line" stroke="#E8C48E" stroke-linecap="square"></path>
<circle id="Oval-5" stroke="#E8C48E" fill="#FFFFFF" cx="184" cy="89" r="4"></circle>
<text id="-5" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="188" y="107">4</tspan>
</text>
<circle id="Oval-7" stroke="#E8C48E" fill="#FFFFFF" cx="109" cy="14" r="4"></circle>
<text id="-4" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="92" y="21">3</tspan>
</text>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="225" height="331" viewBox="0 0 225 331"><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="M34 15h150v150H34z"/><mask id="mask-2" width="150" height="150" x="0" y="0" fill="#fff" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox"><use xlink:href="#path-1"/></mask></defs><g id="animation" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="bezier-train-over.svg"><g id="Group" opacity=".7" transform="translate(0 74)"><use id="Rectangle-233" stroke="#979797" stroke-dasharray="3,2,3,2" stroke-width="2" mask="url(#mask-2)" xlink:href="#path-1"/><text id="(1,1)" fill="#838383" font-family="PTMono-Bold, PT Mono" font-size="12" font-weight="bold"><tspan x="189" y="11">(1,1)</tspan></text><text id="(0,0)" fill="#838383" font-family="PTMono-Bold, PT Mono" font-size="12" font-weight="bold"><tspan x="0" y="157">(0,0)</tspan></text><text id="(0,1)" fill="#838383" font-family="PTMono-Bold, PT Mono" font-size="12" font-weight="bold"><tspan x="0" y="11">(0,1)</tspan></text><text id="(1,0)" fill="#838383" font-family="PTMono-Bold, PT Mono" font-size="12" font-weight="bold"><tspan x="189" y="157">(1,0)</tspan></text></g><path id="Line-2" stroke="#E8C48E" stroke-linecap="square" d="M34.5 239.5l73 73"/><path id="bezier-path" stroke="#CB1E31" stroke-width="2" d="M34 239c75 75 75-225 150-150"/><circle id="Oval-4" cx="34" cy="239" r="4" fill="#FFF" stroke="#E8C48E"/><text id="-2" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="30" y="261">1</tspan></text><circle id="Oval-6" cx="109" cy="314" r="4" fill="#FFF" stroke="#E8C48E"/><text id="-3" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="92" y="320">2</tspan></text><path id="Line" stroke="#E8C48E" stroke-linecap="square" d="M110.5 15.5l73 73"/><circle id="Oval-5" cx="184" cy="89" r="4" fill="#FFF" stroke="#E8C48E"/><text id="-5" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="188" y="107">4</tspan></text><circle id="Oval-7" cx="109" cy="14" r="4" fill="#FFF" stroke="#E8C48E"/><text id="-4" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="92" y="21">3</tspan></text></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

Before After
Before After

30
7-animation/2-css-animations/ease-in-out.svg
View file

@ -1,29 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="149px" height="187px" viewBox="0 0 149 187" 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>ease-in-out.svg</title>
<desc>Created with sketchtool.</desc>
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="ease-in-out.svg">
<path d="M23.6882043,143.904835 C66.0081124,143.904815 81.7292657,43.4905742 124.154864,43.4905689" id="Path-1" stroke="#CB1E31" stroke-width="2"></path>
<path d="M24.5,143.5 L66.7965736,143.5" id="Line" stroke="#E8C48E" stroke-linecap="square"></path>
<path d="M83.5,43.5 L125.796574,43.5" id="Line-2" stroke="#E8C48E" stroke-linecap="square"></path>
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" cx="24" cy="144" r="4"></circle>
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" cx="124" cy="43" r="4"></circle>
<circle id="Oval-3" stroke="#E8C48E" fill="#FFFFFF" cx="82" cy="43" r="4"></circle>
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" cx="66" cy="143" r="4"></circle>
<text id="1" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="20" y="165">1</tspan>
</text>
<text id="2" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="62" y="165">2</tspan>
</text>
<text id="3" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="78" y="35">3</tspan>
</text>
<text id="4" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="121" y="35">4</tspan>
</text>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="149" height="187" viewBox="0 0 149 187"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/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="animation" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="ease-in-out.svg"><path id="Path-1" stroke="#CB1E31" stroke-width="2" d="M23.688 143.905c42.32 0 58.041-100.414 100.467-100.414"/><path id="Line" stroke="#E8C48E" stroke-linecap="square" d="M24.5 143.5h42.297"/><path id="Line-2" stroke="#E8C48E" stroke-linecap="square" d="M83.5 43.5h42.297"/><circle id="Oval-1" cx="24" cy="144" r="4" fill="#FFF" stroke="#E8C48E"/><circle id="Oval-2" cx="124" cy="43" r="4" fill="#FFF" stroke="#E8C48E"/><circle id="Oval-3" cx="82" cy="43" r="4" fill="#FFF" stroke="#E8C48E"/><circle id="Oval-4" cx="66" cy="143" r="4" fill="#FFF" stroke="#E8C48E"/><text id="1" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="20" y="165">1</tspan></text><text id="2" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="62" y="165">2</tspan></text><text id="3" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="78" y="35">3</tspan></text><text id="4" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="121" y="35">4</tspan></text></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

Before After
Before After

28
7-animation/2-css-animations/ease-in.svg
View file

@ -1,27 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="149px" height="187px" viewBox="0 0 149 187" 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>ease-in.svg</title>
<desc>Created with sketchtool.</desc>
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="ease-in.svg">
<path d="M23.6882043,143.904835 C66.0081124,143.904815 124.154864,43.4905689 124.154864,43.4905689" id="Path-1" stroke="#CB1E31" stroke-width="2"></path>
<path d="M24.5,143.5 L66.7965736,143.5" id="Line" stroke="#E8C48E" stroke-linecap="square"></path>
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" cx="24" cy="144" r="4"></circle>
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" cx="124" cy="43" r="4"></circle>
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" cx="66" cy="143" r="4"></circle>
<text id="1" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="20" y="165">1</tspan>
</text>
<text id="2" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="62" y="165">2</tspan>
</text>
<text id="3" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="114" y="35">3</tspan>
</text>
<text id="4" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="127" y="35">4</tspan>
</text>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="149" height="187" viewBox="0 0 149 187"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/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="animation" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="ease-in.svg"><path id="Path-1" stroke="#CB1E31" stroke-width="2" d="M23.688 143.905c42.32 0 100.467-100.414 100.467-100.414"/><path id="Line" stroke="#E8C48E" stroke-linecap="square" d="M24.5 143.5h42.297"/><circle id="Oval-1" cx="24" cy="144" r="4" fill="#FFF" stroke="#E8C48E"/><circle id="Oval-2" cx="124" cy="43" r="4" fill="#FFF" stroke="#E8C48E"/><circle id="Oval-4" cx="66" cy="143" r="4" fill="#FFF" stroke="#E8C48E"/><text id="1" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="20" y="165">1</tspan></text><text id="2" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="62" y="165">2</tspan></text><text id="3" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="114" y="35">3</tspan></text><text id="4" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="127" y="35">4</tspan></text></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

Before After
Before After

28
7-animation/2-css-animations/ease-out.svg
View file

@ -1,27 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="149px" height="187px" viewBox="0 0 149 187" 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>ease-out.svg</title>
<desc>Created with sketchtool.</desc>
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="ease-out.svg">
<path d="M23.6882043,143.904835 C23.6882043,143.904835 81.8846154,43.4905689 124.154864,43.4905689" id="Path-1" stroke="#CB1E31" stroke-width="2"></path>
<path d="M83.5,43.5 L123.799999,43.5" id="Line-2" stroke="#E8C48E" stroke-linecap="square"></path>
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" cx="24" cy="144" r="4"></circle>
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" cx="124" cy="43" r="4"></circle>
<circle id="Oval-3" stroke="#E8C48E" fill="#FFFFFF" cx="82" cy="43" r="4"></circle>
<text id="1" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="13" y="165">1</tspan>
</text>
<text id="2" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="27" y="165">2</tspan>
</text>
<text id="3" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="79" y="35">3</tspan>
</text>
<text id="4" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="120" y="35">4</tspan>
</text>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="149" height="187" viewBox="0 0 149 187"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/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="animation" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="ease-out.svg"><path id="Path-1" stroke="#CB1E31" stroke-width="2" d="M23.688 143.905S81.885 43.49 124.155 43.49"/><path id="Line-2" stroke="#E8C48E" stroke-linecap="square" d="M83.5 43.5h40.3"/><circle id="Oval-1" cx="24" cy="144" r="4" fill="#FFF" stroke="#E8C48E"/><circle id="Oval-2" cx="124" cy="43" r="4" fill="#FFF" stroke="#E8C48E"/><circle id="Oval-3" cx="82" cy="43" r="4" fill="#FFF" stroke="#E8C48E"/><text id="1" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="13" y="165">1</tspan></text><text id="2" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="27" y="165">2</tspan></text><text id="3" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="79" y="35">3</tspan></text><text id="4" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="120" y="35">4</tspan></text></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

Before After
Before After

30
7-animation/2-css-animations/ease.svg
View file

@ -1,29 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="149px" height="187px" viewBox="0 0 149 187" 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>ease.svg</title>
<desc>Created with sketchtool.</desc>
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="ease.svg">
<path d="M23.6882043,143.904835 C48.7884621,134.014426 48.7884621,43.4905636 124.154864,43.4905689" id="Path-1" stroke="#CB1E31" stroke-width="2"></path>
<path d="M24.5,143.5 L48.5,134.5" id="Line" stroke="#E8C48E" stroke-linecap="square"></path>
<path d="M50.5,43.5 L123.800003,43.5" id="Line-2" stroke="#E8C48E" stroke-linecap="square"></path>
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" cx="24" cy="144" r="4"></circle>
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" cx="124" cy="43" r="4"></circle>
<circle id="Oval-3" stroke="#E8C48E" fill="#FFFFFF" cx="49" cy="43" r="4"></circle>
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" cx="49" cy="134" r="4"></circle>
<text id="1" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="20" y="165">1</tspan>
</text>
<text id="2" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="45" y="156">2</tspan>
</text>
<text id="3" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="45" y="35">3</tspan>
</text>
<text id="4" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="121" y="35">4</tspan>
</text>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="149" height="187" viewBox="0 0 149 187"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/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="animation" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="ease.svg"><path id="Path-1" stroke="#CB1E31" stroke-width="2" d="M23.688 143.905c25.1-9.89 25.1-100.414 100.467-100.414"/><path id="Line" stroke="#E8C48E" stroke-linecap="square" d="M24.5 143.5l24-9"/><path id="Line-2" stroke="#E8C48E" stroke-linecap="square" d="M50.5 43.5h73.3"/><circle id="Oval-1" cx="24" cy="144" r="4" fill="#FFF" stroke="#E8C48E"/><circle id="Oval-2" cx="124" cy="43" r="4" fill="#FFF" stroke="#E8C48E"/><circle id="Oval-3" cx="49" cy="43" r="4" fill="#FFF" stroke="#E8C48E"/><circle id="Oval-4" cx="49" cy="134" r="4" fill="#FFF" stroke="#E8C48E"/><text id="1" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="20" y="165">1</tspan></text><text id="2" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="45" y="156">2</tspan></text><text id="3" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="45" y="35">3</tspan></text><text id="4" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="121" y="35">4</tspan></text></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

Before After
Before After

30
7-animation/2-css-animations/train-curve.svg
View file

@ -1,29 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="149px" height="187px" viewBox="0 0 149 187" 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>train-curve.svg</title>
<desc>Created with sketchtool.</desc>
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="train-curve.svg">
<path d="M26.1366543,142.907525 C26.1365899,93.4999868 76.5010648,43.244154 126.495114,43.2441555" id="Path-13" stroke="#CB1E31" stroke-width="2"></path>
<path d="M25.5,143.5 L25.5,93.3402552" id="Line" stroke="#E8C48E" stroke-linecap="square"></path>
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" cx="26" cy="144" r="4"></circle>
<text id="-2" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="22" y="165">1</tspan>
</text>
<circle id="Oval-6" stroke="#E8C48E" fill="#FFFFFF" cx="26" cy="94" r="4"></circle>
<text id="2" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="22" y="87">2</tspan>
</text>
<path d="M75.5,43.5 L126.135956,43.5" id="Line" stroke="#E8C48E" stroke-linecap="square"></path>
<circle id="Oval-5" stroke="#E8C48E" fill="#FFFFFF" cx="126" cy="44" r="4"></circle>
<text id="4" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="122" y="36">4</tspan>
</text>
<circle id="Oval-7" stroke="#E8C48E" fill="#FFFFFF" cx="76" cy="44" r="4"></circle>
<text id="3" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold" line-spacing="17" fill="#8A704D">
<tspan x="72" y="36">3</tspan>
</text>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="149" height="187" viewBox="0 0 149 187"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/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="animation" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="train-curve.svg"><path id="Path-13" stroke="#CB1E31" stroke-width="2" d="M26.137 142.908c0-49.408 50.364-99.664 100.358-99.664"/><path id="Line" stroke="#E8C48E" stroke-linecap="square" d="M25.5 143.5V93.34"/><circle id="Oval-4" cx="26" cy="144" r="4" fill="#FFF" stroke="#E8C48E"/><text id="-2" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="22" y="165">1</tspan></text><circle id="Oval-6" cx="26" cy="94" r="4" fill="#FFF" stroke="#E8C48E"/><text id="2" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="22" y="87">2</tspan></text><path id="Line" stroke="#E8C48E" stroke-linecap="square" d="M75.5 43.5h50.636"/><circle id="Oval-5" cx="126" cy="44" r="4" fill="#FFF" stroke="#E8C48E"/><text id="4" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="122" y="36">4</tspan></text><circle id="Oval-7" cx="76" cy="44" r="4" fill="#FFF" stroke="#E8C48E"/><text id="3" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="72" y="36">3</tspan></text></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

Before After
Before After

23
7-animation/3-js-animation/back.svg
View file

@ -1,22 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="234px" height="240px" viewBox="0 0 234 240" 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>back.svg</title>
<desc>Created with sketchtool.</desc>
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="back.svg">
<path id="Line" d="M35,36.1600037 L35,210.5 L33,210.5 L33,36.1600037 L27,36.1600037 L34,22.1600037 L41,36.1600037 L35,36.1600037 Z" fill="#E8C48E" fill-rule="nonzero"></path>
<path id="Line" d="M194.509995,195 L23.5,195 L23.5,193 L194.509995,193 L194.509995,187 L208.509995,194 L194.509995,201 L194.509995,195 Z" fill="#E8C48E" fill-rule="nonzero"></path>
<path d="M35.3289777,193.635841 C35.3289777,193.635841 82.5458318,209.484914 105.066994,208.643536 C127.588155,207.802158 166.326582,214.914724 208.465749,22.4456533" id="Path-747" stroke="#EE6B47" stroke-width="3"></path>
<text id="0" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="212">0</tspan>
</text>
<text id="1" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="36">1</tspan>
</text>
<text id="-2" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="200" y="212">1</tspan>
</text>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="234" height="240" viewBox="0 0 234 240"><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="animation" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="back.svg"><path id="Line" fill="#E8C48E" fill-rule="nonzero" d="M35 36.16V210.5h-2V36.16h-6l7-14 7 14h-6z"/><path id="Line" fill="#E8C48E" fill-rule="nonzero" d="M194.51 195H23.5v-2h171.01v-6l14 7-14 7v-6z"/><path id="Path-747" stroke="#EE6B47" stroke-width="3" d="M35.329 193.636s47.217 15.849 69.738 15.008c22.521-.842 61.26 6.27 103.399-186.198"/><text id="0" fill="#8A704D" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="17" y="212">0</tspan></text><text id="1" fill="#8A704D" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="17" y="36">1</tspan></text><text id="-2" fill="#8A704D" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="200" y="212">1</tspan></text></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

Before After
Before After

24
7-animation/3-js-animation/bezier-linear.svg
View file

@ -1,23 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="144px" height="150px" viewBox="0 0 144 150" 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>bezier-linear.svg</title>
<desc>Created with sketchtool.</desc>
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="bezier-linear.svg">
<g id="1" transform="translate(12.000000, 13.000000)">
<g id="Group">
<path d="M4.17,103.348 L104.314,3.505" id="Shape" stroke="#CB1E31" stroke-width="2"></path>
<circle id="Oval" stroke="#E8C48E" fill="#FFFFFF" cx="4" cy="104" r="4"></circle>
<text id="1" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="10.2803872" font-weight="bold">
<tspan x="0" y="125">1</tspan>
</text>
<circle id="Oval" stroke="#E8C48E" fill="#FFFFFF" cx="104" cy="4" r="4"></circle>
<text id="2" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="10.2803872" font-weight="bold">
<tspan x="100.101" y="25">2</tspan>
</text>
</g>
</g>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="144" height="150" viewBox="0 0 144 150"><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="animation" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="bezier-linear.svg"><g id="1" transform="translate(12 13)"><g id="Group"><path id="Shape" stroke="#CB1E31" stroke-width="2" d="M4.17 103.348L104.314 3.505"/><circle id="Oval" cx="4" cy="104" r="4" fill="#FFF" stroke="#E8C48E"/><text id="1" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="10.28" font-weight="bold"><tspan x="0" y="125">1</tspan></text><circle id="Oval" cx="104" cy="4" r="4" fill="#FFF" stroke="#E8C48E"/><text id="2" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="10.28" font-weight="bold"><tspan x="100.101" y="25">2</tspan></text></g></g></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

Before After
Before After

24
7-animation/3-js-animation/bounce-inout.svg
View file

@ -1,23 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="234px" height="240px" viewBox="0 0 234 240" 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>bounce-inout.svg</title>
<desc>Created with sketchtool.</desc>
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="bounce-inout.svg">
<path id="Line" d="M35,36.1600037 L35,210.5 L33,210.5 L33,36.1600037 L27,36.1600037 L34,22.1600037 L41,36.1600037 L35,36.1600037 Z" fill="#E8C48E" fill-rule="nonzero"></path>
<path id="Line" d="M194.509995,195 L23.5,195 L23.5,193 L194.509995,193 L194.509995,187 L208.509995,194 L194.509995,201 L194.509995,195 Z" fill="#E8C48E" fill-rule="nonzero"></path>
<path d="M35.3289777,193.635841 C35.3289777,193.635841 41.2333124,187.095281 52.2325098,193.635839 C55.4414764,183.659866 71.0514816,178.107189 80.7686063,193.635839 C89.032676,167.620814 117,110.452183 144.182478,194.552328 C148.063747,176.586161 175.037321,10.6423763 208.465749,22.4456533" id="Path-747" stroke="#EE6B47" stroke-width="3" stroke-linejoin="bevel"></path>
<text id="0" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="212">0</tspan>
</text>
<text id="1" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="36">1</tspan>
</text>
<text id="-2" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="200" y="212">1</tspan>
</text>
<path d="M35.4840461,192.776816 C53.45735,186.177656 69.3490979,170.128038 97.137513,18.4980531 C102.051415,32.4334475 112.013077,63.0795933 127.058929,63.996791 C142.104781,64.9139886 156.560556,31.0473534 160.222221,20.3348259 C166.618848,28.1959597 165.111566,31.4251632 174.958382,31.425163 C184.805198,31.4251628 190.347191,21.8729943 191.581215,20.6199652 C193.7855,22.5969315 202.177314,24.4036062 206.959731,21.4508296" id="Path-770" stroke="#62C0DC" stroke-width="3" stroke-linejoin="bevel"></path>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="234" height="240" viewBox="0 0 234 240"><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="animation" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="bounce-inout.svg"><path id="Line" fill="#E8C48E" fill-rule="nonzero" d="M35 36.16V210.5h-2V36.16h-6l7-14 7 14h-6z"/><path id="Line" fill="#E8C48E" fill-rule="nonzero" d="M194.51 195H23.5v-2h171.01v-6l14 7-14 7v-6z"/><path id="Path-747" stroke="#EE6B47" stroke-linejoin="bevel" stroke-width="3" d="M35.329 193.636s5.904-6.54 16.904 0c3.208-9.976 18.818-15.529 28.536 0 8.264-26.015 36.231-83.184 63.413.916 3.882-17.966 30.855-183.91 64.284-172.106"/><text id="0" fill="#8A704D" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="17" y="212">0</tspan></text><text id="1" fill="#8A704D" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="17" y="36">1</tspan></text><text id="-2" fill="#8A704D" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="200" y="212">1</tspan></text><path id="Path-770" stroke="#62C0DC" stroke-linejoin="bevel" stroke-width="3" d="M35.484 192.777c17.973-6.6 33.865-22.649 61.654-174.279 4.913 13.935 14.875 44.582 29.92 45.499 15.047.917 29.503-32.95 33.164-43.662 6.397 7.861 4.89 11.09 14.736 11.09 9.847 0 15.39-9.552 16.623-10.805 2.205 1.977 10.596 3.784 15.379.83"/></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

Before After
Before After

25
7-animation/3-js-animation/circ-ease.svg
View file

@ -1,24 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="234px" height="240px" viewBox="0 0 234 240" 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>circ-ease.svg</title>
<desc>Created with sketchtool.</desc>
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="circ-ease.svg">
<path id="Line" d="M35,36.1600037 L35,210.5 L33,210.5 L33,36.1600037 L27,36.1600037 L34,22.1600037 L41,36.1600037 L35,36.1600037 Z" fill="#E8C48E" fill-rule="nonzero"></path>
<path id="Line" d="M194.509995,195 L23.5,195 L23.5,193 L194.509995,193 L194.509995,187 L208.509995,194 L194.509995,201 L194.509995,195 Z" fill="#E8C48E" fill-rule="nonzero"></path>
<path d="M35.1598321,193.734972 C116.357678,193.734973 200.574538,141.537458 208.465749,22.4456533" id="Path-747" stroke="#EE6B47" stroke-width="3" stroke-linejoin="bevel"></path>
<path d="M35.1598321,193.734972 C116.357678,193.734973 200.574538,141.537458 208.465749,22.4456533" id="Path-748" stroke="#8DB173" stroke-width="3" stroke-linejoin="bevel" transform="translate(121.812790, 108.090312) scale(-1, -1) translate(-121.812790, -108.090312) "></path>
<text id="0" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="212">0</tspan>
</text>
<text id="1" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="36">1</tspan>
</text>
<text id="-2" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="200" y="212">1</tspan>
</text>
<path d="M35.4840461,192.776816 C53.45735,186.177656 112.052703,195.594079 121.221885,109.458253 C130.391067,23.3224269 202.177314,24.4036062 206.959731,21.4508296" id="Path-770" stroke="#62C0DC" stroke-width="3" stroke-linejoin="bevel"></path>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="234" height="240" viewBox="0 0 234 240"><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="animation" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="circ-ease.svg"><path id="Line" fill="#E8C48E" fill-rule="nonzero" d="M35 36.16V210.5h-2V36.16h-6l7-14 7 14h-6z"/><path id="Line" fill="#E8C48E" fill-rule="nonzero" d="M194.51 195H23.5v-2h171.01v-6l14 7-14 7v-6z"/><path id="Path-747" stroke="#EE6B47" stroke-linejoin="bevel" stroke-width="3" d="M35.16 193.735c81.198 0 165.415-52.198 173.306-171.29"/><path id="Path-748" stroke="#8DB173" stroke-linejoin="bevel" stroke-width="3" d="M208.466 22.446c-81.198 0-165.415 52.197-173.306 171.289"/><text id="0" fill="#8A704D" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="17" y="212">0</tspan></text><text id="1" fill="#8A704D" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="17" y="36">1</tspan></text><text id="-2" fill="#8A704D" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="200" y="212">1</tspan></text><path id="Path-770" stroke="#62C0DC" stroke-linejoin="bevel" stroke-width="3" d="M35.484 192.777c17.973-6.6 76.569 2.817 85.738-83.319 9.17-86.136 80.955-85.054 85.738-88.007"/></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

Before After
Before After

23
7-animation/3-js-animation/circ.svg
View file

@ -1,22 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="234px" height="240px" viewBox="0 0 234 240" 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>circ.svg</title>
<desc>Created with sketchtool.</desc>
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="circ.svg">
<path id="Line" d="M35,36.1600037 L35,210.5 L33,210.5 L33,36.1600037 L27,36.1600037 L34,22.1600037 L41,36.1600037 L35,36.1600037 Z" fill="#E8C48E" fill-rule="nonzero"></path>
<path id="Line" d="M194.509995,195 L23.5,195 L23.5,193 L194.509995,193 L194.509995,187 L208.509995,194 L194.509995,201 L194.509995,195 Z" fill="#E8C48E" fill-rule="nonzero"></path>
<path d="M35.3289777,193.635841 C35.3289777,193.635841 189.874769,197.008001 208.465749,22.4456533" id="Path-747" stroke="#EE6B47" stroke-width="3"></path>
<text id="0" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="212">0</tspan>
</text>
<text id="1" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="36">1</tspan>
</text>
<text id="-2" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="200" y="212">1</tspan>
</text>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="234" height="240" viewBox="0 0 234 240"><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="animation" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="circ.svg"><path id="Line" fill="#E8C48E" fill-rule="nonzero" d="M35 36.16V210.5h-2V36.16h-6l7-14 7 14h-6z"/><path id="Line" fill="#E8C48E" fill-rule="nonzero" d="M194.51 195H23.5v-2h171.01v-6l14 7-14 7v-6z"/><path id="Path-747" stroke="#EE6B47" stroke-width="3" d="M35.329 193.636s154.546 3.372 173.137-171.19"/><text id="0" fill="#8A704D" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="17" y="212">0</tspan></text><text id="1" fill="#8A704D" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="17" y="36">1</tspan></text><text id="-2" fill="#8A704D" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="200" y="212">1</tspan></text></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

23
7-animation/3-js-animation/elastic.svg
View file

@ -1,22 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="233px" height="388px" viewBox="0 0 233 388" 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>elastic.svg</title>
<desc>Created with sketchtool.</desc>
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="elastic.svg">
<path id="Line" d="M35,36.1600037 L35,366 L33,366 L33,36.1600037 L27,36.1600037 L34,22.1600037 L41,36.1600037 L35,36.1600037 Z" fill="#E8C48E" fill-rule="nonzero"></path>
<path id="Line" d="M194.509995,195 L23.5,195 L23.5,193 L194.509995,193 L194.509995,187 L208.509995,194 L194.509995,201 L194.509995,195 Z" fill="#E8C48E" fill-rule="nonzero"></path>
<path d="M34.8792035,192.69782 C38.3217915,192.697818 46.5362784,191.195974 53.4936997,193.038137 C62.0206897,195.295885 61.5154635,189.622956 87.0139157,194.339254 C100.114357,196.762365 100.423927,183.608251 115.161483,194.900075 C135.318831,210.34451 133.877092,159.362737 148.519851,194.677907 C151.940119,202.926853 155.398942,217.279032 158.65332,214.286779 C161.563227,211.611251 163.848094,194.907207 173.23036,150.175435 C177.841468,128.191083 188.232669,296.296579 192.347319,280.535848 C201.966406,243.690946 203.555755,39.1411041 207.337233,22.0938619" id="Path-747" stroke="#EE6B47" stroke-width="3"></path>
<text id="0" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="212">0</tspan>
</text>
<text id="1" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="36">1</tspan>
</text>
<text id="-2" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="200" y="212">1</tspan>
</text>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="233" height="388" viewBox="0 0 233 388"><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="animation" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="elastic.svg"><path id="Line" fill="#E8C48E" fill-rule="nonzero" d="M35 36.16V366h-2V36.16h-6l7-14 7 14h-6z"/><path id="Line" fill="#E8C48E" fill-rule="nonzero" d="M194.51 195H23.5v-2h171.01v-6l14 7-14 7v-6z"/><path id="Path-747" stroke="#EE6B47" stroke-width="3" d="M34.88 192.698c3.442 0 11.656-1.502 18.614.34 8.527 2.258 8.021-3.415 33.52 1.301 13.1 2.423 13.41-10.73 28.147.561 20.158 15.445 18.716-35.537 33.359-.222 3.42 8.249 6.879 22.601 10.133 19.609 2.91-2.676 5.195-19.38 14.577-64.112 4.611-21.984 15.003 146.122 19.117 130.36 9.62-36.844 11.209-241.394 14.99-258.441"/><text id="0" fill="#8A704D" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="17" y="212">0</tspan></text><text id="1" fill="#8A704D" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="17" y="36">1</tspan></text><text id="-2" fill="#8A704D" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="200" y="212">1</tspan></text></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

Before After
Before After

23
7-animation/3-js-animation/linear.svg
View file

@ -1,22 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="234px" height="240px" viewBox="0 0 234 240" 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>linear.svg</title>
<desc>Created with sketchtool.</desc>
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="linear.svg">
<path id="Line" d="M35,36.1600037 L35,210.5 L33,210.5 L33,36.1600037 L27,36.1600037 L34,22.1600037 L41,36.1600037 L35,36.1600037 Z" fill="#E8C48E" fill-rule="nonzero"></path>
<path id="Line" d="M194.509995,195 L23.5,195 L23.5,193 L194.509995,193 L194.509995,187 L208.509995,194 L194.509995,201 L194.509995,195 Z" fill="#E8C48E" fill-rule="nonzero"></path>
<path d="M35.3289777,193.635841 L207.337233,22.0938619" id="Path-747" stroke="#EE6B47" stroke-width="3"></path>
<text id="0" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="212">0</tspan>
</text>
<text id="1" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="36">1</tspan>
</text>
<text id="-2" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="200" y="212">1</tspan>
</text>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="234" height="240" viewBox="0 0 234 240"><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="animation" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="linear.svg"><path id="Line" fill="#E8C48E" fill-rule="nonzero" d="M35 36.16V210.5h-2V36.16h-6l7-14 7 14h-6z"/><path id="Line" fill="#E8C48E" fill-rule="nonzero" d="M194.51 195H23.5v-2h171.01v-6l14 7-14 7v-6z"/><path id="Path-747" stroke="#EE6B47" stroke-width="3" d="M35.329 193.636L207.337 22.094"/><text id="0" fill="#8A704D" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="17" y="212">0</tspan></text><text id="1" fill="#8A704D" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="17" y="36">1</tspan></text><text id="-2" fill="#8A704D" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="200" y="212">1</tspan></text></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

Before After
Before After

23
7-animation/3-js-animation/quad.svg
View file

@ -1,22 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="234px" height="240px" viewBox="0 0 234 240" 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>quad.svg</title>
<desc>Created with sketchtool.</desc>
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="quad.svg">
<path id="Line" d="M35,36.1600037 L35,210.5 L33,210.5 L33,36.1600037 L27,36.1600037 L34,22.1600037 L41,36.1600037 L35,36.1600037 Z" fill="#E8C48E" fill-rule="nonzero"></path>
<path id="Line" d="M194.509995,195 L23.5,195 L23.5,193 L194.509995,193 L194.509995,187 L208.509995,194 L194.509995,201 L194.509995,195 Z" fill="#E8C48E" fill-rule="nonzero"></path>
<path d="M35.3289777,193.635841 C35.3289777,193.635841 113.802694,208.841146 207.337233,22.0938619" id="Path-747" stroke="#EE6B47" stroke-width="3"></path>
<text id="0" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="212">0</tspan>
</text>
<text id="1" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="36">1</tspan>
</text>
<text id="-2" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="200" y="212">1</tspan>
</text>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="234" height="240" viewBox="0 0 234 240"><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="animation" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="quad.svg"><path id="Line" fill="#E8C48E" fill-rule="nonzero" d="M35 36.16V210.5h-2V36.16h-6l7-14 7 14h-6z"/><path id="Line" fill="#E8C48E" fill-rule="nonzero" d="M194.51 195H23.5v-2h171.01v-6l14 7-14 7v-6z"/><path id="Path-747" stroke="#EE6B47" stroke-width="3" d="M35.329 193.636s78.474 15.205 172.008-171.542"/><text id="0" fill="#8A704D" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="17" y="212">0</tspan></text><text id="1" fill="#8A704D" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="17" y="36">1</tspan></text><text id="-2" fill="#8A704D" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="200" y="212">1</tspan></text></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

23
7-animation/3-js-animation/quint.svg
View file

@ -1,22 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="234px" height="240px" viewBox="0 0 234 240" 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>quint.svg</title>
<desc>Created with sketchtool.</desc>
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="quint.svg">
<path id="Line" d="M35,36.1600037 L35,210.5 L33,210.5 L33,36.1600037 L27,36.1600037 L34,22.1600037 L41,36.1600037 L35,36.1600037 Z" fill="#E8C48E" fill-rule="nonzero"></path>
<path id="Line" d="M194.509995,195 L23.5,195 L23.5,193 L194.509995,193 L194.509995,187 L208.509995,194 L194.509995,201 L194.509995,195 Z" fill="#E8C48E" fill-rule="nonzero"></path>
<path d="M35.3289777,193.635841 C149.458906,196.88389 171.361738,184.274633 207.337233,22.0938619" id="Path-747" stroke="#EE6B47" stroke-width="3"></path>
<text id="0" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="212">0</tspan>
</text>
<text id="1" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="36">1</tspan>
</text>
<text id="-2" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="200" y="212">1</tspan>
</text>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="234" height="240" viewBox="0 0 234 240"><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="animation" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="quint.svg"><path id="Line" fill="#E8C48E" fill-rule="nonzero" d="M35 36.16V210.5h-2V36.16h-6l7-14 7 14h-6z"/><path id="Line" fill="#E8C48E" fill-rule="nonzero" d="M194.51 195H23.5v-2h171.01v-6l14 7-14 7v-6z"/><path id="Path-747" stroke="#EE6B47" stroke-width="3" d="M35.329 193.636c114.13 3.248 136.033-9.361 172.008-171.542"/><text id="0" fill="#8A704D" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="17" y="212">0</tspan></text><text id="1" fill="#8A704D" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="17" y="36">1</tspan></text><text id="-2" fill="#8A704D" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="200" y="212">1</tspan></text></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