{"id":239398,"date":"2016-03-18T06:18:12","date_gmt":"2016-03-18T13:18:12","guid":{"rendered":"http:\/\/css-tricks.com\/?p=239398"},"modified":"2016-03-18T06:18:12","modified_gmt":"2016-03-18T13:18:12","slug":"resolution-independent-pixel-illustrations","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/resolution-independent-pixel-illustrations\/","title":{"rendered":"Resolution Independent Pixel Illustrations"},"content":{"rendered":"<p>Marcus Bl\u00e4ttermann has made a series of beautiful illustrations that adapt to the size of the browser window (and your cursor position). Make sure to check these illustrations out on a big screen to get the full effect.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Marcus Bl\u00e4ttermann has made a series of beautiful illustrations that adapt to the size of the browser window (and your [&hellip;]<\/p>\n","protected":false},"author":223806,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[17],"tags":[644,642,643],"class_list":["post-239398","post","type-post","status-publish","format-standard","hentry","category-links","tag-art","tag-pixel","tag-rwd"],"acf":{"link_source":"","link_url":"","link_icon":null,"show_toc":"No"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":269385,"url":"https:\/\/css-tricks.com\/how-to-create-a-component-library-from-svg-illustrations\/","url_meta":{"origin":239398,"position":0},"title":"How to Create a Component Library From SVG Illustrations","author":"Graeme Fulton","date":"April 12, 2018","format":false,"excerpt":"I\u2019ve recently published my first ever open source npm package! It makes SVG illustrations from unDraw into customizable React components. Here\u2019s a GIF that shows what I mean: What\u2019s unDraw? While unDraw is still fairly new, its open source nature means that it\u2019s being used by a range of products\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/react-svg-component-featured.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/react-svg-component-featured.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/react-svg-component-featured.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/react-svg-component-featured.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/react-svg-component-featured.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":6536,"url":"https:\/\/css-tricks.com\/illustrators-i-like\/","url_meta":{"origin":239398,"position":1},"title":"Illustrators I Like","author":"Chris Coyier","date":"June 29, 2010","format":false,"excerpt":"If there is one (non-superpower) skill I wish I could acquire without having to spend thousands of hours practicing, it's illustration. I took a bunch of drawing in college but I was never that great and I've let myself go out of practice. I look at a lot of illustrators\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2010\/06\/illustrator-johns2.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2010\/06\/illustrator-johns2.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2010\/06\/illustrator-johns2.jpg?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":251083,"url":"https:\/\/css-tricks.com\/websites-like-february-2017\/","url_meta":{"origin":239398,"position":2},"title":"Websites We Like: February 2017","author":"Robin Rendle","date":"February 15, 2017","format":false,"excerpt":"It has been a while since we've taken stock of all the beautiful websites out there. Here's our favorites from the past couple of weeks! Fuzzco Who says the web should scroll in one direction? Not the creative agency Fuzzco which on their homepage lets you navigate the page in\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":244794,"url":"https:\/\/css-tricks.com\/fun-times-css-pixel-art\/","url_meta":{"origin":239398,"position":3},"title":"Fun Times With CSS Pixel Art","author":"Geoff Graham","date":"August 30, 2016","format":false,"excerpt":"Pixel art is one of those lost art forms that have been overshadowed by super crisp, high resolutions images. I stumbled on some pixel art while surfing around CodePen and it reminded me how awesome it is. See the Pen Pikachu pixel css by Devi Krisdiansyah (@agilBAKA) on CodePen. How\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":312476,"url":"https:\/\/css-tricks.com\/diverse-illustration\/","url_meta":{"origin":239398,"position":4},"title":"Diverse Illustration","author":"Chris Coyier","date":"June 7, 2020","format":false,"excerpt":"Hey gang, #BlackLivesMatter. One tiny way I thought we could help here on this site, aside from our efforts as individuals, is to highlight some design resources that are both excellent and feature Black people. Representation matters. Here's one. You know Pablo Stanley? Pablo is a wonderful illustrator who combines\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/5e789a843ea5b8630fd5a71e_00001-01-p-1080.png?fit=1080%2C915&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/5e789a843ea5b8630fd5a71e_00001-01-p-1080.png?fit=1080%2C915&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/5e789a843ea5b8630fd5a71e_00001-01-p-1080.png?fit=1080%2C915&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/5e789a843ea5b8630fd5a71e_00001-01-p-1080.png?fit=1080%2C915&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/5e789a843ea5b8630fd5a71e_00001-01-p-1080.png?fit=1080%2C915&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":317023,"url":"https:\/\/css-tricks.com\/making-lil-me\/","url_meta":{"origin":239398,"position":5},"title":"Making lil\u2019 me","author":"Robin Rendle","date":"July 15, 2020","format":false,"excerpt":"Cassie Evans made a lovely illustration of herself and then used Greensock to add a flourish of animations to polish it off. Cassie wrote a series of posts about how she did it: In this post we'll cover how to get values from the mouse movement and plug them into\u2026","rel":"","context":"In &quot;Links&quot;","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/cassie-evans-self-illustration.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/cassie-evans-self-illustration.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/cassie-evans-self-illustration.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/cassie-evans-self-illustration.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/cassie-evans-self-illustration.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/239398","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=239398"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/239398\/revisions"}],"predecessor-version":[{"id":239458,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/239398\/revisions\/239458"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=239398"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=239398"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=239398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}