{"componentChunkName":"component---src-templates-edit-artwork-js","path":"/artwork/zario","result":{"data":{"artworksJson":{"id":"0e590d60-b1d1-52e5-9001-6d83d31c01ea","name":"Zario","description":"Crisp recreation of the iconic video game character.","grid":{"default":"16x1","options":null},"palette":["#FFFFFF","#FF513C","#232529","#FCD800","#3EECFF","#FFFFFF"],"slug":"zario","frequency":null,"circularity":null,"shadow":null,"roundedCorners":null,"customText":{"default":"Z","minLength":0,"replace":"${hatLetter}"},"code":{"style":"--initial:'${hatLetter}'; --randomColor: @p(var(--color1), var(--color2), var(--color3), var(--color4)); --rule: ( /* Hat */ @nth(1) { width: 52%; height:28%; position:absolute; top: 20%; left:24%; border-radius:50% 50% 50% 50% / 65% 65% 35% 35%; -webkit-box-shadow: inset 0 -3em 3.3em rgba(0,0,0,0.24); box-shadow: inset 0 -3em 3.3em rgba(0,0,0,0.24); background-color:var(--color1); overflow:hidden; z-index: @i(); } /* Hat text */ @nth(2) { width:16%; height:10%; left:42%; top:26%; position:absolute; border-radius:100%; background:var(--color5); z-index: @i(); :before { content:var(--initial); color:var(--color1); font-family: 'Helvetica', 'Helvetica Neue', Arial, sans-serif; font-weight:bold; text-transform:uppercase; font-size:1.6em; } } /* Hat lip */ @nth(3) { height:25.33%; width:44%; position:absolute; top: 34%; transform: translate(-50%,0); margin: 0 0 0 50%; border-radius:50% 50% 50% 50% / 30% 30% 70% 70%; background: var(--color1); opacity:1; overflow:hidden; z-index: @i(); :after { content:''; height:100%; width:100%; top:12%; border-radius:50% 50% 50% 50% / 40% 40% 60% 60%; position:absolute; background:rgba(0,0,0,0.24); z-index:999999; }; } /* Face */ @nth(4) { height:25.33%; width: 42%; position:absolute; top: 38%; transform: translate(-50%,0); margin: 0 0 0 50%; border-radius:50% 50% 50% 50% / 36% 36% 64% 64%; background-color:var(--color0); opacity:1; overflow:hidden; z-index: @i(); } /* Left moustache */ @nth(5) { width:18%; height:10%; @shape: bicorn; transform:rotate(180deg); position:absolute; left:32%; top:51%; background:var(--color2); z-index: @i(); } /* Right moustache */ @nth(6) { width:18%; height:10%; @shape: bicorn; transform:rotate(180deg); position:absolute; left:50%; top:51%; background:var(--color2); z-index: @i(); } /* Middle left moustache */ @nth(7) { width:8%; height:3%; left:43%; top:56%; position:absolute; border-bottom-left-radius: 320px; border-bottom-right-radius: 320px; background:var(--color2); z-index: @i(); } /* Middle right moustache */ @nth(8) { width:8%; height:3%; left:49%; top:56%; position:absolute; border-bottom-left-radius: 320px; border-bottom-right-radius: 320px; background:var(--color2); z-index: @i(); } /* Nose */ @nth(9) { width:16%; height:10%; left:42%; top:47%; position:absolute; border-radius:100%; background:var(--color0); -webkit-box-shadow:inset -20px -20px 10px rgba(0,0,0,.1); box-shadow:inset -20px -20px 10px rgba(0,0,0,.1); z-index: @i(); } /* Bow tie */ @nth(10) { width:18%; height:12%; clip-path: polygon(50% 50%, 100% 16%, 100% 84%, 50% 50%, 0 84%, 0 16%); transform:rotate(180deg); position:absolute; left:41%; top:61.6%; background: linear-gradient(90deg, var(--color1) 50%, var(--color4) 50%); z-index: @i(); } /* Button 1 */ @nth(11) { width:3%; height:2%; left:48.5%; top:66.8%; position:absolute; @shape: circle; background:var(--color3); z-index: @i(); } /* Button 2 */ @nth(12) { width:3%; height:2%; left:48.5%; top:72%; position:absolute; @shape: circle; background:var(--color3); z-index: @i(); } /* Button 3 */ @nth(13) { width:3%; height:2%; left:48.5%; top:77%; position:absolute; @shape: circle; background:var(--color3); z-index: @i(); } /* Top polygon shape */ @nth(14) { width:30px; height:30px; @shape:@pick(circle, rhombus, star); background:var(--randomColor); top:5%; left:@rand(5%,80%); position:absolute; -webkit-transition: ease @rand(200ms, 600ms); transition: ease @rand(200ms, 600ms); } /* Right polygon shape */ @nth(15) { width:60px; height:60px; @shape:@pick(circle, rhombus, star); background:var(--randomColor); top:@rand(40%,80%);; right:-30px; position:absolute; -webkit-transition: ease @rand(200ms, 600ms); transition: ease @rand(200ms, 600ms); } /* Left polygon shape */ @nth(16) { width:30px; height:30px; @shape:@pick(circle, rhombus, star); transform:rotate(@pick(0, 45deg, 90deg, 135deg, 180deg)); background:var(--randomColor); bottom:@rand(0,40%); left:5%; position:absolute; -webkit-transition: ease @rand(200ms, 600ms); transition: ease @rand(200ms, 600ms); } -webkit-transition: background ease @rand(200ms, 600ms); transition: background ease @rand(200ms, 600ms); ); }","doodle":":doodle { overflow:hidden; text-align:center; box-sizing:border-box } :container { background: var(--color0); overflow:hidden; }"}}},"pageContext":{"id":"0e590d60-b1d1-52e5-9001-6d83d31c01ea"}}}