Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- code property https://codepen.io/dghez -->

<div class="iphone-container">
	<img src="https://s17.postimg.org/yjvr0uuv3/iphone.png" alt="">

	<svg width="414px" height="736px" viewBox="0 0 414 736" version="1.1"  style="background: #030F43;">
	    <defs>
        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1">
            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
            <feGaussianBlur stdDeviation="6.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0.996078431   0 0 0 0 0.968627451   0 0 0 0 0.882352941  0 0 0 0.161863111 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
            <feMerge>
                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
                <feMergeNode in="SourceGraphic"></feMergeNode>
            </feMerge>
        </filter>
        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
            <feGaussianBlur stdDeviation="6.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0.996078431   0 0 0 0 0.968627451   0 0 0 0 0.882352941  0 0 0 0.161863111 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
            <feMerge>
                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
                <feMergeNode in="SourceGraphic"></feMergeNode>
            </feMerge>
        </filter>
        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-3">
            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
            <feGaussianBlur stdDeviation="6.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0.996078431   0 0 0 0 0.968627451   0 0 0 0 0.882352941  0 0 0 0.161863111 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
            <feMerge>
                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
                <feMergeNode in="SourceGraphic"></feMergeNode>
            </feMerge>
        </filter>
        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-4">
            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
            <feGaussianBlur stdDeviation="6.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0.996078431   0 0 0 0 0.968627451   0 0 0 0 0.882352941  0 0 0 0.161863111 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
            <feMerge>
                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
                <feMergeNode in="SourceGraphic"></feMergeNode>
            </feMerge>
        </filter>
        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-5">
            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
            <feGaussianBlur stdDeviation="6.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0.996078431   0 0 0 0 0.968627451   0 0 0 0 0.882352941  0 0 0 0.161863111 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
            <feMerge>
                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
                <feMergeNode in="SourceGraphic"></feMergeNode>
            </feMerge>
        </filter>
        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-6">
            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
            <feGaussianBlur stdDeviation="6.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0.996078431   0 0 0 0 0.968627451   0 0 0 0 0.882352941  0 0 0 0.161863111 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
            <feMerge>
                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
                <feMergeNode in="SourceGraphic"></feMergeNode>
            </feMerge>
        </filter>
        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-7">
            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
            <feGaussianBlur stdDeviation="6.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0.996078431   0 0 0 0 0.968627451   0 0 0 0 0.882352941  0 0 0 0.161863111 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
            <feMerge>
                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
                <feMergeNode in="SourceGraphic"></feMergeNode>
            </feMerge>
        </filter>
        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-8">
            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
            <feGaussianBlur stdDeviation="6.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0.996078431   0 0 0 0 0.968627451   0 0 0 0 0.882352941  0 0 0 0.161863111 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
            <feMerge>
                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
                <feMergeNode in="SourceGraphic"></feMergeNode>
            </feMerge>
        </filter>
        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-9">
            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
            <feGaussianBlur stdDeviation="6.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0.996078431   0 0 0 0 0.968627451   0 0 0 0 0.882352941  0 0 0 0.161863111 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
            <feMerge>
                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
                <feMergeNode in="SourceGraphic"></feMergeNode>
            </feMerge>
        </filter>
        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-10">
            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
            <feGaussianBlur stdDeviation="6.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0.996078431   0 0 0 0 0.968627451   0 0 0 0 0.882352941  0 0 0 0.161863111 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
            <feMerge>
                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
                <feMergeNode in="SourceGraphic"></feMergeNode>
            </feMerge>
        </filter>
        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-11">
            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
            <feGaussianBlur stdDeviation="6.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0.996078431   0 0 0 0 0.968627451   0 0 0 0 0.882352941  0 0 0 0.161863111 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
            <feMerge>
                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
                <feMergeNode in="SourceGraphic"></feMergeNode>
            </feMerge>
        </filter>
        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-12">
            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
            <feGaussianBlur stdDeviation="6.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0.996078431   0 0 0 0 0.968627451   0 0 0 0 0.882352941  0 0 0 0.161863111 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
            <feMerge>
                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
                <feMergeNode in="SourceGraphic"></feMergeNode>
            </feMerge>
        </filter>
        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-13">
            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
            <feGaussianBlur stdDeviation="6.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0.996078431   0 0 0 0 0.968627451   0 0 0 0 0.882352941  0 0 0 0.161863111 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
            <feMerge>
                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
                <feMergeNode in="SourceGraphic"></feMergeNode>
            </feMerge>
        </filter>
    </defs>
	    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
	            <circle class="oval oval--8" fill="#F299A0" sketch:type="MSShapeGroup" cx="363" cy="0" r="365"></circle>
	            <circle class="oval oval--7" fill="#DF6E9D" sketch:type="MSShapeGroup" cx="363" cy="0" r="321.575563"></circle>
	            <circle class="oval oval--6" fill="#BE489C" sketch:type="MSShapeGroup" cx="362.413183" cy="0.41318328" r="281.085209"></circle>
	            <circle class="oval oval--5" fill="#A3399C" sketch:type="MSShapeGroup" cx="361.826367" cy="-1.17363344" r="242.942122"></circle>
	            <circle class="oval oval--4" fill="#6D269E" sketch:type="MSShapeGroup" cx="361.826367" cy="-1.17363344" r="195.996785"></circle>
	            <circle class="oval oval--3" fill="#61229E" sketch:type="MSShapeGroup" cx="361.826367" cy="-1.17363344" r="158.440514"></circle>
	            <circle class="oval oval--2" fill="#521290" sketch:type="MSShapeGroup" cx="362.413183" cy="-1.76045016" r="119.123794"></circle>
	            <circle class="oval oval--1" fill="#43087C" sketch:type="MSShapeGroup" cx="362.413183" cy="-1.76045016" r="83.3325965"></circle>
	            <path d="M73.3243047,236.217498 C70.1686047,236.217498 67.6109651,233.668534 67.6109651,230.523538 L67.6109651,224.668016 C67.6109651,223.746677 66.8617465,223 65.9361767,223 C65.0117023,223 64.2624837,223.746677 64.2624837,224.668016 L64.2624837,230.523538 C64.2624837,233.668534 61.7037488,236.217498 58.5480488,236.217498 L52.673693,236.217498 C51.7492186,236.217498 51,236.964175 51,237.886606 C51,238.807944 51.7492186,239.554622 52.673693,239.554622 L58.5480488,239.554622 C61.7037488,239.554622 64.2624837,242.104677 64.2624837,245.249673 L64.2624837,251.103012 C64.2624837,252.025442 65.0117023,252.77212 65.9361767,252.77212 C66.8617465,252.77212 67.6109651,252.025442 67.6109651,251.103012 L67.6109651,245.249673 C67.6109651,242.104677 70.1686047,239.554622 73.3243047,239.554622 L79.1986605,239.554622 C80.1231349,239.554622 80.8734488,238.807944 80.8734488,237.886606 C80.8734488,236.964175 80.1231349,236.217498 79.1986605,236.217498 L73.3243047,236.217498 Z" class="star" fill="#FEF7E1" filter="url(#filter-2)" sketch:type="MSShapeGroup"></path>
	            <path d="M210.880281,149.219592 L206.934068,149.219592 C204.814165,149.219592 203.096021,147.507275 203.096021,145.394563 L203.096021,141.461003 C203.096021,140.842075 202.592719,140.34048 201.970949,140.34048 C201.349916,140.34048 200.846614,140.842075 200.846614,141.461003 L200.846614,145.394563 C200.846614,147.507275 199.127734,149.219592 197.007831,149.219592 L193.061618,149.219592 C192.440584,149.219592 191.937282,149.721187 191.937282,150.340847 C191.937282,150.959774 192.440584,151.461369 193.061618,151.461369 L197.007831,151.461369 C199.127734,151.461369 200.846614,153.174419 200.846614,155.287131 L200.846614,159.219225 C200.846614,159.838885 201.349916,160.34048 201.970949,160.34048 C202.592719,160.34048 203.096021,159.838885 203.096021,159.219225 L203.096021,155.287131 C203.096021,153.174419 204.814165,151.461369 206.934068,151.461369 L210.880281,151.461369 C211.501314,151.461369 212.005352,150.959774 212.005352,150.340847 C212.005352,149.721187 211.501314,149.219592 210.880281,149.219592" class="star" fill="#FEF7E1" filter="url(#filter-3)" sketch:type="MSShapeGroup"></path>
	            <path d="M317.86296,229.711119 L310.587229,229.711119 C306.678712,229.711119 303.510927,226.554079 303.510927,222.658819 L303.510927,215.406415 C303.510927,214.265284 302.582976,213.34048 301.436604,213.34048 C300.291589,213.34048 299.363638,214.265284 299.363638,215.406415 L299.363638,222.658819 C299.363638,226.554079 296.194496,229.711119 292.285979,229.711119 L285.010248,229.711119 C283.865233,229.711119 282.937282,230.635922 282.937282,231.778405 C282.937282,232.919537 283.865233,233.84434 285.010248,233.84434 L292.285979,233.84434 C296.194496,233.84434 299.363638,237.002732 299.363638,240.897992 L299.363638,248.147692 C299.363638,249.290175 300.291589,250.214978 301.436604,250.214978 C302.582976,250.214978 303.510927,249.290175 303.510927,248.147692 L303.510927,240.897992 C303.510927,237.002732 306.678712,233.84434 310.587229,233.84434 L317.86296,233.84434 C319.007975,233.84434 319.937282,232.919537 319.937282,231.778405 C319.937282,230.635922 319.007975,229.711119 317.86296,229.711119" class="star" fill="#FEF7E1" filter="url(#filter-4)" sketch:type="MSShapeGroup"></path>
	            <path d="M135.130575,29.1411657 L131.398721,29.1411657 C128.953903,29.1411657 126.971321,27.1653092 126.971321,24.7287833 L126.971321,21.0084964 C126.971321,20.0871578 126.222103,19.3404805 125.296533,19.3404805 C124.372059,19.3404805 123.62284,20.0871578 123.62284,21.0084964 L123.62284,24.7287833 C123.62284,27.1653092 121.640259,29.1411657 119.194345,29.1411657 L115.462491,29.1411657 C114.536921,29.1411657 113.787703,29.887843 113.787703,30.8102733 C113.787703,31.731612 114.536921,32.4782892 115.462491,32.4782892 L119.194345,32.4782892 C121.640259,32.4782892 123.62284,34.4541458 123.62284,36.8906717 L123.62284,40.6098669 C123.62284,41.5322972 124.372059,42.2789745 125.296533,42.2789745 C126.222103,42.2789745 126.971321,41.5322972 126.971321,40.6098669 L126.971321,36.8906717 C126.971321,34.4541458 128.953903,32.4782892 131.398721,32.4782892 L135.130575,32.4782892 C136.055049,32.4782892 136.805363,31.731612 136.805363,30.8102733 C136.805363,29.887843 136.055049,29.1411657 135.130575,29.1411657" class="star" fill="#FEF7E1" filter="url(#filter-5)" sketch:type="MSShapeGroup"></path>
	            <path d="M404.142528,204.002726 L400.410674,204.002726 C397.965856,204.002726 395.983274,202.026869 395.983274,199.590343 L395.983274,195.870057 C395.983274,194.948718 395.234056,194.202041 394.308486,194.202041 C393.384012,194.202041 392.634793,194.948718 392.634793,195.870057 L392.634793,199.590343 C392.634793,202.026869 390.652212,204.002726 388.206298,204.002726 L384.474444,204.002726 C383.548874,204.002726 382.799656,204.749403 382.799656,205.671833 C382.799656,206.593172 383.548874,207.339849 384.474444,207.339849 L388.206298,207.339849 C390.652212,207.339849 392.634793,209.315706 392.634793,211.752232 L392.634793,215.471427 C392.634793,216.393857 393.384012,217.140535 394.308486,217.140535 C395.234056,217.140535 395.983274,216.393857 395.983274,215.471427 L395.983274,211.752232 C395.983274,209.315706 397.965856,207.339849 400.410674,207.339849 L404.142528,207.339849 C405.067002,207.339849 405.817316,206.593172 405.817316,205.671833 C405.817316,204.749403 405.067002,204.002726 404.142528,204.002726" class="star" fill="#FEF7E1" filter="url(#filter-6)" sketch:type="MSShapeGroup"></path>
	            <path d="M23.2007621,294.417578 L21.3090947,294.417578 C20.371476,294.417578 19.6123993,293.661076 19.6123993,292.726637 L19.6123993,290.840295 C19.6123993,289.918956 18.8631807,289.172279 17.9376109,289.172279 C17.0131365,289.172279 16.2639179,289.918956 16.2639179,290.840295 L16.2639179,292.726637 C16.2639179,293.661076 15.5037458,294.417578 14.5672226,294.417578 L12.6744598,294.417578 C11.7499853,294.417578 10.9996714,295.164255 10.9996714,296.086685 C10.9996714,297.008024 11.7499853,297.754701 12.6744598,297.754701 L14.5672226,297.754701 C15.5037458,297.754701 16.2639179,298.512295 16.2639179,299.445641 L16.2639179,301.330892 C16.2639179,302.253323 17.0131365,303 17.9376109,303 C18.8631807,303 19.6123993,302.253323 19.6123993,301.330892 L19.6123993,299.445641 C19.6123993,298.512295 20.371476,297.754701 21.3090947,297.754701 L23.2007621,297.754701 C24.1252365,297.754701 24.8755505,297.008024 24.8755505,296.086685 C24.8755505,295.164255 24.1252365,294.417578 23.2007621,294.417578" class="star" fill="#FEF7E1" filter="url(#filter-7)" sketch:type="MSShapeGroup"></path>
	            <path d="M20.138373,132.196932 L18.2467056,132.196932 C17.309087,132.196932 16.5500102,131.44043 16.5500102,130.505992 L16.5500102,128.619649 C16.5500102,127.698311 15.8007916,126.951633 14.8752219,126.951633 C13.9507474,126.951633 13.2015288,127.698311 13.2015288,128.619649 L13.2015288,130.505992 C13.2015288,131.44043 12.4413567,132.196932 11.5048335,132.196932 L9.6120707,132.196932 C8.68759628,132.196932 7.93728233,132.94361 7.93728233,133.86604 C7.93728233,134.787378 8.68759628,135.534056 9.6120707,135.534056 L11.5048335,135.534056 C12.4413567,135.534056 13.2015288,136.291649 13.2015288,137.224996 L13.2015288,139.110247 C13.2015288,140.032677 13.9507474,140.779355 14.8752219,140.779355 C15.8007916,140.779355 16.5500102,140.032677 16.5500102,139.110247 L16.5500102,137.224996 C16.5500102,136.291649 17.309087,135.534056 18.2467056,135.534056 L20.138373,135.534056 C21.0628474,135.534056 21.8131614,134.787378 21.8131614,133.86604 C21.8131614,132.94361 21.0628474,132.196932 20.138373,132.196932" class="star" fill="#FEF7E1" filter="url(#filter-8)" sketch:type="MSShapeGroup"></path>
	            <path d="M391.574634,98.2073103 L388.975385,98.2073103 C387.687049,98.2073103 386.644039,97.1678377 386.644039,95.8838715 L386.644039,93.2919397 C386.644039,92.025973 385.614574,91 384.342793,91 C383.072518,91 382.043053,92.025973 382.043053,93.2919397 L382.043053,95.8838715 C382.043053,97.1678377 380.998537,98.2073103 379.711706,98.2073103 L377.110953,98.2073103 C375.840678,98.2073103 374.809708,99.2332833 374.809708,100.50075 C374.809708,101.766717 375.840678,102.79269 377.110953,102.79269 L379.711706,102.79269 C380.998537,102.79269 382.043053,103.833662 382.043053,105.116129 L382.043053,107.70656 C382.043053,108.974027 383.072518,110 384.342793,110 C385.614574,110 386.644039,108.974027 386.644039,107.70656 L386.644039,105.116129 C386.644039,103.833662 387.687049,102.79269 388.975385,102.79269 L391.574634,102.79269 C392.844909,102.79269 393.875879,101.766717 393.875879,100.50075 C393.875879,99.2332833 392.844909,98.2073103 391.574634,98.2073103" class="star" fill="#FEF7E1" filter="url(#filter-9)" sketch:type="MSShapeGroup"></path>
	            <g class="ghost">
	            	<path d="M265.404137,349.4093 L265.404137,337.49409 C265.404137,305.337138 239.312398,279.177196 207.243359,279.177196 C175.17432,279.177196 149.082581,305.337138 149.082581,337.49409 L149.082581,349.321324 C149.082581,364.268367 149.082581,357.590824 149.082581,381.797188 L149.082581,416.54026 C149.082581,420.590808 151.478985,424.031025 155.187836,425.303007 C158.737658,426.518171 162.54156,425.352493 164.883127,422.326495 C167.166199,419.373811 168.427465,418.079835 170.915265,418.079835 C174.030041,418.079835 175.421089,419.364647 177.525026,421.311109 C180.018309,423.616806 183.118463,426.48518 189.092107,426.48518 C195.062096,426.48518 198.162249,423.614973 200.653705,421.311109 C202.753986,419.364647 204.143206,418.079835 207.256155,418.079835 C210.369103,418.079835 211.758323,419.364647 213.86226,421.311109 C216.353715,423.616806 219.453869,426.48518 225.425685,426.48518 C231.395674,426.48518 234.495828,423.614973 236.987283,421.309276 C239.089392,419.364647 240.478612,418.079835 243.589733,418.079835 C246.072049,418.079835 247.32783,419.370145 249.599936,422.313665 C251.939674,425.339663 255.745405,426.509007 259.297055,425.293842 C263.005905,424.020028 265.404137,420.579811 265.404137,416.52743 L265.404137,394.609202 L265.404137,381.50027" class="ghost-body" fill="#FEF7E1" filter="url(#filter-10)" sketch:type="MSShapeGroup"></path>				
		            <path d="M186.129048,350.270729 C186.129048,349.224184 185.280893,348.37192 184.23715,348.37192 C183.19158,348.37192 182.343424,349.224184 182.343424,350.270729 C182.343424,352.29417 180.705608,353.936383 178.687583,353.936383 C176.667731,353.936383 175.031742,352.29417 175.031742,350.270729 C175.031742,345.180968 179.161015,341.040611 184.23715,341.040611 C189.311458,341.040611 193.44073,345.180968 193.44073,350.270729 C193.44073,352.29417 191.804742,353.936383 189.784889,353.936383 C187.766865,353.936383 186.129048,352.29417 186.129048,350.270729" class="ghost-eye ghost-eye--left" fill="#030F43" filter="url(#filter-11)" sketch:type="MSShapeGroup"></path>
		            <path d="M207.000246,385.820244 C197.434737,385.820244 189.653279,378.019732 189.653279,368.428547 C189.653279,366.403273 191.291096,364.762893 193.30912,364.762893 L220.689543,364.762893 C222.709395,364.762893 224.345384,366.403273 224.345384,368.428547 C224.345384,378.019732 216.565754,385.820244 207.000246,385.820244" class="ghost-mouth" fill="#030F43" filter="url(#filter-12)" sketch:type="MSShapeGroup"></path>
		            <path d="M235.312908,353.936383 C233.294884,353.936383 231.657067,352.29417 231.657067,350.270729 C231.657067,349.224184 230.808912,348.37192 229.763341,348.37192 C228.719598,348.37192 227.869615,349.224184 227.869615,350.270729 C227.869615,352.29417 226.233626,353.936383 224.213774,353.936383 C222.19575,353.936383 220.557933,352.29417 220.557933,350.270729 C220.557933,345.180968 224.689033,341.040611 229.763341,341.040611 C234.839477,341.040611 238.968749,345.180968 238.968749,350.270729 C238.968749,352.29417 237.330932,353.936383 235.312908,353.936383" class="ghost-eye ghost-eye--right" fill="#030F43" filter="url(#filter-13)" sketch:type="MSShapeGroup"></path>
		            <path d="M249.632542,356.656165 L266.027396,350.076327 C266.027396,350.076327 284.65649,351.970366 284.65649,359.985182 C284.65649,367.999999 274.479526,376.380037 265.978243,379.932478 C257.476959,383.48492 240.21522,368.03515 240.21522,368.03515 L249.632542,356.656165 Z" class="ghost-arm--right" fill="#FEF7E1" sketch:type="MSShapeGroup"></path>
		            <path d="M161.467328,350.779188 L149.811228,350.095884 C149.811228,350.095884 130.132375,348.679349 130.132374,360.305493 C130.132374,371.931637 144.76705,379.045695 149.446038,382.252515 C154.125027,385.459334 175.963632,371.945902 175.963632,371.945902 L161.467328,350.779188 Z" class="ghost-arm--left" fill="#FEF7E1" sketch:type="MSShapeGroup"></path>
	            </g>
	            <text class="text text--tommy" font-family="Open Sans" font-size="34" font-weight="bold" sketch:alignment="right" letter-spacing="-1" fill="#FEF7E1">
                <tspan x="157.556641" y="506">I am Tommie</tspan>
	            </text>
	            <text class="text text--hello" font-family="Open Sans" font-size="34" font-weight="bold" letter-spacing="-1" fill="#FEF7E1">
	                <tspan x="51" y="504">Hello, </tspan>
	            </text>
	            <text class="text text--assistant"  font-family="Open Sans" font-size="26" font-weight="normal" sketch:alignment="middle" fill="#FEF7E1">
	                <tspan x="207" y="544"></tspan>
	                <tspan x="111.23291" y="580">smart assistant.</tspan>
	            </text>
	            <text class="text text--autonomus" font-family="Open Sans" font-size="26" font-weight="normal" sketch:alignment="middle" fill="#FEF7E1">
	                <tspan x="69.5668945" y="546">your new autonomous </tspan>
	            </text>
	            <text class="text text--start" font-family="Open Sans" font-size="31" font-weight="bold" sketch:alignment="middle" letter-spacing="-0.582424283" fill="#F299A0">
	                <tspan x="133.559046" y="665">Let’s start</tspan>
	            </text>
	    </g>		
	</svg>
	<svg version="1.1" class="rewind" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 -12 100 125" style="enable-background:new 0 -12 100 125;" xml:space="preserve">
		<path  style="fill:#FFFFFF;" class="rewind-stroke" d="M50.2-6.8c-24.8,0-45,20.2-45,45c0,12.7,5.4,24.7,14.6,33.1l-7,7l23,3.9l-3.9-23L24,67.1c-8-7.3-12.8-17.8-12.8-28.9
	c0-21.5,17.5-39,39-39s39,17.5,39,39s-17.5,39-39,39v6c24.8,0,45-20.2,45-45S75-6.8,50.2-6.8z"/>
		<polygon style="fill:#FFFFFF;" class="rewind-triangle"  points="59.7,56 59.7,22.1 30.6,39 "/>
	</svg>

</div>
              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

body{
	text-align: center;
}
.iphone-container{
	position: relative;
	margin: 0 auto 0 auto;
	display: inline-block;
}
svg{
	position: absolute;
    left: 23px;
    top: 78px;
    width: 298px;
    height: auto;
}
.text{
	opacity: 0;
}
.text--start,
.rewind{
	cursor: pointer;
}

.rewind{
	width: 50px;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -25px;
	margin-top: -25px;
	opacity: 0;
}
              
            
!

JS

              
                $(document).ready(function(){

	var ovals = $(".oval"),
		stars = $(".star"),
		ghost = $(".ghost"),
		textTommy = $(".text--tommy"),
		textHello = $(".text--hello"),
		textAutonomus = $(".text--autonomus"),
		textAssistant = $(".text--assistant"),
		textStart = $(".text--start")
		leaving = false,
		rewind = $(".rewind"),
		rewindStroke = $(".rewind-stroke");

	var tlMain = new TimelineMax({delay: 3}),
		tlOpening = new TimelineMax(),
		tlLeaving = new TimelineMax({paused:true}),
		tlRewind = new TimelineMax({onComplete:function(){
			tlMain.restart();
			//leaving = false;
			tlLeaving.pause(0);
			// // tlOpening.play(0);
			}
		}),
    tlStars = new TimelineMax;



	tlOpening
		.staggerFrom(ovals, 1.5, {scale: 0, transformOrigin: "50% 50%", ease: Back.easeOut.config(1.7)}, 0.2)
		.staggerFrom(stars, 0.4, {scale: 0, autoAlpha: 0, y: 20, ease:Back.easeOut.config(1.3)}, 0.2, '1', randomstars)
		.from(ghost, 2, {bezier:{values:[{x:0, y:0},{x: -50, y: -50},{x: 0, y: -100}]}, scale: 0.6, autoAlpha: 0, attr:{stdDeviation:20}, transformOrigin: "50% 50%", ease: Power4.easeOut}, '2')
		.add("ghostdone")
		.fromTo(textHello, 2.5, {y: 10}, {y: 0, autoAlpha: 1, ease:Power4.easeOut}, 'ghostdone')
		.fromTo(textTommy, 2.5, {y: 10}, {y: 0, autoAlpha: 1, ease:Power4.easeOut}, 'ghostdone+=1.1')		
		.fromTo(textAutonomus, 2.5, {y: 10}, {y: 0, autoAlpha: 1, ease:Power4.easeOut}, 'ghostdone+=1.3')		
		.fromTo(textAssistant, 2.5, {y: 10}, {y: 0, autoAlpha: 1, ease:Power4.easeOut}, 'ghostdone+=1.3')		
		.fromTo(textStart, 0.8, {y: 20}, { y:0, autoAlpha: 1, ease: Back.easeOut.config(1.7)}, 'ghostdone+=3');
	
  function randomstars(){
    tlStars = new TimelineMax({onComplete: randomstars});
    
    tlStars.staggerTo(stars, 8, {cycle:{x:function(i){ return (Math.random() * 80)}, y: function(i){ return (Math.random() * 80)}, rotation: function(i){ return (Math.random() * 90)}}, ease: Power0.easeNone}, 0)
      .staggerTo(ovals, 4, {cycle:{x:function(i){ return (Math.random() * 30)}, y: function(i){ return (Math.random() * 30)}}, ease: Power0.easeNone}, 0, 0)
      .staggerTo(ovals, 4, {cycle:{x:function(i){ return (Math.random() * 30)}, y: function(i){ return (Math.random() * 30)}}, ease: Power0.easeNone}, 0, 4);
	}
  
	tlLeaving
		.staggerTo(ovals, 0.4, {x: -800, ease: Power2.easeIn}, -0.02, '0')
		.staggerTo(stars, 0.4, {x: -600, ease: Power2.easeIn}, 0.05, '0.3')
		.to(ghost, 0.4, {x: -300, ease: Power2.easeIn}, '0.2')
		.to(textHello, 0.4, {x: -400, ease: Power2.easeIn}, '0.3')
		.to(textTommy, 0.4, {x: -400, ease: Power2.easeIn}, '0.3')
		.to(textAutonomus, 0.4, {x: -400, ease: Power2.easeIn}, '0.4')
		.to(textAssistant, 0.4, {x: -400, ease: Power2.easeIn}, '0.5')
		.to(textStart, 0.4, {x: -400, ease: Power2.easeIn}, '0.6')
		.add(tlRewind);

		$(".text--start").click(function() {
			//leaving = true;
      tlStars.pause();
			tlLeaving.invalidate().play(0);
		});

	tlRewind
		.set(rewindStroke, {transformOrigin: "50% 50%"})
		.fromTo(rewind,  0.7, {scale: 0.6, autoAlpha:0}, {scale: 1, autoAlpha:1, ease: Back.easeOut.config(1.9), onComplete: function(){
			TweenMax.to(rewindStroke, 3, {rotation: -360, repeat: -1, ease:Power0.easeNone}, '-=0.5')
		}})		
		.addPause()
    .add("rewindclicked", "+=0.01")
		.to(rewind, 2, {scale: 2, autoAlpha:0, ease: Back.easeIn.config(3)});

	rewind.click(function() {
		tlRewind.play("rewindclicked");
		setTimeout(function(){
			TweenMax.killTweensOf(rewindStroke);
		}, 200)
	});

	tlMain
		// .set([ovals, textHello, textTommy, textAutonomus, textAssistant, textStart, stars], {x:0})
		.add(tlOpening)
		.add("openingdone");

});
              
            
!
999px

Console