Resources/features.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg width="316px" height="180px" viewBox="0 0 316 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <clipPath id="screen">
            <rect fill="#FFFFFF" x="0" y="0" width="56" height="98" rx="6"></rect>
        </clipPath>
    </defs>
    <g>
        <g transform="translate(0, 16)">
            <text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="14" fill="#000000" x="32" y="6" text-anchor="middle" alignment-baseline="central">
                Match
            </text>
            <g transform="translate(0, 21)">
                <rect fill="#0C1E31" x="0" y="0" width="64" height="126" rx="11"></rect>
                <circle fill="#FFFFFF" cx="32" cy="118" r="4"></circle>
                <g transform="translate(4, 14)">
                    <rect id="Rectangle-3" fill="#FFFFFF" x="0" y="0" width="56" height="98" rx="6"></rect>
                <path id="matchImage" fill="#3A97FC">
                    <animate 
                    attributeName="d" 
                    values="M10,25.0007413 
                        C10,20.5820539 13.5789089,17 18.0067112,17
                        L38.0075018,17 
                        C42.4216367,17 46,20.5834312 46,25.0007413 
                        L46,44.9992587 
                        C46,49.4179461 42.4165688,53 37.9992587,53 
                        L18.0007413,53 
                        C13.5820539,53 10,49.4165688 10,44.9992587 
                        L10,25.0007413 Z;

                        M0,5.99226572 
                        C0,2.68282874 2.68333378,0 5.99828462,0
                        L50.003058,0 
                        C53.3150776,0 56,2.69179915 56,5.99226572 
                        L56,57 
                        C56,57 56,57 56,57 
                        L0,57 
                        C0,57 0,57 0,57
                        L0,5.99226572 Z;

                        M0,5.99226572 
                        C0,2.68282874 2.68333378,0 5.99828462,0
                        L50.003058,0 
                        C53.3150776,0 56,2.69179915 56,5.99226572 
                        L56,57 
                        C56,57 56,57 56,57 
                        L0,57 
                        C0,57 0,57 0,57
                        L0,5.99226572 Z;

                        M10,25.0007413 
                        C10,20.5820539 13.5789089,17 18.0067112,17
                        L38.0075018,17 
                        C42.4216367,17 46,20.5834312 46,25.0007413 
                        L46,44.9992587 
                        C46,49.4179461 42.4165688,53 37.9992587,53 
                        L18.0007413,53 
                        C13.5820539,53 10,49.4165688 10,44.9992587 
                        L10,25.0007413 Z;
                        
                        M10,25.0007413 
                        C10,20.5820539 13.5789089,17 18.0067112,17
                        L38.0075018,17 
                        C42.4216367,17 46,20.5834312 46,25.0007413 
                        L46,44.9992587 
                        C46,49.4179461 42.4165688,53 37.9992587,53 
                        L18.0007413,53 
                        C13.5820539,53 10,49.4165688 10,44.9992587 
                        L10,25.0007413 Z;" 
                            dur="2s"
                            keyTimes="0;0.15;0.5;0.65;1"
                    repeatCount="indefinite"
                    calcMode="spline"
                    keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
                    fill="freeze" />
                </path>
                <path id="matchButton" fill="#DDDDDD">

                    <animate 
                    attributeName="d" 
                    values="M20,80 
                            C20,75.581722 23.5788202,72 28,72
                            L28,72 
                            C32.418278,72 36,75.5907123 36,80 
                            L36,80 
                            C36,84.418278 32.4092877,88 28,88 
                            L28,88 
                            C23.581722,88 20,84.4092877 20,80 
                            L20,80 Z;

                            M0,86 
                            C0,86 0,86 0,86
                            L56,86 
                            C56,86 56,86 56,86 
                            L56,92 
                            C56,95.3137085 53.3178698,98 50.007019,98 
                            L5.99298096,98 
                            C2.68314897,98 0,95.3069658 0,92 
                            L0,92 Z;

                            M0,86 
                            C0,86 0,86 0,86
                            L56,86 
                            C56,86 56,86 56,86 
                            L56,92 
                            C56,95.3137085 53.3178698,98 50.007019,98 
                            L5.99298096,98 
                            C2.68314897,98 0,95.3069658 0,92 
                            L0,92 Z;

                            M20,80 
                            C20,75.581722 23.5788202,72 28,72
                            L28,72 
                            C32.418278,72 36,75.5907123 36,80 
                            L36,80 
                            C36,84.418278 32.4092877,88 28,88 
                            L28,88 
                            C23.581722,88 20,84.4092877 20,80 
                            L20,80 Z;

                            M20,80 
                            C20,75.581722 23.5788202,72 28,72
                            L28,72 
                            C32.418278,72 36,75.5907123 36,80 
                            L36,80 
                            C36,84.418278 32.4092877,88 28,88 
                            L28,88 
                            C23.581722,88 20,84.4092877 20,80 
                            L20,80 Z;" 
                            dur="2s"
                            keyTimes="0;0.15;0.5;0.65;1"
                    calcMode="spline"
                    keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
                    repeatCount="indefinite"
                    fill="freeze" />
                </path>
                </g>
            </g>
        </g>
        <g id="Scale" transform="translate(84, 16)">
            <text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="14" fill="#000000" x="32" y="6" text-anchor="middle" alignment-baseline="central">
                Scale
            </text>
            <g transform="translate(0, 21)">
                <rect fill="#0C1E31" x="0" y="0" width="64" height="126" rx="11"></rect>
                <circle fill="#FFFFFF" cx="32" cy="118" r="4"></circle>
                <g transform="translate(4, 14)">
                    <rect id="Rectangle-3" fill="#FFFFFF" x="0" y="0" width="56" height="98" rx="6"></rect>

                    <g transform="translate(28, 57)" opacity="0">
                        <rect id="Rectangle-2" fill="#3A97FC" x="-18" y="-18" width="36" height="36" rx="8">
                        </rect>
                        <animateTransform attributeName="transform" 
                            type="scale"
                            additive="sum" 
                            values="0.5 0.5;1 1;1 1;0.5 0.5;0.5 0.5"
                            dur="2s"
                            keyTimes="0;0.15;0.5;0.65;1"
                            calcMode="spline"
                            begin="0.25s"
                            keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
                            repeatCount="indefinite"
                            fill="freeze" />
                        <animate 
                            attributeName="opacity" 
                            values="0;1;1;0;0" 
                            dur="2s"
                            keyTimes="0;0.15;0.5;0.65;1"
                            calcMode="spline"
                            begin="0.25s"
                            keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
                            repeatCount="indefinite"
                            fill="freeze" />
                    </g>
                    <rect id="Rectangle-4" fill="#DDDDDD" x="19" y="38" width="18" height="13" rx="6.5">
                        <animate 
                            attributeName="width" 
                            values="18; 36; 36; 18; 18" 
                            dur="2s"
                            keyTimes="0;0.15;0.5;0.65;1"
                            calcMode="spline"
                            keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
                            begin="0.25s"
                            repeatCount="indefinite"
                            fill="freeze" />
                        <animate 
                            attributeName="x" 
                            values="19;10;10;19;19" 
                            dur="2s"
                            keyTimes="0;0.15;0.5;0.65;1"
                            calcMode="spline"
                            keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
                            begin="0.25s"
                            repeatCount="indefinite"
                            fill="freeze" />
                        <animate 
                            attributeName="y" 
                            values="38;21;21;38;38" 
                            dur="2s"
                            keyTimes="0;0.15;0.5;0.65;1"
                            calcMode="spline"
                            keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
                            begin="0.25s"
                            repeatCount="indefinite"
                            fill="freeze" />
                    </rect>
                </g>
            </g>
        </g>
        <g id="Translate" transform="translate(168, 16)">
            <text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="14" fill="#000000" x="32" y="6" text-anchor="middle" alignment-baseline="central">
                Translate
            </text>
            <g transform="translate(0, 21)">
                <rect fill="#0C1E31" x="0" y="0" width="64" height="126" rx="11"></rect>
                <circle fill="#FFFFFF" cx="32" cy="118" r="4"></circle>
                <g transform="translate(4, 14)" clip-path="url(#screen)">
                    <rect id="Rectangle-3" fill="#FFFFFF" x="0" y="0" width="56" height="98" rx="6"></rect>
                    <rect id="Rectangle-2" fill="#3A97FC" x="-50" y="39" width="36" height="36" rx="8">
                        <animate 
                            attributeName="x" 
                            values="-50; 10; 10; -50; -50;" 
                            dur="2s"
                            keyTimes="0;0.15;0.5;0.65;1"
                            calcMode="spline"
                            keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
                            begin="0.5s"
                            repeatCount="indefinite"
                            fill="freeze" />
                    </rect>
                    <rect id="Rectangle-4" fill="#DDDDDD" x="19" y="38" width="18" height="13" rx="6.5">
                        <animate 
                            attributeName="width" 
                            values="18; 36; 36; 18; 18" 
                            dur="2s"
                            keyTimes="0;0.15;0.5;0.65;1"
                            calcMode="spline"
                            keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
                            begin="0.5s"
                            repeatCount="indefinite"
                            fill="freeze" />
                        <animate 
                            attributeName="x" 
                            values="19;10;10;19;19" 
                            dur="2s"
                            keyTimes="0;0.15;0.5;0.65;1"
                            calcMode="spline"
                            keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
                            begin="0.5s"
                            repeatCount="indefinite"
                            fill="freeze" />
                        <animate 
                            attributeName="y" 
                            values="38;21;21;38;38" 
                            dur="2s"
                            keyTimes="0;0.15;0.5;0.65;1"
                            calcMode="spline"
                            keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
                            begin="0.5s"
                            repeatCount="indefinite"
                            fill="freeze" />
                    </rect>
                </g>
            </g>
        </g>
        <g id="Rotate" transform="translate(252, 16)">
            <text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="14" fill="#000000" x="32" y="6" text-anchor="middle" alignment-baseline="central">
                Rotate
            </text>
            <g id="Phone" transform="translate(0, 21)">
                <rect fill="#0C1E31" x="0" y="0" width="64" height="126" rx="11"></rect>
                <circle id="Home" fill="#FFFFFF" cx="32" cy="118" r="4"></circle>
                <g id="Screen" transform="translate(4, 14)"  clip-path="url(#screen)">
                    <rect id="Rectangle-3" fill="#FFFFFF" x="0" y="0" width="56" height="98" rx="6"></rect>
                    <rect id="rect" fill="#3A97FC" x="-50" y="39" width="36" height="36" rx="8">
                        <animate 
                            attributeName="x" 
                            values="-50; 10; 10; -50; -50;" 
                            dur="2s"
                            keyTimes="0;0.15;0.5;0.65;1"
                            calcMode="spline"
                            keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
                            begin="0.75s"
                            repeatCount="indefinite"
                            fill="freeze" />
                        <animateTransform 
                            attributeName="transform"
                            type="rotate"
                            values="0 28 57;-180 28 57;-180 28 57;0 28 57;0 28 57;"
                            dur="2s"
                            keyTimes="0;0.15;0.5;0.65;1"
                            begin="0.75s"
                            calcMode="spline"
                            keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
                            repeatCount="indefinite"
                            fill="freeze" 
                          />
                    </rect>
                    <rect id="Rectangle-4" fill="#DDDDDD" x="19" y="38" width="18" height="13" rx="6.5">
                        <animate 
                            attributeName="width" 
                            values="18; 36; 36; 18; 18" 
                            dur="2s"
                            keyTimes="0;0.15;0.5;0.65;1"
                            calcMode="spline"
                            keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
                            begin="0.75s"
                            repeatCount="indefinite"
                            fill="freeze" />
                        <animate 
                            attributeName="x" 
                            values="19;10;10;19;19" 
                            dur="2s"
                            keyTimes="0;0.15;0.5;0.65;1"
                            calcMode="spline"
                            keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
                            begin="0.75s"
                            repeatCount="indefinite"
                            fill="freeze" />
                        <animate 
                            attributeName="y" 
                            values="38;21;21;38;38" 
                            dur="2s"
                            keyTimes="0;0.15;0.5;0.65;1"
                            calcMode="spline"
                            keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
                            begin="0.75s"
                            repeatCount="indefinite"
                            fill="freeze" />
                    </rect>
                </g>
            </g>
        </g>
    </g>
</svg>