chrome/android/java/res/drawable/signin_header_animation.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright 2018 The Chromium Authors. All rights reserved.
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->
<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    xmlns:tools="http://schemas.android.com/tools"
    tools:targetApi="21">
    <aapt:attr name="android:drawable">
        <vector
            android:width="360dp"
            android:height="88dp"
            android:viewportWidth="360"
            android:viewportHeight="88">
            <!-- Background fill -->
            <path
                android:fillColor="@color/signin_header_animation_background"
                android:pathData="M0,0h360v88h-360z"/>
            <!-- White and blue curves on the left side -->
            <path
                android:fillColor="@color/default_icon_color_blue"
                android:pathData="M52.768,61.116L55.813,58C62.049,64.382 68.703,67.61 75.591,67.594C86.411,67.567 94.368,59.475 94.446,59.393L97.514,62.485C97.143,62.871 88.283,71.945 75.651,72C67.558,72.035 59.859,68.373 52.768,61.116Z"/>
            <path
                android:fillColor="@color/signin_header_animation_line_light"
                android:pathData="M15.018,58.706L12,55.647C12.213,55.432 17.293,50.349 25.233,48.071C32.621,45.951 43.914,45.943 55.751,57.941L52.734,61C44.405,52.557 35.544,49.608 26.395,52.233C19.513,54.206 15.062,58.661 15.018,58.706Z"/>
            <!-- Cloud 1 -->
            <group
                android:name="cloud1_animation_group"
                android:translateX="0">

                <path
                    android:fillColor="@color/signin_header_animation_line_dark"
                    android:pathData="M88.61,42L73.695,42L73.695,41.765C73.695,37.483 77.04,34 81.152,34C85.264,34 88.609,37.483 88.609,41.765L88.609,42L88.61,42ZM74.15,41.529L88.155,41.529C88.035,37.616 84.94,34.47 81.153,34.47C77.365,34.47 74.271,37.616 74.15,41.529Z"/>
            </group>
            <!-- Cloud 3 -->
            <group
                android:name="cloud3_animation_group"
                android:translateX="0">

                <path
                    android:fillColor="@color/signin_header_animation_line_light"
                    android:pathData="M210.791,58.542C217.505,58.542 223,63.839 223.286,70.458L206.441,70.458L197.74,70.458L189.602,70.458C189.882,66.229 193.425,62.875 197.74,62.875C198.654,62.875 199.567,63.033 200.456,63.346L200.819,63.473L201.061,63.176C203.45,60.231 206.997,58.542 210.791,58.542ZM210.791,58C206.688,58 203.03,59.887 200.637,62.836C199.73,62.516 198.758,62.333 197.74,62.333C192.935,62.333 189.04,66.213 189.04,71C191.58,71 194.569,71 197.74,71C200.557,71 203.517,71 206.441,71C211.895,71 217.92,71 223.842,71C223.842,63.821 217.999,58 210.791,58Z"/>
            </group>
            <!-- Laptop screen -->
            <path
                android:fillColor="@color/signin_header_animation_laptop_screen"
                android:pathData="M190.741,75.661L116.191,75.661L116.191,26.757C116.191,24.369 118.145,22.415 120.533,22.415L186.399,22.415C188.787,22.415 190.741,24.369 190.741,26.757L190.741,75.661Z"/>
            <path
                android:fillColor="@color/signin_header_animation_line_dark"
                android:pathData="M187.191,22.859C188.904,22.859 190.297,24.252 190.297,25.965L190.297,75.217L116.634,75.217L116.634,25.965C116.634,24.252 118.028,22.859 119.741,22.859L187.191,22.859ZM187.191,22.415L119.741,22.415C117.788,22.415 116.191,24.012 116.191,25.965L116.191,75.661L190.741,75.661L190.741,25.965C190.741,24.012 189.144,22.415 187.191,22.415Z"/>
            <!-- Laptop keyboard -->
            <path
                android:fillColor="@color/signin_header_animation_line_dark"
                android:pathData="M105.514,79h95.458v1h-95.458z"/>
            <!-- Cloud 2 -->
            <group
                android:name="cloud2_animation_group"
                android:translateX="0">

                <path
                    android:fillColor="@color/signin_header_animation_background"
                    android:pathData="M112.036,40.982C108.709,40.982 105.743,42.47 103.803,44.797C103.067,44.544 102.278,44.4 101.453,44.4C97.557,44.4 94.398,47.461 94.398,51.237C96.459,51.237 98.882,51.237 101.453,51.237C103.737,51.237 106.138,51.237 108.508,51.237C112.931,51.237 117.816,51.237 122.618,51.237C122.618,45.573 117.881,40.982 112.036,40.982Z"/>
                <path
                    android:fillColor="@color/signin_header_animation_line_dark"
                    android:pathData="M122.839,51.45L94.178,51.45L94.178,51.236C94.178,47.348 97.442,44.187 101.453,44.187C102.219,44.187 102.983,44.308 103.729,44.546C105.791,42.143 108.81,40.768 112.035,40.768C117.992,40.768 122.838,45.464 122.838,51.236L122.838,51.45L122.839,51.45ZM94.622,51.023L122.396,51.023C122.279,45.585 117.676,41.196 112.036,41.196C108.892,41.196 105.954,42.557 103.974,44.931L103.876,45.049L103.73,44.999C102.985,44.744 102.219,44.615 101.454,44.615C97.759,44.614 94.739,47.47 94.622,51.023Z"/>
            </group>
            <!-- Cloud 4 -->
            <group
                android:name="cloud4_animation_group"
                android:translateX="0">

                <path
                    android:fillColor="@color/signin_header_animation_line_light"
                    android:pathData="M244.723,50C239.752,50 234.64,50 230.802,50C230.802,46.134 233.918,43 237.763,43C241.607,43 244.723,46.134 244.723,50Z"/>
            </group>
            <!-- Mobile phone external edge -->
            <path
                android:fillColor="@color/signin_header_animation_line_dark"
                android:pathData="M255.206,44L254.667,44L254.667,15.5C254.667,11.916 257.627,9 261.266,9L280.52,9L280.52,9.531L261.266,9.531C257.924,9.531 255.206,12.209 255.206,15.5L255.206,44M270.576,78.469L261.182,78.469C257.883,78.469 255.199,75.792 255.199,72.5L255.199,44L254.667,44L254.667,72.5C254.667,76.084 257.59,79 261.182,79L270.576,79L270.576,78.469M288.475,9L288.475,9.579C291.026,10.421 292.861,12.681 292.861,15.339L292.861,45L293.446,45L293.446,15.339C293.447,12.378 291.356,9.864 288.475,9Z"/>
            <path
                android:fillColor="@color/default_red"
                android:pathData="M291.92,67L291.92,72.514C291.92,75.798 289.236,78.47 285.937,78.47L276.542,78.47L276.542,79L285.936,79C289.528,79 292.452,76.09 292.452,72.514L292.452,67L291.92,67Z"/>
            <!-- Mobile phone internal edge -->
            <path
                android:fillColor="@color/signin_header_animation_line_light"
                android:pathData="M285.175,76L261.944,76C259.576,76 257.65,74.079 257.65,71.718L257.65,16.282C257.65,13.921 259.576,12 261.944,12L285.175,12C287.542,12 289.469,13.921 289.469,16.282L289.469,71.718C289.469,74.079 287.542,76 285.175,76ZM261.945,12.538C259.874,12.538 258.19,14.218 258.19,16.282L258.19,71.718C258.19,73.782 259.874,75.462 261.945,75.462L285.175,75.462C287.246,75.462 288.93,73.782 288.93,71.718L288.93,16.282C288.93,14.218 287.246,12.538 285.175,12.538L261.945,12.538Z"/>
            <!-- White and yellow curves on the right side -->
            <path
                android:fillColor="@color/signin_header_animation_line_light"
                android:pathData="M226.156,51L221.853,51C221.853,50.693 221.9,43.393 225.959,36.027C229.737,29.172 237.784,21 254.667,21L254.667,25.363C242.788,25.363 234.394,29.667 229.716,38.155C226.196,44.54 226.156,50.937 226.156,51Z"/>
            <path
                android:fillColor="#F8AB00"
                android:pathData="M254.667,25L254.667,20.652C263.547,20.652 270.531,18.152 275.424,13.221C283.11,5.476 283.146,-5.853 283.145,-5.967L287.48,-6C287.484,-5.466 287.488,7.193 278.531,16.253C272.794,22.057 264.765,25 254.667,25Z"/>
            <!-- Light grey circle -->
            <path
                android:fillColor="@color/signin_header_animation_line_light"
                android:pathData="M325.763,31.062C334.758,31.062 342.076,38.212 342.076,47C342.076,55.788 334.757,62.938 325.763,62.938C316.768,62.938 309.449,55.788 309.449,47C309.449,38.212 316.767,31.062 325.763,31.062ZM325.763,30C316.152,30 308.362,37.611 308.362,47C308.362,56.389 316.152,64 325.763,64C335.373,64 343.164,56.389 343.164,47C343.164,37.611 335.373,30 325.763,30Z"/>
            <!-- Green circle -->
            <path
                android:fillColor="@color/default_green"
                android:pathData="M280.52,47c0,9.7 7.7,17.4 17.4,17.4s17.4,-7.7 17.4,-17.4s-7.7,-17.4 -17.4,-17.4s-17.4,7.7 -17.4,17.4"/>
            <!-- Sync arrows -->
            <group
                android:name="sync_arrows_rotation_group"
                android:pivotX="297.92"
                android:pivotY="47"
                android:rotation="0">

                <path
                    android:fillColor="@color/default_icon_color_inverse"
                    android:pathData="M297.722,54.149L297.722,51.997L297.981,51.997L297.981,53.479L299.925,51.391L297.981,49.303L297.981,50.785L297.722,50.785L297.722,48.632L300.291,51.391L297.722,54.149ZM297.98,45.667L295.412,42.909L297.98,40.15L297.98,42.303L297.721,42.303L297.721,40.821L295.777,42.909L297.721,44.997L297.721,43.515L297.98,43.515L297.98,45.667ZM301.395,49.392L301.173,49.251C301.521,48.617 301.705,47.89 301.705,47.15C301.705,44.868 299.976,43.011 297.852,43.011L297.852,42.733C300.119,42.733 301.964,44.715 301.964,47.149C301.963,47.939 301.767,48.715 301.395,49.392ZM297.851,51.566C295.584,51.566 293.739,49.585 293.739,47.149C293.739,46.359 293.936,45.583 294.307,44.907L294.529,45.048C294.181,45.682 293.997,46.408 293.997,47.148C293.997,49.431 295.726,51.287 297.851,51.287L297.851,51.566Z"/>
            </group>
            <!-- Blue dot -->
            <group
                android:name="blue_dot_rotation_group"
                android:pivotX="325.763"
                android:pivotY="47"
                android:rotation="-120">

                <path
                    android:fillColor="@color/default_icon_color_blue"
                    android:pathData="M334,47c0,1.1 0.9,2 2,2s2,-0.9 2,-2s-0.9,-2 -2,-2s-2,0.9 -2,2"/>
            </group>

        </vector>
    </aapt:attr>
    <!-- Each animation here has a period of 10.45 seconds. Animation is restarted from the code. -->
    <target android:name="cloud1_animation_group">
        <aapt:attr name="android:animation">
            <set android:ordering="sequentially">
                <objectAnimator
                    android:duration="3900"
                    android:interpolator="@anim/fast_out_slow_in_interpolator"
                    android:propertyName="translateX"
                    android:valueFrom="0"
                    android:valueTo="-3.645"/>
                <objectAnimator
                    android:duration="6550"
                    android:interpolator="@anim/fast_out_slow_in_interpolator"
                    android:propertyName="translateX"
                    android:valueFrom="-3.645"
                    android:valueTo="0"/>
            </set>
        </aapt:attr>
    </target>
    <target android:name="cloud2_animation_group">
        <aapt:attr name="android:animation">
            <set android:ordering="sequentially">
                <objectAnimator
                    android:duration="4650"
                    android:interpolator="@anim/fast_out_slow_in_interpolator"
                    android:propertyName="translateX"
                    android:valueFrom="0"
                    android:valueTo="-2.43"/>
                <objectAnimator
                    android:duration="5800"
                    android:interpolator="@anim/fast_out_slow_in_interpolator"
                    android:propertyName="translateX"
                    android:valueFrom="-2.43"
                    android:valueTo="0"/>
            </set>
        </aapt:attr>
    </target>
    <target android:name="cloud3_animation_group">
        <aapt:attr name="android:animation">
            <set android:ordering="sequentially">
                <objectAnimator
                    android:duration="6150"
                    android:interpolator="@anim/fast_out_slow_in_interpolator"
                    android:propertyName="translateX"
                    android:valueFrom="0"
                    android:valueTo="-5.67"/>
                <objectAnimator
                    android:duration="4300"
                    android:interpolator="@anim/fast_out_slow_in_interpolator"
                    android:propertyName="translateX"
                    android:valueFrom="-5.67"
                    android:valueTo="0"/>
            </set>
        </aapt:attr>
    </target>
    <target android:name="cloud4_animation_group">
        <aapt:attr name="android:animation">
            <set android:ordering="sequentially">
                <objectAnimator
                    android:duration="5550"
                    android:interpolator="@anim/fast_out_slow_in_interpolator"
                    android:propertyName="translateX"
                    android:valueFrom="0"
                    android:valueTo="5.67"/>
                <objectAnimator
                    android:duration="4900"
                    android:interpolator="@anim/fast_out_slow_in_interpolator"
                    android:propertyName="translateX"
                    android:valueFrom="5.67"
                    android:valueTo="0"/>
            </set>
        </aapt:attr>
    </target>
    <target android:name="sync_arrows_rotation_group">
        <aapt:attr name="android:animation">
            <set android:ordering="sequentially">
                <objectAnimator
                    android:duration="700"
                    android:interpolator="@anim/fast_out_slow_in_interpolator"
                    android:propertyName="rotation"
                    android:valueFrom="0"
                    android:valueTo="-360"/>
                <objectAnimator
                    android:duration="700"
                    android:interpolator="@anim/fast_out_slow_in_interpolator"
                    android:propertyName="rotation"
                    android:startOffset="1900"
                    android:valueFrom="0"
                    android:valueTo="-360"/>
                <objectAnimator
                    android:duration="700"
                    android:interpolator="@anim/fast_out_slow_in_interpolator"
                    android:propertyName="rotation"
                    android:startOffset="1900"
                    android:valueFrom="0"
                    android:valueTo="-360"/>
                <objectAnimator
                    android:duration="700"
                    android:interpolator="@anim/fast_out_slow_in_interpolator"
                    android:propertyName="rotation"
                    android:startOffset="1900"
                    android:valueFrom="0"
                    android:valueTo="-360"/>
            </set>
        </aapt:attr>
    </target>
    <target android:name="blue_dot_rotation_group">
        <aapt:attr name="android:animation">
            <set android:ordering="sequentially">
                <objectAnimator
                    android:duration="700"
                    android:interpolator="@anim/fast_out_slow_in_interpolator"
                    android:propertyName="rotation"
                    android:valueFrom="-120"
                    android:valueTo="120"/>
                <objectAnimator
                    android:duration="1900"
                    android:propertyName="rotation"
                    android:valueFrom="120"
                    android:valueTo="120"/>
                <objectAnimator
                    android:duration="700"
                    android:interpolator="@anim/fast_out_slow_in_interpolator"
                    android:propertyName="rotation"
                    android:valueFrom="120"
                    android:valueTo="-120"/>
                <objectAnimator
                    android:duration="1900"
                    android:propertyName="rotation"
                    android:valueFrom="-120"
                    android:valueTo="-120"/>
                <objectAnimator
                    android:duration="700"
                    android:interpolator="@anim/fast_out_slow_in_interpolator"
                    android:propertyName="rotation"
                    android:valueFrom="-120"
                    android:valueTo="120"/>
                <objectAnimator
                    android:duration="1900"
                    android:propertyName="rotation"
                    android:valueFrom="120"
                    android:valueTo="120"/>
                <objectAnimator
                    android:duration="700"
                    android:interpolator="@anim/fast_out_slow_in_interpolator"
                    android:propertyName="rotation"
                    android:valueFrom="120"
                    android:valueTo="-120"/>
            </set>
        </aapt:attr>
    </target>
</animated-vector>