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

images to svg

Browse source
This commit is contained in:
Ilya Kantor 2019-07-28 15:42:37 +03:00
parent a31e881856
commit 3ba28aa104
734 changed files with 11682 additions and 245 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
7-animation/2-css-animations/2-animate-logo-bezier-css/bezier-up.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 6.3 KiB

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

@ -0,0 +1,30 @@
<?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>
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
7-animation/2-css-animations/2-animate-logo-bezier-css/bezier-up@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 15 KiB

2
7-animation/2-css-animations/2-animate-logo-bezier-css/solution.md
View file

@ -4,4 +4,4 @@ For instance, we can take both control points with `y>1`, like: `cubic-bezier(0.
The graph:
![](bezier-up.png)
![](bezier-up.svg)

8
7-animation/2-css-animations/article.md
View file

@ -154,7 +154,7 @@ The simplest variant is when the animation goes uniformly, with the same linear
Here's how that curve looks:
![](bezier-linear.png)
![](bezier-linear.svg)
...As we can see, it's just a straight line. As the time (`x`) passes, the completion (`y`) of the animation steadily goes from `0` to `1`.
@ -178,7 +178,7 @@ We can use another Bezier curve: `cubic-bezier(0.0, 0.5, 0.5 ,1.0)`.
The graph:
![](train-curve.png)
![](train-curve.svg)
As we can see, the process starts fast: the curve soars up high, and then slower and slower.
@ -204,7 +204,7 @@ Other names are shorthands for the following `cubic-bezier`:
| <code>ease</code><sup>*</sup> | <code>ease-in</code> | <code>ease-out</code> | <code>ease-in-out</code> |
|-------------------------------|----------------------|-----------------------|--------------------------|
| <code>(0.25, 0.1, 0.25, 1.0)</code> | <code>(0.42, 0, 1.0, 1.0)</code> | <code>(0, 0, 0.58, 1.0)</code> | <code>(0.42, 0, 0.58, 1.0)</code> |
| ![ease, figure](ease.png) | ![ease-in, figure](ease-in.png) | ![ease-out, figure](ease-out.png) | ![ease-in-out, figure](ease-in-out.png) |
| ![ease, figure](ease.svg) | ![ease-in, figure](ease-in.svg) | ![ease-out, figure](ease-out.svg) | ![ease-in-out, figure](ease-in-out.svg) |
`*` -- by default, if there's no timing function, `ease` is used.
@ -246,7 +246,7 @@ But if you click the train, you'll see that:
Why it happens -- pretty obvious if we look at the graph of the given Bezier curve:
![](bezier-train-over.png)
![](bezier-train-over.svg)
We moved the `y` coordinate of the 2nd point below zero, and for the 3rd point we made put it over `1`, so the curve goes out of the "regular" quadrant. The `y` is out of the "standard" range `0..1`.

BIN
7-animation/2-css-animations/bezier-linear.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.8 KiB

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

@ -0,0 +1,23 @@
<?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>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
7-animation/2-css-animations/bezier-linear@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 6.8 KiB

BIN
7-animation/2-css-animations/bezier-train-over.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 11 KiB

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

@ -0,0 +1,50 @@
<?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>
Side by side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
7-animation/2-css-animations/bezier-train-over@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 26 KiB

BIN
7-animation/2-css-animations/ease-in-out.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 4.1 KiB

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

@ -0,0 +1,29 @@
<?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>
Side by side

After

Width:  |  Height:  |  Size: 2 KiB

BIN
7-animation/2-css-animations/ease-in-out@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 9.6 KiB

BIN
7-animation/2-css-animations/ease-in.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 4.2 KiB

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

@ -0,0 +1,27 @@
<?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>
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
7-animation/2-css-animations/ease-in@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 9.7 KiB

BIN
7-animation/2-css-animations/ease-out.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 4.1 KiB

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

@ -0,0 +1,27 @@
<?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>
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
7-animation/2-css-animations/ease-out@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 9.4 KiB

BIN
7-animation/2-css-animations/ease.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 4.2 KiB

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

@ -0,0 +1,29 @@
<?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>
Side by side

After

Width:  |  Height:  |  Size: 2 KiB

BIN
7-animation/2-css-animations/ease@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 9.7 KiB

BIN
7-animation/2-css-animations/train-curve.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 4 KiB

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

@ -0,0 +1,29 @@
<?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>
Side by side

After

Width:  |  Height:  |  Size: 2 KiB

BIN
7-animation/2-css-animations/train-curve@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 9.5 KiB