├── .gitignore
├── README.md
├── css
├── demo.css
├── demo1.css
├── demo2.css
├── demo3.css
├── demo4.css
├── demo5.css
└── normalize.css
├── favicon.ico
├── index.html
├── index2.html
├── index3.html
├── index4.html
├── index5.html
├── js
├── anime.min.js
├── demo.js
├── demo1.js
├── demo2.js
├── demo3.js
├── demo4.js
└── demo5.js
└── pater
├── jetpack.png
├── jetpack_man.png
└── pater.css
/.gitignore:
--------------------------------------------------------------------------------
1 | *.DS_Store
2 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Organic Shape Morph Ideas
2 |
3 | A small set of ideas for organic shape effects. The demos show some ways to use animated SVG morphs interactively on a website, including a menu hover and a content reveal effect.
4 |
5 | 
6 |
7 | [Article on Codrops](https://tympanus.net/codrops/?p=32314)
8 |
9 | [Demo](http://tympanus.net/Development/ShapeMorphIdeas/)
10 |
11 | This demo is kindly sponsored by: [Jetpack Professional](http://go.hackingui.com/JetpackCodrops19092017), the only WordPress plugin you really need.
12 |
13 | ## Credits
14 |
15 | - [anime.js](http://anime-js.com/) by Julian Garnier
16 | - [Keyboard icon](https://thenounproject.com/term/keyboard/783/) by Paul te Kortschot from the Noun Project
17 | - Patterns from [Hero Patterns](http://www.heropatterns.com/)
18 |
19 | ## License
20 | This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used.
21 |
22 | ## Misc
23 |
24 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/), [Instagram](https://www.instagram.com/codropsss/)
25 |
26 |
27 | [© Codrops 2017](http://www.codrops.com)
28 |
29 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/css/demo.css:
--------------------------------------------------------------------------------
1 | *,
2 | *::after,
3 | *::before {
4 | box-sizing: border-box;
5 | }
6 |
7 | html {
8 | background: #fff;
9 | }
10 |
11 | body {
12 | font-family: 'Roboto', sans-serif;
13 | min-height: 100vh;
14 | color: #57585c;
15 | color: var(--color-text);
16 | background-color: #fff;
17 | background-color: var(--color-background);
18 | -webkit-font-smoothing: antialiased;
19 | -moz-osx-font-smoothing: grayscale;
20 | }
21 |
22 | /* Color schemes */
23 | .demo-1 {
24 | --color-text: #d8d1d1;
25 | --color-background: #fff;
26 | --color-link: #72af3a;
27 | --color-link-hover: #d8d1d1;
28 | --color-info: #72af3a;
29 | }
30 |
31 | .demo-2 {
32 | --color-text: #333;
33 | --color-background: #bee897;
34 | --color-link: #72af3a;
35 | --color-link-hover: #485a36;
36 | --color-info: #fff;
37 | }
38 |
39 | .demo-3 {
40 | --color-text: #fff;
41 | --color-background: #193ccf;
42 | --color-link: #fff;
43 | --color-link-hover: #000;
44 | --color-info: #fff473;
45 | }
46 |
47 | .demo-4 {
48 | --color-text: #81838c;
49 | --color-background: #272927;
50 | --color-link: #96e23e;
51 | --color-link-hover: #fff;
52 | --color-info: #ea7836;
53 | }
54 |
55 | .demo-5 {
56 | --color-text: #fff;
57 | --color-background: #2b54ee;
58 | --color-link: #fff;
59 | --color-link-hover: #f7fb40;
60 | --color-info: #f7fb40;
61 | }
62 |
63 | /* Fade effect */
64 | .js body {
65 | opacity: 0;
66 | transition: opacity 0.3s;
67 |
68 | }
69 |
70 | .js body.render {
71 | opacity: 1;
72 | }
73 |
74 | a {
75 | text-decoration: none;
76 | color: #5d93d8;
77 | color: var(--color-link);
78 | outline: none;
79 | }
80 |
81 | a:hover,
82 | a:focus {
83 | color: #423c2b;
84 | color: var(--color-link-hover);
85 | outline: none;
86 | }
87 |
88 | .hidden {
89 | position: absolute;
90 | overflow: hidden;
91 | width: 0;
92 | height: 0;
93 | pointer-events: none;
94 | }
95 |
96 | .message {
97 | background: var(--color-text);
98 | color: var(--color-background);
99 | text-align: center;
100 | padding: 1em;
101 | display: none;
102 | position: relative;
103 | z-index: 100;
104 | }
105 |
106 | /* Icons */
107 | .icon {
108 | display: block;
109 | width: 1.5em;
110 | height: 1.5em;
111 | margin: 0 auto;
112 | fill: currentColor;
113 | }
114 |
115 | .icon--keyboard {
116 | display: none;
117 | }
118 |
119 | main {
120 | position: relative;
121 | width: 100%;
122 | }
123 |
124 | .content {
125 | position: relative;
126 | display: flex;
127 | justify-content: center;
128 | align-items: center;
129 | min-height: 100vh;
130 | margin: 0 auto;
131 | }
132 |
133 | .content--fixed {
134 | position: fixed;
135 | z-index: 10000;
136 | top: 0;
137 | left: 0;
138 | display: grid;
139 | align-content: space-between;
140 | width: 100%;
141 | max-width: none;
142 | height: 100vh;
143 | padding: 1.5em;
144 | pointer-events: none;
145 | grid-template-columns: 50% 50%;
146 | grid-template-rows: auto auto 4em;
147 | grid-template-areas: 'header ...'
148 | '... ...'
149 | 'github demos';
150 | }
151 |
152 | .content--fixed a {
153 | pointer-events: auto;
154 | }
155 |
156 | /* Header */
157 | .codrops-header {
158 | position: relative;
159 | z-index: 100;
160 | display: flex;
161 | flex-direction: row;
162 | align-items: flex-start;
163 | align-items: center;
164 | align-self: start;
165 | grid-area: header;
166 | justify-self: start;
167 | }
168 |
169 | .codrops-header__title {
170 | font-size: 1em;
171 | font-weight: bold;
172 | margin: 0;
173 | padding: 0.75em 0;
174 | }
175 |
176 | .info {
177 | margin: 0 0 0 1.25em;
178 | font-style: italic;
179 | color: var(--color-info);
180 | font-weight: bold;
181 | }
182 |
183 | .github {
184 | display: block;
185 | align-self: end;
186 | grid-area: github;
187 | justify-self: start;
188 | }
189 |
190 | .demos {
191 | position: relative;
192 | display: block;
193 | align-self: end;
194 | text-align: center;
195 | grid-area: demos;
196 | }
197 |
198 | .demo {
199 | margin: 0 0.15em;
200 | }
201 |
202 | .demo:hover,
203 | .demo:focus {
204 | opacity: 0.5;
205 | }
206 |
207 | .demo span {
208 | white-space: nowrap;
209 | text-transform: lowercase;
210 | pointer-events: none;
211 | }
212 |
213 | .demo span::before {
214 | content: '#';
215 | }
216 |
217 | a.demo--current {
218 | pointer-events: none;
219 | }
220 |
221 | /* Top Navigation Style */
222 | .codrops-links {
223 | position: relative;
224 | display: flex;
225 | justify-content: center;
226 | margin: 0 1em 0 0;
227 | text-align: center;
228 | white-space: nowrap;
229 | }
230 |
231 | .codrops-icon {
232 | display: inline-block;
233 | margin: 0.15em;
234 | padding: 0.25em;
235 | }
236 |
237 | .scene {
238 | position: fixed;
239 | top: 0;
240 | left: 0;
241 | width: 100%;
242 | height: 100vh;
243 | pointer-events: none;
244 | z-index: 1;
245 | }
246 |
247 | @media screen and (min-width: 55em) {
248 | .icon--keyboard {
249 | position: absolute;
250 | right: 0.55em;
251 | bottom: -30%;
252 | display: block;
253 | width: 54px;
254 | height: 46px;
255 | fill: var(--color-link);
256 | }
257 | .demos {
258 | display: flex;
259 | padding-right: 80px;
260 | justify-self: end;
261 | }
262 | .demo {
263 | display: block;
264 | width: 17px;
265 | height: 17px;
266 | margin: 0 4px;
267 | border-radius: 50%;
268 | background: var(--color-link);
269 | }
270 | a.demo--current {
271 | background: var(--color-link-hover);
272 | }
273 | .demo span {
274 | position: absolute;
275 | line-height: 1;
276 | right: 100%;
277 | display: none;
278 | margin: 0 1em 0 0;
279 | }
280 | .demo--current span {
281 | display: block;
282 | }
283 | }
284 |
285 | @media screen and (max-width: 55em) {
286 | html,
287 | body {
288 | overflow-x: hidden;
289 | width: 100vw;
290 | height: 100%;
291 | }
292 | .message {
293 | display: block;
294 | }
295 | .content {
296 | height: auto;
297 | min-height: 0;
298 | padding-bottom: 10em;
299 | flex-direction: column;
300 | }
301 | .content--fixed {
302 | position: relative;
303 | z-index: 1000;
304 | display: block;
305 | padding: 0.85em;
306 | }
307 | .codrops-header {
308 | flex-direction: column;
309 | align-items: center;
310 | }
311 | .codrops-header__title {
312 | font-weight: bold;
313 | padding-bottom: 0.25em;
314 | text-align: center;
315 | }
316 | .github {
317 | display: block;
318 | margin: 1em auto;
319 | }
320 | .codrops-links {
321 | margin: 0;
322 | }
323 | }
324 |
--------------------------------------------------------------------------------
/css/demo1.css:
--------------------------------------------------------------------------------
1 | body.scene-hover {
2 | background-color: #000;
3 | }
4 |
5 | .scene {
6 | display: block;
7 | width: 50vh;
8 | height: 50vh;
9 | position: relative;
10 | pointer-events: auto;
11 | transition: transform 0.3s;
12 | }
13 |
14 | .scene-hover .scene {
15 | transform: scale3d(1.1,1.1,1);
16 | }
17 |
18 | .scene__bg {
19 | fill: #e7d2cd;
20 | }
21 |
22 | .scene__bgdots {
23 | fill: #c9bfbd;
24 | stroke: #8b8682;
25 | stroke-width: 1px;
26 | }
27 |
28 | .scene__overlay {
29 | fill: var(--color-link);
30 | }
31 |
32 | .scene-hover .scene__overlay {
33 | opacity: 0;
34 | }
35 |
36 | .scene__bacteria:first-of-type,
37 | .scene__bacteria:nth-of-type(2),
38 | .scene__bacteria:nth-of-type(3) {
39 | fill: #ac9893;
40 | }
41 |
42 | .scene__bacteria:nth-of-type(4),
43 | .scene__bacteria:nth-of-type(5) {
44 | fill: #625857;
45 | }
46 |
47 | .scene__bacteria:nth-of-type(6),
48 | .scene__bacteria:nth-of-type(7),
49 | .scene__bacteria:nth-of-type(8) {
50 | fill: #fff;
51 | stroke: #616161;
52 | }
53 |
54 | .scene__microscope {
55 | fill: #fff;
56 | pointer-events: none;
57 | }
58 |
59 | .scene-hover .scene__microscope {
60 | opacity: 0;
61 | }
62 |
63 | .intro {
64 | margin: 0 0 0 3em;
65 | }
66 |
67 | .intro__title {
68 | margin: 0;
69 | color: #181616;
70 | font-size: 1.85em;
71 | }
72 |
73 | .scene-hover .intro__title {
74 | color: #fff;
75 | }
76 |
77 | .intro__title-sub {
78 | display: block;
79 | font-weight: 400;
80 | font-size: 0.75em;
81 | }
82 |
83 | .intro__nav {
84 | margin: 1em 0 0 0;
85 | }
86 |
87 | .intro__nav-item:not(:last-child) {
88 | margin: 0 0.5em 0 0;
89 | }
90 |
91 | .intro__nav-item:not(:last-child)::after {
92 | content: '\25CF';
93 | margin: 0 0 0 0.5em;
94 | }
95 |
96 | .intro__nav-item:not(:last-child):hover::after {
97 | color: var(--color-link);
98 | }
99 |
100 | @media screen and (max-width: 50em) {
101 | body {
102 | background-color: #000;
103 | }
104 | .scene {
105 | width: 200px;
106 | height: 200px;
107 | margin: 2em 0 0;
108 | }
109 | .scene__overlay,
110 | .scene__microscope {
111 | opacity: 0;
112 | }
113 | .intro {
114 | text-align: center;
115 | margin: 1em 0 0;
116 | }
117 | .intro__title {
118 | color: #fff;
119 | font-size: 1.25em;
120 | }
121 | .info {
122 | display: none;
123 | }
124 | .intro__nav-item {
125 | display: block;
126 | margin: 0.5em 0 0 !important;
127 | }
128 | .intro__nav-item:not(:last-child)::after {
129 | display: none;
130 | }
131 | }
--------------------------------------------------------------------------------
/css/demo2.css:
--------------------------------------------------------------------------------
1 | .scene path {
2 | fill: #b9e194;
3 | }
4 |
5 | .menu {
6 | width: 100%;
7 | height: 100vh;
8 | display: flex;
9 | flex-direction: column;
10 | align-items: center;
11 | justify-content: center;
12 | position: relative;
13 | z-index: 900;
14 | padding-bottom: 10vh;
15 | color: #72ae3a;
16 | }
17 |
18 | .menu__title {
19 | font-weight: normal;
20 | text-transform: uppercase;
21 | letter-spacing: 0.325em;
22 | font-size: 1em;
23 | margin: 0 0 0.35em;
24 | padding: 0 0.25em 0.25em;
25 | border-bottom: 1px solid;
26 | }
27 |
28 | .menu__subtitle {
29 | text-transform: uppercase;
30 | font-size: 0.75em;
31 | letter-spacing: 0.225em;
32 | margin: 0 0 10vh;
33 | font-weight: normal;
34 | }
35 |
36 | .menu__item {
37 | font-family: 'Arapey', serif;
38 | color: #333;
39 | font-size: 2.5em;
40 | padding: 0.25em 0;
41 | }
42 |
43 | .menu__item:hover,
44 | .menu__item:focus {
45 | color: var(--color-link);
46 | }
--------------------------------------------------------------------------------
/css/demo3.css:
--------------------------------------------------------------------------------
1 | .scene {
2 | background: #282886;
3 | }
4 |
5 | .scene path:first-child {
6 | fill: #4f4fea;
7 | }
8 |
9 | .scene path:nth-child(2) {
10 | fill: #0c27cf;
11 | }
12 |
13 | .scene path:nth-child(3) {
14 | fill: #13269c;
15 | }
16 |
17 | .scene path:nth-child(4) {
18 | fill: #242468;
19 | }
20 |
21 | .scene path:nth-child(5) {
22 | fill: #2648e6;
23 | }
24 |
25 | .scene path:nth-child(6) {
26 | fill: #2c31b0;
27 | }
28 |
29 | .scene path:nth-child(7) {
30 | fill: #262689;
31 | }
32 |
33 | .title {
34 | color: #fff;
35 | font-size: 6vw;
36 | font-weight: 400;
37 | z-index: 1000;
38 | font-family: "Arapey", serif;
39 | pointer-events: none;
40 | }
--------------------------------------------------------------------------------
/css/demo4.css:
--------------------------------------------------------------------------------
1 | .title {
2 | color: #fff;
3 | font-size: 6vw;
4 | font-weight: 400;
5 | z-index: 1000;
6 | font-family: "Arapey", serif;
7 | pointer-events: none;
8 | }
9 |
10 | .scene path {
11 | fill: #171817;
12 | }
--------------------------------------------------------------------------------
/css/demo5.css:
--------------------------------------------------------------------------------
1 | .scene {
2 | display: block;
3 | pointer-events: auto;
4 | }
5 |
6 | .scene a {
7 | cursor: pointer;
8 | }
9 |
10 | .content--reveal {
11 | position: absolute;
12 | z-index: 1001;
13 | top: 0;
14 | left: 0;
15 | width: 100%;
16 | height: 100vh;
17 | pointer-events: none;
18 | }
19 |
20 | .content__close {
21 | position: absolute;
22 | top: 0;
23 | right: 0;
24 | border: 0;
25 | padding: 0;
26 | margin: 2em;
27 | background: none;
28 | color: var(--color-link);
29 | opacity: 0;
30 | transition: opacity 0.3s;
31 | }
32 |
33 | .content__close:hover,
34 | .content__close:focus {
35 | outline: none;
36 | color: var(--color-link-hover);
37 | }
38 |
39 | .content__inner {
40 | position: absolute;
41 | left: 0;
42 | top: 0;
43 | width: 100%;
44 | height: 100%;
45 | display: grid;
46 | grid-template-columns: 15% 15% 15% 15%;
47 | grid-template-rows: 25% 25%;
48 | justify-content: center;
49 | align-items: center;
50 | align-content: center;
51 | justify-items: center;
52 | -webkit-touch-callout: none;
53 | -webkit-user-select: none;
54 | -khtml-user-select: none;
55 | -moz-user-select: none;
56 | -ms-user-select: none;
57 | user-select: none;
58 | }
59 |
60 | .js .content__inner {
61 | opacity: 0;
62 | transition: opacity 0.3s;
63 | }
64 |
65 | .js .content__inner--visible {
66 | opacity: 1;
67 | pointer-events: auto;
68 | }
69 |
70 | .content__inner--visible ~ .content__close {
71 | opacity: 1;
72 | pointer-events: auto;
73 | }
74 |
75 | .content__title {
76 | font-size: 12vw;
77 | margin: 0;
78 | position: relative;
79 | z-index: 10;
80 | grid-area: 1 / 1 / 2 / 5;
81 | opacity: 0;
82 | transform: translate3d(-30px,0,0);
83 | transition: transform 1s, opacity 0.6s;
84 | transition-timing-function: cubic-bezier(0.2,1,0.3,1);
85 | }
86 |
87 | .content__inner--visible .content__title {
88 | opacity: 1;
89 | transform: translate3d(0,0,0);
90 | }
91 |
92 | .content__img--1 {
93 | grid-area: 1 / 3 / 2 / 5;
94 | opacity: 0;
95 | transform: translate3d(30px,-30px,0);
96 | transition: transform 1.5s, opacity 0.6s;
97 | transition-timing-function: cubic-bezier(0.2,1,0.3,1);
98 | }
99 |
100 | .content__img--2 {
101 | grid-area: 2 / 1 / 3 / 3;
102 | opacity: 0;
103 | transform: translate3d(-30px,30px,0);
104 | transition: transform 1.5s, opacity 0.6s;
105 | transition-timing-function: cubic-bezier(0.2,1,0.3,1);
106 | }
107 |
108 | .content__inner--visible .content__img--1,
109 | .content__inner--visible .content__img--2 {
110 | opacity: 1;
111 | transform: translate3d(0,0,0);
112 | }
113 |
114 | .content__subtitle {
115 | grid-area: 2 / 2 / 3 / 4;
116 | font-size: 2em;
117 | transform: translate3d(10px,0,0);
118 | transition: transform 0.6s, opacity 0.6s;
119 | }
120 |
121 | .content__inner--visible .content__subtitle {
122 | opacity: 1;
123 | transform: translate3d(0,0,0);
124 | }
125 |
126 | .pattern-color-1 {
127 | fill: #191139;
128 | }
129 |
130 | .pattern-color-2 {
131 | fill: #212499;
132 | }
133 |
134 | .pattern-color-3 {
135 | fill: #6056f2;
136 | }
137 |
138 | .pattern-color-4 {
139 | fill: #90a1f4;
140 | }
141 |
142 | .pattern-color-5 {
143 | fill: #39486c;
144 | }
145 |
146 | .pattern-color-6 {
147 | fill: #4b3b86;
148 | }
149 |
150 | .rect-color-hero {
151 | fill: #33256d;
152 | }
153 |
154 | .rect-color-2 {
155 | fill: #3f43d9;
156 | }
157 |
158 | .rect-color-3 {
159 | fill: #8178ff;
160 | }
161 |
162 | .rect-color-4 {
163 | fill: #adbcf4;
164 | }
165 |
166 | .rect-color-5 {
167 | fill: #191e2d;
168 | }
169 |
170 | .rect-color-6 {
171 | fill: #7461c7;
172 | }
173 |
174 | .content__img--1 rect {
175 | fill: #6554b3;
176 | }
177 |
178 | .content__img--1 circle {
179 | fill: none;
180 | stroke: #1c133f;
181 | }
182 |
183 | .content__img--2 rect {
184 | fill: #6554b3;
185 | }
186 |
187 | .content__img--2 polygon {
188 | fill: none;
189 | stroke: #1c133f;
190 | }
191 |
192 | .label {
193 | font-size: 3em;
194 | fill: #f7fb40;
195 | font-weight: 700;
196 | transition: fill 0.2s;
197 | }
198 |
199 | .label:hover {
200 | fill: #fff;
201 | }
202 |
203 | .label tspan:first-child {
204 | font-size: 0.75em;
205 | border-bottom: 2px solid #ddd;
206 | }
207 |
208 | @media screen and (max-width: 55em) {
209 | main {
210 | height: 100vh;
211 | }
212 | .scene, .content__inner, .content--reveal {
213 | height: calc(100vw * 0.55);
214 | top: auto;
215 | bottom: 0;
216 | }
217 | .content__inner {
218 | grid-template-columns: 25% 25% 25% 25%;
219 | }
220 | .content__title {
221 | font-size: 2em;
222 | }
223 | .content__subtitle {
224 | font-size: 1em;
225 | }
226 | .content__img {
227 | width: 100px;
228 | height: 100px;
229 | }
230 | }
--------------------------------------------------------------------------------
/css/normalize.css:
--------------------------------------------------------------------------------
1 | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ShapeMorphIdeas/eeb7a4f4d7cf580bf8f0b8fb921f1af10f5ffce7/favicon.ico
--------------------------------------------------------------------------------
/index2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Organic Shape Morph Ideas | Demo 2 | Codrops
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
41 |
42 | Please view this demo on a desktop.
43 |
68 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
--------------------------------------------------------------------------------
/index3.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Organic Shape Morph Ideas | Demo 3 | Codrops
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
41 |
42 | Please view this demo on a desktop.
43 |
68 |
69 |
78 |
Fluid Life
79 |
Please view this demo on a desktop.
43 |
68 |
69 |
72 |
Botanic Wisdom
73 |
Please view this demo on a desktop.
46 |
47 |
55 |
56 |
64 |
66 |
150 |
152 |
153 |
Hero.
154 |
158 |
162 |
An unkissed loaf's hydrogen comes with it.
163 |
164 |
165 |
Qualm.
166 |
170 |
174 |
The pinks could be said to resemble freeborn squirrels.
175 |
176 |
177 |
Waxy.
178 |
182 |
186 |
A surgeon is the glue of a purchase.
187 |
188 |
189 |
Love.
190 |
194 |
198 |
Authors often misinterpret the korean as a heavies gemini.
199 |
200 |
201 |
Woods.
202 |
206 |
210 |
Some servo tips are thought of simply as russias.
211 |
212 |
213 |
Beach.
214 |
218 |
222 |
To be more specific, the angora is a quilt.
223 |
224 |
225 |
63 |