|
metafizzy.co
|
<span class="site-header__sponsor__brought">Brought to you by</span>
<svg class="mfzy-logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 144 144" width="36" height="36">
<title>Metafizzy logo</title>
<defs>
<path id="mfzy-logo__body" d="M120 28a12 12 0 0 0-24 0c0 2 0 3 0 4.5
a 37 37 0 0 0 -12.6-8.4 a 12 12 0 1 0-22.8-.7 A 44 44 0 0 0 40.3 35.3
A 12 12 0 1 0 32 56h1.1 L 43.6 73.4 L 29.8 81.7 a12 12 0 1 0 12.3 20.6
l 12.6-7.5 a 20 20 0 0 1-.8 9.4l-5.3 16 a 12 12 0 1 0 22.8 7.6v-.3
l 28.7-17.2 a 12 12 0 0 0 5.2-6.5 l 4-12 A 55 55 0 0 0 112 76
a 73 73 0 0 0-1.1-12.4 C 115 57 120 46 120 28Z"></path>
<path id="mfzy-logo__eye" transform="rotate(-31)" d="M 0 6.8 a 6.8 6.8 0 0 1 13.6 0 c 0 3.9 -3 0 -6.8 0 s -6.8 3.9 -6.8 0Z"></path>
<clippath id="mfzy-logo__body-clip">
<use xlink:href="#mfzy-logo__body"></use>
</clippath>
</defs>
<use class="mfzy-logo__body-outline" xlink:href="#mfzy-logo__body" fill="#333" stroke="#333" stroke-width="16"></use>
<use class="mfzy-logo__body-fill" xlink:href="#mfzy-logo__body"></use>
<g class="mfzy-logo__stripes" clip-path="url(#mfzy-logo__body-clip)">
<rect fill="#E62" x="16" width="120" height="138"></rect>
<path fill="#C25" d="M96 24L16 72V0h80v24z"></path>
<path fill="#EA0" d="M116 70L16 130v-26l95-57 5 23z"></path>
<path fill="#19F" d="M136 138H16v-8l120-72v80z"></path>
</g>
<path class="mfzy-logo__cut-ins" stroke="#333" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="8" d="M72 18c26 0 44 28 44 58
M 50.2 103 a16 16 0 0 0 .5 -8
M92 98c-2 2-8.5 6-8.5 6l-8.4 25.1"></path>
<use class="mfzy-logo__feature" xlink:href="#mfzy-logo__eye" fill="#333" transform="translate(53.5 57.5)"></use>
<use class="mfzy-logo__feature" xlink:href="#mfzy-logo__eye" fill="#333" transform="translate(79.3 42)"></use>
<ellipse class="mfzy-logo__snout" fill="white" cx="42" cy="98" rx="14" ry="10" transform="rotate(-31)"></ellipse>
<path class="mfzy-logo__feature mfzy-logo__nose" fill="#333" transform="rotate(-31)" d="M40 91 h 5.4 a 3 3 0 0 1 1.5 5.6 l -2.7 1.5 a 3 3 0 0 1 -3 0 l -2.7 -1.5
a 3 3 0 0 1 1.5 -5.6Z"></path>
</svg>
<svg class="mfzy-wordmark" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 280 80" fill="none" stroke="#333" width="140" height="40">
<g transform="skewX(-18)">
<path stroke-width="8" d="M38 20h6c4 0 7 2 9 6l9 18l12-24h2v22
a20 22 0 0 0 20 22M48 22v28a12 15 0 0 1-24 0M98 44a6 6 0 0 0 0-12h-2
a8 10 0 0 0 0 20h14a8 10 0 0 0 8-10M118 12v30a8 10 0 0 0 16 0M150 36
q-4-4-8-4a8 10 0 1 0 8 10m0-14v14a8 10 0 0 0 8 10M184 20a9 9 0 0 0-18 0
v34a8 10 0 0 1-8 10M158 32h24v24M190 32h18l-12 20h18M216 32h18l-12 20h18
a8 10 0 0 0 8-10m0-14v14a8 10 0 0 0 16 0m0-14v38a6 6 0 0 1-12 0
c0-12 32-8 32-32c0-10-6-16-14-16M108 24h24a6 6 0 0 0 6-6M102 38h-4"></path>
<g stroke-width="6">
<circle cx="38" cy="22" r="3"></circle>
<circle cx="182" cy="20" r="3"></circle>
<circle cx="269" cy="20" r="3"></circle>
</g>
</g>
</svg>
|
|
codepen.io
|
<svg class="codepen-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linejoin="round">
<path d="M3 9l9-6l9 6v6l-9 6l-9-6zm0 0l9 6l9-6m0 6l-9-6l-9 6m9-12v6m0 6v6"></path>
</svg>
<span class="edit-codepen__text">Edit this demo on CodePen</span>
|
|
codepen.io
|
<svg class="codepen-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linejoin="round">
<path d="M3 9l9-6l9 6v6l-9 6l-9-6zm0 0l9 6l9-6m0 6l-9-6l-9 6m9-12v6m0 6v6"></path>
</svg>
<span class="edit-codepen__text">Edit this demo on CodePen</span>
|
|
codepen.io
|
<svg class="codepen-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linejoin="round">
<path d="M3 9l9-6l9 6v6l-9 6l-9-6zm0 0l9 6l9-6m0 6l-9-6l-9 6m9-12v6m0 6v6"></path>
</svg>
<span class="edit-codepen__text">Edit this demo on CodePen</span>
|
|
codepen.io
|
<svg class="codepen-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linejoin="round">
<path d="M3 9l9-6l9 6v6l-9 6l-9-6zm0 0l9 6l9-6m0 6l-9-6l-9 6m9-12v6m0 6v6"></path>
</svg>
<span class="edit-codepen__text">Edit this demo on CodePen</span>
|
|
codepen.io
|
<svg class="codepen-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linejoin="round">
<path d="M3 9l9-6l9 6v6l-9 6l-9-6zm0 0l9 6l9-6m0 6l-9-6l-9 6m9-12v6m0 6v6"></path>
</svg>
<span class="edit-codepen__text">Edit this demo on CodePen</span>
|
|
codepen.io
|
<svg class="codepen-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linejoin="round">
<path d="M3 9l9-6l9 6v6l-9 6l-9-6zm0 0l9 6l9-6m0 6l-9-6l-9 6m9-12v6m0 6v6"></path>
</svg>
<span class="edit-codepen__text">Edit this demo on CodePen</span>
|
|
codepen.io
|
<svg class="codepen-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linejoin="round">
<path d="M3 9l9-6l9 6v6l-9 6l-9-6zm0 0l9 6l9-6m0 6l-9-6l-9 6m9-12v6m0 6v6"></path>
</svg>
<span class="edit-codepen__text">Edit this demo on CodePen</span>
|
|
codepen.io
|
<svg class="codepen-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linejoin="round">
<path d="M3 9l9-6l9 6v6l-9 6l-9-6zm0 0l9 6l9-6m0 6l-9-6l-9 6m9-12v6m0 6v6"></path>
</svg>
<span class="edit-codepen__text">Edit this demo on CodePen</span>
|
|
codepen.io
|
<svg class="codepen-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linejoin="round">
<path d="M3 9l9-6l9 6v6l-9 6l-9-6zm0 0l9 6l9-6m0 6l-9-6l-9 6m9-12v6m0 6v6"></path>
</svg>
<span class="edit-codepen__text">Edit this demo on CodePen</span>
|
|
codepen.io
|
<svg class="codepen-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linejoin="round">
<path d="M3 9l9-6l9 6v6l-9 6l-9-6zm0 0l9 6l9-6m0 6l-9-6l-9 6m9-12v6m0 6v6"></path>
</svg>
<span class="edit-codepen__text">Edit this demo on CodePen</span>
|
|
codepen.io
|
<svg class="codepen-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linejoin="round">
<path d="M3 9l9-6l9 6v6l-9 6l-9-6zm0 0l9 6l9-6m0 6l-9-6l-9 6m9-12v6m0 6v6"></path>
</svg>
<span class="edit-codepen__text">Edit this demo on CodePen</span>
|
|
codepen.io
|
<svg class="codepen-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linejoin="round">
<path d="M3 9l9-6l9 6v6l-9 6l-9-6zm0 0l9 6l9-6m0 6l-9-6l-9 6m9-12v6m0 6v6"></path>
</svg>
<span class="edit-codepen__text">Edit this demo on CodePen</span>
|
|
isotope.metafizzy.co
|
<h3 class="showcase__product__title">Isotope</h3>
<p class="showcase__product__description">Filter & sort magical layouts</p>
|
|
isotope.metafizzy.co
|
View Isotope
|
|
flickity.metafizzy.co
|
<h3 class="showcase__product__title">Flickity</h3>
<p class="showcase__product__description">Touch, responsive, flickable carousels</p>
|
|
flickity.metafizzy.co
|
View Flickity
|
|
infinite-scroll.com
|
<h3 class="showcase__product__title">Infinite Scroll</h3>
<p class="showcase__product__description">Automatically add next page</p>
|
|
infinite-scroll.com
|
View Infinite Scroll
|
|
packery.metafizzy.co
|
<h3 class="showcase__product__title">Packery</h3>
<p class="showcase__product__description">Gap-less, draggable layouts</p>
|
|
packery.metafizzy.co
|
View Packery
|
