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

renovation

Browse source
This commit is contained in:
Ilya Kantor 2015-03-05 19:14:51 +03:00
parent 951cf3f2ec
commit 2022aafc13
72 changed files with 98 additions and 1411 deletions
Download patch file Download diff file Expand all files Collapse all files

21
5-animation/2-css-transitions/bezier-linear.svg
View file

@ -1,20 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>bezier2.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="bezier2.svg" sketch:type="MSArtboardGroup">
<path d="M24.1700721,143.347957 L124.314002,43.5051082" id="Path-6" stroke="#CB1E31" stroke-width="2" sketch:type="MSShapeGroup"></path>
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="24" cy="144" r="4"></circle>
<text id="1" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="20" y="165">1</tspan>
</text>
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="124" cy="44" r="4"></circle>
<text id="2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="120.100962" y="65">2</tspan>
</text>
</g>
</g>
</svg>
<svg width="149" height="187" viewBox="0 0 149 187" xmlns="http://www.w3.org/2000/svg"><title>bezier2.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path d="M24.17 143.348l100.144-99.843" stroke="#CB1E31" stroke-width="2"/><circle stroke="#E8C48E" fill="#fff" cx="24" cy="144" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="20" y="165">1</tspan></text><circle stroke="#E8C48E" fill="#fff" cx="124" cy="44" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="120.101" y="65">2</tspan></text></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 632 B

Before After
Before After

46
5-animation/2-css-transitions/bezier-train-over.svg
View file

@ -1,45 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>bezier-train-over.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="bezier-train-over.svg" sketch:type="MSArtboardGroup">
<g id="Group" sketch:type="MSLayerGroup" transform="translate(0.000000, 76.000000)">
<rect id="Rectangle-233" stroke="#979797" stroke-dasharray="3,2,3,2" sketch:type="MSShapeGroup" x="34" y="13" width="150" height="150"></rect>
<text id="(1,1)" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="bold" fill="#838383">
<tspan x="189" y="9">(1,1)</tspan>
</text>
<text id="(0,0)" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="bold" fill="#838383">
<tspan x="0" y="155">(0,0)</tspan>
</text>
<text id="(0,1)" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="bold" fill="#838383">
<tspan x="0" y="9">(0,1)</tspan>
</text>
<text id="(1,0)" sketch:type="MSTextLayer" font-family="Consolas" font-size="12" font-weight="bold" fill="#838383">
<tspan x="189" y="155">(1,0)</tspan>
</text>
</g>
<path d="M34.5,239.5 L107.5,312.5" id="Line-2" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M34,239 C109,314 109,14 184,89" id="bezier-path" stroke="#CB1E31" stroke-width="2" sketch:type="MSShapeGroup"></path>
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="34" cy="239" r="4"></circle>
<text id="-2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="30" y="261">1</tspan>
</text>
<circle id="Oval-6" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="109" cy="314" r="4"></circle>
<text id="-3" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" 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" sketch:type="MSShapeGroup"></path>
<circle id="Oval-5" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="184" cy="89" r="4"></circle>
<text id="-5" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="188" y="107">4</tspan>
</text>
<circle id="Oval-7" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="109" cy="14" r="4"></circle>
<text id="-4" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="92" y="21">3</tspan>
</text>
</g>
</g>
</svg>
<svg width="225" height="331" viewBox="0 0 225 331" xmlns="http://www.w3.org/2000/svg"><title>bezier-train-over.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path stroke="#979797" stroke-dasharray="3,2,3,2" d="M34 89h150v150H34z"/><text font-family="Consolas" font-size="12" font-weight="bold" fill="#838383" transform="translate(0 76)"><tspan x="189" y="9">(1,1)</tspan></text><text font-family="Consolas" font-size="12" font-weight="bold" fill="#838383" transform="translate(0 76)"><tspan x="0" y="155">(0,0)</tspan></text><text font-family="Consolas" font-size="12" font-weight="bold" fill="#838383" transform="translate(0 76)"><tspan x="0" y="9">(0,1)</tspan></text><text font-family="Consolas" font-size="12" font-weight="bold" fill="#838383" transform="translate(0 76)"><tspan x="189" y="155">(1,0)</tspan></text><path d="M34.5 239.5l73 73" stroke="#E8C48E" stroke-linecap="square"/><path d="M34 239c75 75 75-225 150-150" stroke="#CB1E31" stroke-width="2"/><circle stroke="#E8C48E" fill="#fff" cx="34" cy="239" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="30" y="261">1</tspan></text><circle stroke="#E8C48E" fill="#fff" cx="109" cy="314" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="92" y="320">2</tspan></text><path d="M110.5 15.5l73 73" stroke="#E8C48E" stroke-linecap="square"/><circle stroke="#E8C48E" fill="#fff" cx="184" cy="89" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="188" y="107">4</tspan></text><circle stroke="#E8C48E" fill="#fff" cx="109" cy="14" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="92" y="21">3</tspan></text></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

Before After
Before After

31
5-animation/2-css-transitions/ease-in-out.svg
View file

@ -1,30 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>ease-in-out.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="ease-in-out.svg" sketch:type="MSArtboardGroup">
<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" sketch:type="MSShapeGroup"></path>
<path d="M24.5,143.5 L66.7965736,143.5" id="Line" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M83.5,43.5 L125.796574,43.5" id="Line-2" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="24" cy="144" r="4"></circle>
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="124" cy="43" r="4"></circle>
<circle id="Oval-3" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="82" cy="43" r="4"></circle>
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="66" cy="143" r="4"></circle>
<text id="1" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="20" y="165">1</tspan>
</text>
<text id="2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="62" y="165">2</tspan>
</text>
<text id="3" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="78" y="35">3</tspan>
</text>
<text id="4" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="121" y="35">4</tspan>
</text>
</g>
</g>
</svg>
<svg width="149" height="187" viewBox="0 0 149 187" xmlns="http://www.w3.org/2000/svg"><title>ease-in-out.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path d="M23.688 143.905c42.32 0 58.04-100.414 100.467-100.414" stroke="#CB1E31" stroke-width="2"/><path d="M24.5 143.5h42.297M83.5 43.5h42.297" stroke="#E8C48E" stroke-linecap="square"/><circle stroke="#E8C48E" fill="#fff" cx="24" cy="144" r="4"/><circle stroke="#E8C48E" fill="#fff" cx="124" cy="43" r="4"/><circle stroke="#E8C48E" fill="#fff" cx="82" cy="43" r="4"/><circle stroke="#E8C48E" fill="#fff" cx="66" cy="143" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="20" y="165">1</tspan></text><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="62" y="165">2</tspan></text><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="78" y="35">3</tspan></text><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="121" y="35">4</tspan></text></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

Before After
Before After

29
5-animation/2-css-transitions/ease-in.svg
View file

@ -1,28 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>ease-in</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="ease-in" sketch:type="MSArtboardGroup">
<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" sketch:type="MSShapeGroup"></path>
<path d="M24.5,143.5 L66.7965736,143.5" id="Line" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="24" cy="144" r="4"></circle>
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="124" cy="43" r="4"></circle>
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="66" cy="143" r="4"></circle>
<text id="1" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="20" y="165">1</tspan>
</text>
<text id="2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="62" y="165">2</tspan>
</text>
<text id="3" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="114" y="35">3</tspan>
</text>
<text id="4" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="127" y="35">4</tspan>
</text>
</g>
</g>
</svg>
<svg width="149" height="187" viewBox="0 0 149 187" xmlns="http://www.w3.org/2000/svg"><title>ease-in</title><desc>Created with Sketch.</desc><g fill="none" fill-rule="evenodd"><path d="M23.688 143.905c42.32 0 100.467-100.414 100.467-100.414" stroke="#CB1E31" stroke-width="2"/><path d="M24.5 143.5h42.297" stroke="#E8C48E" stroke-linecap="square"/><circle stroke="#E8C48E" fill="#fff" cx="24" cy="144" r="4"/><circle stroke="#E8C48E" fill="#fff" cx="124" cy="43" r="4"/><circle stroke="#E8C48E" fill="#fff" cx="66" cy="143" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="20" y="165">1</tspan></text><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="62" y="165">2</tspan></text><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="114" y="35">3</tspan></text><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="127" y="35">4</tspan></text></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 1,006 B

Before After
Before After

29
5-animation/2-css-transitions/ease-out.svg
View file

@ -1,28 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>ease-out</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="ease-out" sketch:type="MSArtboardGroup">
<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" sketch:type="MSShapeGroup"></path>
<path d="M83.5,43.5 L123.799999,43.5" id="Line-2" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="24" cy="144" r="4"></circle>
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="124" cy="43" r="4"></circle>
<circle id="Oval-3" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="82" cy="43" r="4"></circle>
<text id="1" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="13" y="165">1</tspan>
</text>
<text id="2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="27" y="165">2</tspan>
</text>
<text id="3" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="79" y="35">3</tspan>
</text>
<text id="4" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="120" y="35">4</tspan>
</text>
</g>
</g>
</svg>
<svg width="149" height="187" viewBox="0 0 149 187" xmlns="http://www.w3.org/2000/svg"><title>ease-out</title><desc>Created with Sketch.</desc><g fill="none" fill-rule="evenodd"><path d="M23.688 143.905S81.885 43.49 124.155 43.49" stroke="#CB1E31" stroke-width="2"/><path d="M83.5 43.5h40.3" stroke="#E8C48E" stroke-linecap="square"/><circle stroke="#E8C48E" fill="#fff" cx="24" cy="144" r="4"/><circle stroke="#E8C48E" fill="#fff" cx="124" cy="43" r="4"/><circle stroke="#E8C48E" fill="#fff" cx="82" cy="43" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="13" y="165">1</tspan></text><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="27" y="165">2</tspan></text><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="79" y="35">3</tspan></text><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="120" y="35">4</tspan></text></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 989 B

Before After
Before After

31
5-animation/2-css-transitions/ease.svg
View file

@ -1,30 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>ease</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="ease" sketch:type="MSArtboardGroup">
<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" sketch:type="MSShapeGroup"></path>
<path d="M24.5,143.5 L48.5,134.5" id="Line" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M50.5,43.5 L123.800003,43.5" id="Line-2" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="24" cy="144" r="4"></circle>
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="124" cy="43" r="4"></circle>
<circle id="Oval-3" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="49" cy="43" r="4"></circle>
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="49" cy="134" r="4"></circle>
<text id="1" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="20" y="165">1</tspan>
</text>
<text id="2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="45" y="156">2</tspan>
</text>
<text id="3" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="45" y="35">3</tspan>
</text>
<text id="4" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="121" y="35">4</tspan>
</text>
</g>
</g>
</svg>
<svg width="149" height="187" viewBox="0 0 149 187" xmlns="http://www.w3.org/2000/svg"><title>ease</title><desc>Created with Sketch.</desc><g fill="none" fill-rule="evenodd"><path d="M23.688 143.905c25.1-9.89 25.1-100.414 100.467-100.414" stroke="#CB1E31" stroke-width="2"/><path d="M24.5 143.5l24-9m2-91h73.3" stroke="#E8C48E" stroke-linecap="square"/><circle stroke="#E8C48E" fill="#fff" cx="24" cy="144" r="4"/><circle stroke="#E8C48E" fill="#fff" cx="124" cy="43" r="4"/><circle stroke="#E8C48E" fill="#fff" cx="49" cy="43" r="4"/><circle stroke="#E8C48E" fill="#fff" cx="49" cy="134" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="20" y="165">1</tspan></text><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="45" y="156">2</tspan></text><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="45" y="35">3</tspan></text><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="121" y="35">4</tspan></text></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 1 KiB

Before After
Before After

31
5-animation/2-css-transitions/train-curve.svg
View file

@ -1,30 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>train-curve.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="train-curve.svg" sketch:type="MSArtboardGroup">
<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" sketch:type="MSShapeGroup"></path>
<path d="M25.5,143.5 L25.5,93.3402552" id="Line" stroke="#E8C48E" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<circle id="Oval-4" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="26" cy="144" r="4"></circle>
<text id="-2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="22" y="165">1</tspan>
</text>
<circle id="Oval-6" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="26" cy="94" r="4"></circle>
<text id="2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" 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" sketch:type="MSShapeGroup"></path>
<circle id="Oval-5" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="126" cy="44" r="4"></circle>
<text id="4" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="122" y="36">4</tspan>
</text>
<circle id="Oval-7" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="76" cy="44" r="4"></circle>
<text id="3" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="72" y="36">3</tspan>
</text>
</g>
</g>
</svg>
<svg width="149" height="187" viewBox="0 0 149 187" xmlns="http://www.w3.org/2000/svg"><title>train-curve.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path d="M26.137 142.908c0-49.408 50.364-99.664 100.358-99.664" stroke="#CB1E31" stroke-width="2"/><path d="M25.5 143.5V93.34" stroke="#E8C48E" stroke-linecap="square"/><circle stroke="#E8C48E" fill="#fff" cx="26" cy="144" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="22" y="165">1</tspan></text><circle stroke="#E8C48E" fill="#fff" cx="26" cy="94" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="22" y="87">2</tspan></text><path d="M75.5 43.5h50.636" stroke="#E8C48E" stroke-linecap="square"/><circle stroke="#E8C48E" fill="#fff" cx="126" cy="44" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="122" y="36">4</tspan></text><circle stroke="#E8C48E" fill="#fff" cx="76" cy="44" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="72" y="36">3</tspan></text></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

Before After
Before After