<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fuzzies</title>
<style>
#root {
width: 800px;
height: 740px;
background: none;
position: relative;
overflow: hidden;
isolation: isolate;
}
#root .ga-fill {
position: absolute;
inset: 0;
isolation: isolate;
}
#root .ga-paint {
position: absolute;
inset: 0;
pointer-events: none;
}
#root .ga-svg {
position: absolute;
pointer-events: none;
}
#root .ga-node-20 {
background: linear-gradient(116deg, rgb(7 29 62 / 1) 0%, rgb(41 97 227 / 1) 54%, rgb(19 45 117 / 1) 100%) 393px 499px / 153px 126px no-repeat, linear-gradient(rgb(255 110 96 / 1), rgb(255 110 96 / 1)) 0px 0px / 800px 740px no-repeat;
}
#root .ga-node-19 {
transform: translate(-178.26165247465477px, -42.138568699711755px) rotate(13deg) scale(0.782608695652174, 1);
transform-origin: 50% 50%;
background: linear-gradient(-90deg, rgb(3 11 20 / 1) 47.89%, rgb(20 34 54 / 1) 69.01%, rgb(76 74 73 / 1) 83.1%, rgb(189 133 104 / 1) 97.18%, rgb(189 133 104 / 1) 99%, rgb(0 0 0 / 0) 100%) 434px 286px / 69px 247px no-repeat, radial-gradient(ellipse at 56% 41%, rgb(8 18 16 / 1) 1.14%, rgb(20 34 54 / 1) 45.74%, rgb(0 0 0 / 0) 69.89%) 435px 501px / 68px 68px no-repeat, radial-gradient(ellipse 50% 87% at 50% 13%, rgb(189 132 104 / 1) 96.31%, rgb(3 11 20 / 0) 100%) 434px 529px / 69px 44px no-repeat;
}
#root .ga-node-18 {
transform: translate(-160.6490431833214px, 37.01098934883623px) rotate(7deg) scale(0.8115942028985508, 1);
transform-origin: 50% 50%;
background: linear-gradient(-90deg, rgb(3 11 20 / 1) 47.89%, rgb(20 34 54 / 1) 69.01%, rgb(76 74 73 / 1) 83.1%, rgb(189 133 104 / 1) 97.18%, rgb(189 133 104 / 1) 99%, rgb(0 0 0 / 0) 100%) 434px 286px / 69px 247px no-repeat, radial-gradient(ellipse at 56% 41%, rgb(8 18 16 / 1) 1.14%, rgb(20 34 54 / 1) 45.74%, rgb(0 0 0 / 0) 69.89%) 435px 501px / 68px 68px no-repeat, radial-gradient(ellipse 50% 87% at 50% 13%, rgb(189 132 104 / 1) 96.31%, rgb(3 11 20 / 0) 100%) 434px 529px / 69px 44px no-repeat;
}
#root .ga-node-17 {
background: conic-gradient(from 0deg at 100% -110%, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0) 53.33%, rgb(255 247 209 / 1) 53.33%, rgb(255 237 182 / 1) 58.61%, rgb(201 160 120 / 1) 62.78%, rgb(0 0 0 / 0) 62.78%, rgb(0 0 0 / 0) 100%) 354px 636px / 214px 104px no-repeat, conic-gradient(from 0deg at 50% -190%, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0) 42.22%, rgb(217 149 121 / 1) 42.22%, rgb(245 204 146 / 1) 46.67%, rgb(255 240 187 / 1) 52.22%, rgb(255 249 220 / 1) 57.78%, rgb(0 0 0 / 0) 57.78%, rgb(0 0 0 / 0) 100%) 310px 604px / 376px 136px no-repeat, radial-gradient(ellipse 50% 50% at 50% 50%, rgb(4 12 23 / 1) 0%, rgb(10 23 41 / 1) 54.93%, rgb(38 51 68 / 1) 81.69%, rgb(167 132 109 / 1) 97.18%, rgb(167 132 109 / 1) 99%, rgb(0 0 0 / 0) 100%) 544px 510px / 60px 88px no-repeat, radial-gradient(ellipse 50% 50% at 50% 50%, rgb(4 12 23 / 1) 0%, rgb(10 23 41 / 1) 54.93%, rgb(38 51 68 / 1) 81.69%, rgb(167 132 109 / 1) 97.18%, rgb(167 132 109 / 1) 99%, rgb(0 0 0 / 0) 100%) 301px 524px / 54px 82px no-repeat, radial-gradient(ellipse 50% 50% at 50% 50%, rgb(4 12 23 / 1) 0%, rgb(10 23 41 / 1) 54.93%, rgb(38 51 68 / 1) 81.69%, rgb(167 132 109 / 1) 97.18%, rgb(167 132 109 / 1) 99%, rgb(0 0 0 / 0) 100%) 343px 519px / 54px 82px no-repeat;
}
#root .ga-node-16 {
left: 212.21113262338122px;
width: max(0px, 230.29660037851133px);
top: 304.26944444444445px;
height: max(0px, 260.79861111111114px);
}
#root .ga-node-15 {
background: radial-gradient(ellipse 50% 50% at 20% 0%, rgb(10 35 74 / 1) 53.69%, rgb(19 54 104 / 0) 100%) 274px 462px / 41px 24px no-repeat;
}
#root .ga-node-14 {
transform: translate(175.421836390198px, -84.32045797755237px) rotate(317deg);
transform-origin: 50% 50%;
background: linear-gradient(-90deg, rgb(3 11 20 / 1) 47.89%, rgb(20 34 54 / 1) 69.01%, rgb(76 74 73 / 1) 83.1%, rgb(189 133 104 / 1) 97.18%, rgb(189 133 104 / 1) 99%, rgb(0 0 0 / 0) 100%) 434px 286px / 69px 247px no-repeat, radial-gradient(ellipse at 56% 41%, rgb(8 18 16 / 1) 1.14%, rgb(20 34 54 / 1) 45.74%, rgb(0 0 0 / 0) 69.89%) 435px 501px / 68px 68px no-repeat, radial-gradient(ellipse 50% 87% at 50% 13%, rgb(189 132 104 / 1) 96.31%, rgb(3 11 20 / 0) 100%) 434px 529px / 69px 44px no-repeat;
}
#root .ga-node-13 {
transform: translate(166.7849264246713px, -30.763974847889557px) rotate(326deg);
transform-origin: 50% 50%;
background: linear-gradient(-90deg, rgb(3 11 20 / 1) 47.89%, rgb(20 34 54 / 1) 69.01%, rgb(76 74 73 / 1) 83.1%, rgb(189 133 104 / 1) 97.18%, rgb(189 133 104 / 1) 99%, rgb(0 0 0 / 0) 100%) 434px 286px / 69px 247px no-repeat, radial-gradient(ellipse at 56% 41%, rgb(8 18 16 / 1) 1.14%, rgb(20 34 54 / 1) 45.74%, rgb(0 0 0 / 0) 69.89%) 435px 501px / 68px 68px no-repeat, radial-gradient(ellipse 50% 87% at 50% 13%, rgb(189 132 104 / 1) 96.31%, rgb(3 11 20 / 0) 100%) 434px 529px / 69px 44px no-repeat;
}
#root .ga-node-12 {
transform: translate(144.1771004817232px, 8.099584552591296px) rotate(340deg);
transform-origin: 50% 50%;
background: linear-gradient(-90deg, rgb(3 11 20 / 1) 47.89%, rgb(20 34 54 / 1) 69.01%, rgb(76 74 73 / 1) 83.1%, rgb(189 133 104 / 1) 97.18%, rgb(189 133 104 / 1) 99%, rgb(0 0 0 / 0) 100%) 434px 286px / 69px 247px no-repeat, radial-gradient(ellipse at 56% 41%, rgb(8 18 16 / 1) 1.14%, rgb(20 34 54 / 1) 45.74%, rgb(0 0 0 / 0) 69.89%) 435px 501px / 68px 68px no-repeat, radial-gradient(ellipse 50% 87% at 50% 13%, rgb(189 132 104 / 1) 96.31%, rgb(3 11 20 / 0) 100%) 434px 529px / 69px 44px no-repeat;
}
#root .ga-node-11 {
transform: translate(100.18190269786498px, 15.754252335914543px) rotate(347deg);
transform-origin: 50% 50%;
background: linear-gradient(-90deg, rgb(3 11 20 / 1) 47.89%, rgb(20 34 54 / 1) 69.01%, rgb(76 74 73 / 1) 83.1%, rgb(189 133 104 / 1) 97.18%, rgb(189 133 104 / 1) 99%, rgb(0 0 0 / 0) 100%) 434px 286px / 69px 247px no-repeat, radial-gradient(ellipse at 56% 41%, rgb(8 18 16 / 1) 1.14%, rgb(20 34 54 / 1) 45.74%, rgb(0 0 0 / 0) 69.89%) 435px 501px / 68px 68px no-repeat, radial-gradient(ellipse 50% 87% at 50% 13%, rgb(189 132 104 / 1) 96.31%, rgb(3 11 20 / 0) 100%) 434px 529px / 69px 44px no-repeat;
}
#root .ga-node-10 {
transform: translate(50.38689961311212px, 10.621012067429263px) rotate(354deg);
transform-origin: 50% 50%;
background: linear-gradient(-90deg, rgb(3 11 20 / 1) 47.89%, rgb(20 34 54 / 1) 69.01%, rgb(76 74 73 / 1) 83.1%, rgb(189 133 104 / 1) 97.18%, rgb(189 133 104 / 1) 99%, rgb(0 0 0 / 0) 100%) 434px 286px / 69px 247px no-repeat, radial-gradient(ellipse at 56% 41%, rgb(8 18 16 / 1) 1.14%, rgb(20 34 54 / 1) 45.74%, rgb(0 0 0 / 0) 69.89%) 435px 501px / 68px 68px no-repeat, radial-gradient(ellipse 50% 87% at 50% 13%, rgb(189 132 104 / 1) 96.31%, rgb(3 11 20 / 0) 100%) 434px 529px / 69px 44px no-repeat;
}
#root .ga-node-9 {
background: linear-gradient(-90deg, rgb(3 11 20 / 1) 47.89%, rgb(20 34 54 / 1) 69.01%, rgb(76 74 73 / 1) 83.1%, rgb(189 133 104 / 1) 97.18%, rgb(189 133 104 / 1) 99%, rgb(0 0 0 / 0) 100%) 434px 286px / 69px 247px no-repeat, radial-gradient(ellipse at 56% 41%, rgb(8 18 16 / 1) 1.14%, rgb(20 34 54 / 1) 45.74%, rgb(0 0 0 / 0) 69.89%) 435px 501px / 68px 68px no-repeat, radial-gradient(ellipse 50% 87% at 50% 13%, rgb(189 132 104 / 1) 96.31%, rgb(3 11 20 / 0) 100%) 434px 529px / 69px 44px no-repeat;
}
#root .ga-node-8 {
transform: translate(-50.00709244455999px, -8.769680937904013px) rotate(7deg);
transform-origin: 50% 50%;
background: linear-gradient(-90deg, rgb(3 11 20 / 1) 47.89%, rgb(20 34 54 / 1) 69.01%, rgb(76 74 73 / 1) 83.1%, rgb(189 133 104 / 1) 97.18%, rgb(189 133 104 / 1) 99%, rgb(0 0 0 / 0) 100%) 434px 286px / 69px 247px no-repeat, radial-gradient(ellipse at 56% 41%, rgb(8 18 16 / 1) 1.14%, rgb(20 34 54 / 1) 45.74%, rgb(0 0 0 / 0) 69.89%) 435px 501px / 68px 68px no-repeat, radial-gradient(ellipse 50% 87% at 50% 13%, rgb(189 132 104 / 1) 96.31%, rgb(3 11 20 / 0) 100%) 434px 529px / 69px 44px no-repeat;
}
#root .ga-node-7 {
background: radial-gradient(ellipse 50% 50% at 50% 50%, rgb(132 83 52 / 1) 0%, rgb(188 113 51 / 1) 45.07%, rgb(221 155 36 / 1) 76.06%, rgb(233 173 50 / 1) 97.18%, rgb(233 173 50 / 1) 99%, rgb(0 0 0 / 0) 100%) 91px 473px / 40px 64px no-repeat, conic-gradient(from 0deg at 100% 50%, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0) 71.67%, rgb(255 248 219 / 1) 71.67%, rgb(255 244 207 / 1) 75%, rgb(239 211 149 / 1) 78.33%, rgb(0 0 0 / 0) 78.33%, rgb(0 0 0 / 0) 100%) 105px 472px / 163px 65px no-repeat, radial-gradient(ellipse 50% 73% at 50% 27%, rgb(236 255 208 / 0.56) 0%, rgb(214 255 180 / 0.24) 39.44%, rgb(214 255 180 / 0) 97.18%, rgb(214 255 180 / 0) 99%, rgb(0 0 0 / 0) 100%) 289px 103px / 251px 118px no-repeat, conic-gradient(from 0deg at 50% -500%, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0) 45.94%, rgb(6 62 51 / 1) 45.94%, rgb(38 116 71 / 1) 48.33%, rgb(127 214 124 / 1) 50.56%, rgb(189 248 166 / 1) 52.78%, rgb(246 255 214 / 1) 54.06%, rgb(0 0 0 / 0) 54.06%, rgb(0 0 0 / 0) 100%) 272px 93px / 404px 138px no-repeat, conic-gradient(from 0deg at 0% 0%, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0) 13.06%, rgb(6 57 45 / 1) 13.06%, rgb(12 82 56 / 1) 17.22%, rgb(39 113 74 / 1) 21.67%, rgb(0 0 0 / 0) 21.67%, rgb(0 0 0 / 0) 100%) 599px 229px / 153px 72px no-repeat, conic-gradient(from 0deg at 50% -200%, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0) 37.78%, rgb(7 61 50 / 1) 37.78%, rgb(20 93 64 / 1) 43.89%, rgb(56 139 80 / 1) 50.28%, rgb(168 239 153 / 1) 57.78%, rgb(234 255 200 / 1) 62.22%, rgb(0 0 0 / 0) 62.22%, rgb(0 0 0 / 0) 100%) 185px 210px / 581px 100px no-repeat;
}
#root .ga-node-6 {
left: 236.44580360367553px;
width: max(0px, 85.949435239187px);
top: 468.9847126801645px;
height: max(0px, 71.66579730042926px);
}
#root .ga-node-5 {
mask-image: url("#ga-mask-4");
mask-mode: alpha;
background: radial-gradient(ellipse 50% 50% at 50% 50%, rgb(8 81 120 / 1) 0%, rgb(7 61 92 / 1) 47.89%, rgb(6 36 59 / 1) 83.1%, rgb(3 23 37 / 1) 97.18%, rgb(3 23 37 / 1) 99%, rgb(0 0 0 / 0) 100%) 226px 460px / 104px 96px no-repeat;
}
#root .ga-node-3 {
left: 41px;
width: max(0px, 200px);
top: -61px;
height: max(0px, 573px);
}
#root .ga-node-2 {
background: linear-gradient(0deg, rgb(247 109 96 / 0) 0%, rgb(247 109 96 / 0.074074) 4.49%, rgb(247 109 96 / 0.259259) 16.59%, rgb(247 109 96 / 0.5) 34.25%, rgb(247 109 96 / 0.740741) 55.41%, rgb(247 109 96 / 0.925926) 78.01%, rgb(247 109 96 / 1) 100%) 0px 0px / 210px 273px no-repeat;
}
#root .ga-node-1 {
left: 0px;
width: max(0px, 200px);
top: 0px;
height: max(0px, 200px);
}
</style>
</head>
<body>
<div id="root">
<div class="ga-node-0 ga-fill">
<div class="ga-node-21 ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="position:absolute;inset:0;pointer-events:none" aria-hidden="true">
<defs>
<pattern id="ga-svg-3" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="rgb(255 255 255 / 1)" stroke="rgb(255 255 255 / 0)" stroke-width="2" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M80.872275 190.542014 C66.100214 178.21595 48.473197 160.729415 73.022259 149.73513 C97.57132 138.740845 145.683751 116.700792 140.142563 102.418383 C134.601375 88.135974 97.189475 72.691137 105.607819 61.740206 C114.026162 50.789275 198.862284 6.828394 198.999925 6.828394 C199.137567 6.828394 8.823511 1 8.823511 1 C8.823511 1 -1.77934 36.328031 1.701663 55.905039 C5.182666 75.482046 66.397697 92.647492 54.427311 109.68694 C42.456924 126.726388 11.554144 127.792624 10.106686 147.533563 C8.659229 167.274503 40.148095 190.505434 50.546703 194.905857 C60.945311 199.306281 95.644337 202.868077 80.872275 190.542014 Z"/>
</g>
</pattern>
<pattern id="ga-mask-4-content" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="rgb(69 168 255 / 1)" stroke="none" stroke-width="2" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M52.254586 1 C81.793558 1.020146 142.889626 28.455454 160.390318 36.391247 C177.891011 44.327042 198.483412 67.997702 199 94.116517 C198.483412 122.783977 173.855535 145.699177 158.408936 150.795308 C142.962336 155.89144 70.349535 196.598719 45.147508 198.797051 C19.94548 200.995382 9.055453 185.067474 7.196772 163.985296 C2.162193 123.332676 61.231008 98.200484 61.231008 98.200484 C61.231008 98.200484 0.716939 86.700691 1.000997 53.930474 C0.929031 9.366904 30.28253 5.667731 52.254586 1 Z"/>
</g>
</pattern>
<mask id="ga-mask-4" maskUnits="objectBoundingBox" maskContentUnits="userSpaceOnUse" x="0" y="0" width="1" height="1" style="mask-type:alpha">
<g style="transform: translate(236.44580360367553px, 468.9847126801645px) scale(calc(max(0, 85.949435239187) / max(0.000001, 800)), calc(max(0, 71.66579730042926) / max(0.000001, 740))); transform-box: view-box; opacity: 1;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-mask-4-content)"/>
</svg>
</g>
</mask>
<pattern id="ga-svg-16" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<g fill="rgb(41 97 227 / 1)" stroke="rgb(255 255 255 / 0)" stroke-width="2" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M187.415754 199 L66.994958 195.624551 C66.994958 195.624551 53.300661 185.202237 53.257239 185.202237 C53.213816 185.202237 55.219382 121.264013 55.219382 121.264013 C55.219382 121.264013 9.180926 122.262149 9.222991 122.262149 C9.265056 122.262149 3.75857 122.972707 1.088101 115.818 C-1.582368 108.663294 57.343002 53.320064 57.385068 53.320064 C57.427133 53.320064 44.880812 39.325789 44.880812 39.325789 C44.880812 39.325789 41.518301 35.298496 41.168209 30.77513 C40.818117 26.251764 60.72044 1 60.72044 1 L199 2.815338 Z"/>
</g>
</pattern>
</defs>
</svg>
</div>
<div class="ga-node-20 ga-fill"></div>
<div class="ga-node-19 ga-fill"></div>
<div class="ga-node-18 ga-fill"></div>
<div class="ga-node-17 ga-fill"></div>
<div class="ga-node-16 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-16)"/>
</svg>
</div>
<div class="ga-node-15 ga-fill"></div>
<div class="ga-node-14 ga-fill"></div>
<div class="ga-node-13 ga-fill"></div>
<div class="ga-node-12 ga-fill"></div>
<div class="ga-node-11 ga-fill"></div>
<div class="ga-node-10 ga-fill"></div>
<div class="ga-node-9 ga-fill"></div>
<div class="ga-node-8 ga-fill"></div>
<div class="ga-node-7 ga-fill"></div>
<div class="ga-node-6 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-mask-4-content)"/>
</svg>
</div>
<div class="ga-node-5 ga-fill"></div>
<div class="ga-node-3 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<rect style="x: 0px; width: 200px; y: 0px; height: 200px;" fill="url(#ga-svg-3)"/>
</svg>
</div>
<div class="ga-node-2 ga-fill"></div>
<div class="ga-node-1 ga-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="noise">
<pattern id="ga-svg-1" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<filter id="ga-svg-1-content" x="0" y="0" width="100%" height="100%">
<feTurbulence type="turbulence" baseFrequency="0.78" numOctaves="1" seed="24" stitchTiles="stitch"/>
</filter>
<rect width="100%" height="100%" filter="url(#ga-svg-1-content)"/>
</svg>
</pattern>
<rect style="x: calc(-200px * 0 / max(0.000001, 200)); width: calc(200px * 800 / max(0.000001, 200)); y: calc(-200px * 0 / max(0.000001, 200)); height: calc(200px * 740 / max(0.000001, 200));" fill="url(#ga-svg-1)"/>
</svg>
</div>
</div>
</div>
</body>
</html>Hank Washington's "Fuzzies" design on Behance (https://www.behance.net/gallery/84818869/Fuzzies-vol-1) , Rebuilt as individually editable CSS-gradient layers.