/
index2.html
140 lines (139 loc) · 7.78 KB
/
index2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Morphing Background Shapes | Demo 2 | Codrops</title>
<meta name="description" content="A page background effect where SVG shapes morph and transform on scroll" />
<meta name="keywords" content="background, svg, morph, animation, scroll, shape, web development, css, javascript" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="sponsor/pater.css" />
<script>
document.documentElement.className = 'js';
var supportsCssVars = function() {
var s = document.createElement('style'),
support;
s.innerHTML = "root: { --tmp-var: bold; }";
document.head.appendChild(s);
support = !!(window.CSS && window.CSS.supports && window.CSS.supports('font-weight', 'var(--tmp-var)'));
s.parentNode.removeChild(s);
return support;
}
if (!supportsCssVars()) alert('Please view this demo in a modern browser that supports CSS Variables.')
</script>
</head>
<body class="demo-2 loading">
<svg class="hidden">
<symbol id="icon-arrow" viewBox="0 0 24 24">
<title>arrow</title>
<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
</symbol>
<symbol id="icon-drop" viewBox="0 0 24 24">
<title>drop</title>
<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/>
</symbol>
<symbol id="shape-demo" viewBox="0 0 200 100">
<title>shape demo</title>
<path d="M 6.144,74.1 C 20.4,107.4 70.13,94.33 94.22,95.74 121.3,97.41 130.8,101.1 154.7,99.38 178.6,97.72 201.9,78.95 199.4,46.86 197.1,14.96 174.9,4.781 161.4,1.827 147.9,-1.128 119.8,8.284 105.6,8.766 85.34,9.449 81.91,7.628 51.08,2.334 17.26,-3.482 -8.105,40.84 6.144,74.1 Z" />
</symbol>
</svg>
<main>
<div class="morph-wrap">
<svg class="morph" width="1400" height="770" viewBox="0 0 1400 770">
<path d="M 262.9,252.2 C 210.1,338.2 212.6,487.6 288.8,553.9 372.2,626.5 511.2,517.8 620.3,536.3 750.6,558.4 860.3,723 987.3,686.5 1089,657.3 1168,534.7 1173,429.2 1178,313.7 1096,189.1 995.1,130.7 852.1,47.07 658.8,78.95 498.1,119.2 410.7,141.1 322.6,154.8 262.9,252.2 Z"/>
</svg>
</div>
<div class="content content--fixed">
<header class="codrops-header">
<div class="codrops-links">
<svg class="decoshape" viewBox="0 0 200 100" width="100%" height="100%" preserveAspectRatio="none">
<path d="M 10.45,74.41 C 39.4,110.8 72.59,67.27 95.98,68.68 122.3,70.35 131.5,101.4 154.7,99.69 177.9,98.03 200.5,79.26 198.1,47.17 195.9,15.27 174.6,-0.3279 151.8,0.9941 128.6,2.581 126,16.86 107,22.76 88.26,28.67 88.87,12.36 60.37,1.787 31.79,-8.877 -18.61,37.92 10.45,74.41 Z" />
</svg>
<a class="codrops-icon codrops-icon--prev" href="https://tympanus.net/Development/FolderPreviewIdeas/" title="Previous Demo"><svg class="icon icon--arrow"><use xlink:href="#icon-arrow"></use></svg></a>
<a class="codrops-icon codrops-icon--drop" href="https://tympanus.net/codrops/?p=31190" title="Back to the article"><svg class="icon icon--drop"><use xlink:href="#icon-drop"></use></svg></a>
</div>
<h1 class="codrops-header__title">Morphing Background Shapes</h1>
</header>
<nav class="demos">
<a class="demo" href="index.html"><svg class="decoshape" preserveAspectRatio="none"><use xlink:href="#shape-demo"></use></svg>Demo 1</a>
<a class="demo demo--current" href="index2.html"><svg class="decoshape"><use xlink:href="#shape-demo"></use></svg>Demo 2</a>
<a class="demo" href="index3.html"><svg class="decoshape"><use xlink:href="#shape-demo"></use></svg>Demo 3</a>
</nav>
<a class="pater" href="http://synd.co/2pHxJny">
<svg class="pater__deco" width="300" height="240" viewBox="0 0 1000 800">
<path d="M27.4,171.8C73,42.9,128.6,1,128.6,1s0,0,0,0c58.5,0,368.3,0.3,873.2,0.8c38.5,211,42.1,373.5,38.9,476.7c-2.5,80.3-10.6,174.9-76.7,247.8c-15.1,16.6-37.4,41.2-72.8,53.9c-92.4,33.1-173-50.8-283.9-99.4c-224.3-98.4-334.9,51.4-472.2-45.6C-6.3,535.2-14.5,290.6,27.4,171.8z"/>
</svg>
<img class="pater__img" src="sponsor/hellosignapi.svg" alt="HelloSign API" />
<h4 class="pater__title">2x Faster Integration Time</h4>
<p class="pater__desc">Embed contracts and agreements into your site or app with a few lines of code.</p>
</a>
<div class="deco deco--title">2017 Westland Exhibition Center</div>
</div>
<div class="content-wrap">
<div class="content content--layout content--layout-1">
<img class="content__img" src="img/3.jpg" alt="Some image" />
<h3 class="content__title">found</h3>
<p class="content__author">Jane Westhall</p>
<p class="content__desc">Lost or found? That's the question today.</p>
<a href="#" class="content__link">Discover</a>
</div>
</div>
<div class="content-wrap">
<div class="content content--layout content--layout-2">
<img class="content__img" src="img/4.jpg" alt="Some image" />
<h3 class="content__title">bunch</h3>
<p class="content__author">Nikimo Westlane</p>
<p class="content__desc">The neverending quest, once and forever.</p>
<a href="#" class="content__link">Discover</a>
</div>
</div>
<div class="content-wrap">
<div class="content content--layout content--layout-3">
<img class="content__img" src="img/1.jpg" alt="Some image" />
<h3 class="content__title">revert</h3>
<p class="content__author">Gregory Mourisha</p>
<p class="content__desc">Finding the heart when paradise is lost.</p>
<a href="#" class="content__link">Discover</a>
</div>
</div>
<div class="content-wrap">
<div class="content content--layout content--layout-4">
<img class="content__img" src="img/2.jpg" alt="Some image" />
<h3 class="content__title">east</h3>
<p class="content__author">Walter Mastricht</p>
<p class="content__desc">The outer bounds of the world, from within.</p>
<a href="#" class="content__link">Discover</a>
</div>
</div>
<div class="content-wrap">
<div class="content content--layout content--layout-1">
<img class="content__img" src="img/5.jpg" alt="Some image" />
<h3 class="content__title">frank</h3>
<p class="content__author">Frank Cherry</p>
<p class="content__desc">Frank's work and nothing more.</p>
<a href="#" class="content__link">Discover</a>
</div>
</div>
<!-- Related demos -->
<section class="content content--related">
<p class="content__info">If you enjoyed this demo you might also like:</p>
<a class="content__related-item" href="https://tympanus.net/Development/ElasticSVGElements/">
<img class="content__related-img" src="img/related/ItemRevealer.jpg">
<h3 class="content__related-title">Elastic SVG Elements</h3>
</a>
<a class="content__related-item" href="https://tympanus.net/Development/ItemRevealer/">
<img class="content__related-img" src="img/related/ElasticSVGElements.jpg">
<h3 class="content__related-title">Item Revealer</h3>
</a>
</section>
</main>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/anime.min.js"></script>
<script src="js/scrollMonitor.js"></script>
<script src="js/demo2.js"></script>
</body>
</html>