<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/mohamedabusrea/pen/eGRobO" />
<style class="cp-pen-styles">html, body {
margin: 0;
padding: 0;
}
.workspace {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 100vh;
overflow: hidden;
background-color: black;
}
.workspace--isLoaded .loading {
display: none;
}
.svg-clipped-text {
-webkit-clip-path: url(#myClip);
}
svg {
position: absolute;
width: 100%;
height: 0;
}
video {
-o-object-fit: cover;
object-fit: cover;
width: 830px;
height: 205px;
}
.loading {
color: white;
position: absolute;
top: 0;
left: 0;
right: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-animation: loading infinite .7s alternate;
animation: loading infinite .7s alternate;
font-family: Arial;
padding: 10px;
}
@-webkit-keyframes loading {
from {
opacity: .2;
}
to {
opacity: .9;
}
}
@keyframes loading {
from {
opacity: .2;
}
to {
opacity: .9;
}
}
@media (max-width: 830px) {
.data-content {
-webkit-transform: scale(0.7);
transform: scale(0.7);
}
}
@media (max-width: 600px) {
.data-content {
-webkit-transform: scale(0.4);
transform: scale(0.4);
}
}
</style></head><body>
<div class="workspace">
<div class="loading">Loading Video...</div>
<div class="data-content">
<video loop width="852" height="480" autoplay class="svg-clipped-text" poster="http://moana.surge.sh/assets/images/video.jpg" muted>
<source src="http://moana.surge.sh/assets/images/video.ogv" type="video/ogv">
<source src="http://moana.surge.sh/assets/images/video.mp4" type="video/mp4">
<source src="http://moana.surge.sh/assets/images/video.webm" type="video/webm">
</video>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 852 210" width="100%" height="100%"
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<clipPath id="myClip">
<path d="M1833,1125C2008,1202 2009,1365 2083,1542C2122,1634 2183,1741 2222,1834C2310,2040 2354,2268 2430,2473C2453,2575 2476,2677 2499,2779C2516,2811 2612,2874 2582,2904C2496,2969 2233,2886 2179,2862C2160,2813 2125,2770 2110,2723C2101,2654 2091,2584 2082,2515C2042,2386 1966,2230 1915,2112C1858,1979 1835,1835 1776,1709C1750,1718 1763,1710 1748,1723C1670,1805 1687,1943 1637,2056C1537,2285 1473,2568 1415,2834C1394,2842 1392,2844 1359,2848C1308,2747 1208,2670 1165,2556C1160,2514 1156,2473 1151,2431C1142,2426 1132,2422 1123,2417C1097,2372 1104,2330 1081,2278C1066,2244 1026,2201 1012,2167C1007,2125 1003,2084 998,2042C974,1960 935,1877 901,1806C892,1806 882,1806 873,1806C831,1875 790,1945 748,2014C671,2189 619,2382 554,2556C535,2605 461,2890 443,2903C387,2903 332,2903 276,2903C261,2890 274,2898 248,2889C248,2880 248,2870 248,2861C494,2676 485,2253 595,1930C696,1634 882,1423 1012,1152C1038,1161 1025,1153 1040,1166C1107,1250 1097,1422 1137,1527C1157,1578 1200,1645 1220,1694C1249,1764 1241,1850 1276,1916C1317,1995 1386,2068 1429,2152C1442,2137 1434,2150 1443,2124C1517,2046 1526,1900 1568,1791C1651,1576 1723,1326 1832,1124L1833,1125Z"
style="fill:rgb(0,91,192);fill-rule:nonzero;" transform="translate(.076 -107.03) scale(.10453)"/>
<path d="M5333,1569C5564,1568 5740,1598 5875,1694C5926,1754 5977,1814 6028,1875C6084,1926 6139,1977 6195,2028C6247,2100 6321,2277 6403,2306C6408,2225 6428,2137 6445,2070C6459,2014 6439,1924 6431,1889C6400,1758 6440,1587 6445,1472C6480,1452 6489,1438 6542,1430C6542,1439 6542,1449 6542,1458C6591,1525 6542,1706 6542,1805C6542,2128 6549,2550 6445,2777C6440,2777 6436,2777 6431,2777C6431,2772 6431,2768 6431,2763C6377,2713 6364,2644 6320,2582C6297,2550 6115,2367 6084,2346C6001,2290 5890,2287 5806,2235C5752,2201 5733,2151 5653,2138C5653,2143 5653,2147 5653,2152C5648,2152 5644,2152 5639,2152C5630,2383 5620,2615 5611,2846C5589,2854 5578,2858 5542,2860C5527,2848 5530,2851 5500,2846C5486,2797 5472,2769 5472,2693C5501,2652 5486,2536 5486,2471C5486,2240 5486,2008 5486,1777C5454,1691 5354,1703 5333,1569Z"
style="fill:rgb(0,91,192);fill-rule:nonzero;" transform="translate(.05 -107.03) scale(.10453)"/>
<path d="M3097 1444C3557 1434 3757 1553 3916 1847 3968 1943 4056 2055 3985 2208 3900 2392 3752 2524 3541 2583 3462 2605 3362 2571 3319 2555 3128 2484 3022 2476 3027 2208 3077 2156 3074 2067 3152 2041 3181 2015 3220 2013 3277 2013 3291 2027 3299 2014 3319 2027 3384 2069 3365 2142 3472 2152 3477 2138 3481 2124 3486 2110 3500 2092 3499 2076 3500 2041 3445 1974 3442 1890 3347 1860 3279 1800 3142 1844 3083 1874 3055 1883 3027 1893 3000 1902 2929 1950 2810 2220 2861 2388 2935 2635 3245 2821 3555 2666 3652 2617 3706 2537 3847 2527 3847 2532 3847 2536 3847 2541 3808 2567 3805 2587 3778 2624 3748 2665 3561 2808 3514 2832 3463 2858 3422 2844 3361 2860 3016 2950 2653 2708 2569 2485 2496 2289 2621 2126 2708 2041 2911 1841 3043 1669 3458 1763 3496 1820 3702 2035 3597 2180 3574 2262 3515 2295 3403 2291 3360 2248 3276 2224 3195 2222 3184 2253 3181 2297 3181 2347 3216 2373 3262 2425 3292 2458 3480 2465 3667 2427 3709 2291 3809 2194 3723 1926 3695 1819 3620 1781 3573 1696 3501 1666 3276 1575 2833 1663 2737 1791 2685 1860 2615 2135 2556 2166 2556 2110 2556 2055 2556 1999 2577 1970 2569 1926 2584 1888 2616 1823 2649 1758 2681 1694 2746 1603 2879 1533 2987 1486 3032 1467 3066 1472 3098 1444L3097 1444zM4597 1875C4458 2098 4322 2126 4319 2514 4340 2522 4342 2524 4375 2528 4479 2444 4765 2379 4778 2222 4727 2111 4676 2000 4625 1889 4610 1876 4623 1884 4597 1875zM5028 2778C5033 2750 5037 2722 5042 2695 5038 2682 5006 2663 5000 2653 4955 2579 4950 2459 4861 2431 4777 2499 4634 2497 4528 2542 4502 2553 4456 2586 4431 2598 4389 2616 4348 2611 4320 2640 4285 2676 4282 2769 4264 2821 4187 2857 4119 2909 4028 2932 3979 2507 4102 2255 4278 2015 4354 1911 4584 1810 4597 1668 4570 1639 4559 1594 4528 1571 4479 1535 4426 1537 4403 1474 4452 1460 4480 1446 4556 1446 4600 1490 4691 1486 4737 1529 4737 1538 4737 1548 4737 1557 4793 1624 4836 1691 4890 1765 4982 1894 5100 2012 5168 2168 5223 2293 5235 2430 5293 2557 5314 2604 5350 2603 5362 2668 5249 2723 5177 2794 5029 2779L5028 2778zM7236 1889C7083 2059 6917 2173 6917 2500 6922 2500 6926 2500 6931 2500 6931 2505 6931 2509 6931 2514 7030 2471 7373 2282 7403 2195 7335 2123 7329 1932 7236 1889zM7458 2375C7289 2394 7156 2517 7041 2597 7003 2624 6937 2639 6916 2680 6877 2758 6936 2805 6847 2847 6809 2886 6744 2904 6680 2916 6649 2859 6651 2762 6652 2666 6705 2592 6692 2415 6735 2305 6748 2273 6787 2235 6804 2208 6841 2148 6848 2085 6887 2027 6968 1908 7116 1830 7137 1652 7109 1615 7081 1578 7054 1541 7007 1509 6980 1545 6957 1485 6971 1480 6985 1476 6999 1471 7028 1442 7064 1442 7124 1443 7196 1517 7312 1538 7374 1624 7494 1790 7622 1969 7707 2166 7744 2251 7742 2325 7776 2416 7812 2511 7891 2596 7901 2708 7824 2765 7804 2832 7665 2833 7650 2820 7663 2828 7637 2819 7572 2673 7479 2559 7456 2375L7458 2375z"
style="fill:rgb(0,91,192);fill-rule:nonzero;" transform="translate(.076 -107.03) scale(.10453)"/>
</clipPath>
</svg>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >(function () {
var v = document.createElement("VIDEO");
v.src = "http://moana.surge.sh/assets/images/video.mp4";
v.addEventListener("loadeddata", function () {
document.querySelector('.workspace').classList.add('workspace--isLoaded');
});
})();
//# sourceURL=pen.js
</script>
</body></html>
