{"id":307020,"date":"2020-04-21T14:01:43","date_gmt":"2020-04-21T21:01:43","guid":{"rendered":"https:\/\/css-tricks.com\/?p=307020"},"modified":"2020-04-21T14:01:44","modified_gmt":"2020-04-21T21:01:44","slug":"fake-code","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/fake-code\/","title":{"rendered":"Fake Code"},"content":{"rendered":"\n<p>Here&#8217;s <a href=\"http:\/\/knutsynstad.com\/fauxcode\/\" rel=\"noopener\">a fun little idea<\/a> from Knut Synstad. You give it the URL of a GitHub Gist and it converts the Gist into grayscale rounded blobs (SVG) that sorta look like code if you squint. Maybe fun for interesting dynamic backgrounds or for whatever you might use code-looking stock art for. <\/p>\n\n\n\n<!--more-->\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1300\" height=\"592\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/Screen-Shot-2020-04-17-at-9.36.27-AM.png?fit=1024%2C466&amp;ssl=1\" alt=\"SVG blobs that look like code.\" class=\"wp-image-307021\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/Screen-Shot-2020-04-17-at-9.36.27-AM.png?w=1300&amp;ssl=1 1300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/Screen-Shot-2020-04-17-at-9.36.27-AM.png?resize=300%2C137&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/Screen-Shot-2020-04-17-at-9.36.27-AM.png?resize=1024%2C466&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/Screen-Shot-2020-04-17-at-9.36.27-AM.png?resize=768%2C350&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/Screen-Shot-2020-04-17-at-9.36.27-AM.png?resize=1000%2C455&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>It reminded me of Christian Naths&#8217;s <a href=\"https:\/\/github.com\/christiannaths\/Redacted-Font\" rel=\"noopener\">Redacted<\/a> font, which turns every glyph into a box or squiggles. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"852\" height=\"450\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/redacted-1.png?resize=852%2C450&#038;ssl=1\" alt=\"\" class=\"wp-image-307023\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/redacted-1.png?w=852&amp;ssl=1 852w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/redacted-1.png?resize=300%2C158&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/redacted-1.png?resize=768%2C406&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"852\" height=\"516\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/redacted-2.png?resize=852%2C516&#038;ssl=1\" alt=\"\" class=\"wp-image-307024\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/redacted-2.png?w=852&amp;ssl=1 852w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/redacted-2.png?resize=300%2C182&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/redacted-2.png?resize=768%2C465&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>And if you need some actual totally fake code, Harry Parton&#8217;s Pen is nice for that:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_idDGK\" src=\"\/\/codepen.io\/anon\/embed\/idDGK?height=450&amp;theme-id=1&amp;slug-hash=idDGK&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed idDGK\" title=\"CodePen Embed idDGK\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Here&#8217;s a fun little idea from Knut Synstad. You give it the URL of a GitHub Gist and it converts the Gist into grayscale rounded blobs (SVG) that sorta look like code if you squint. Maybe fun for interesting dynamic backgrounds or for whatever you might use code-looking stock art for.<\/p>\n","protected":false},"author":3,"featured_media":307021,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_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,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[14052,14051,469],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/Screen-Shot-2020-04-17-at-9.36.27-AM.png?fit=1300%2C592&ssl=1","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/307020"}],"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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=307020"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/307020\/revisions"}],"predecessor-version":[{"id":307070,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/307020\/revisions\/307070"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/307021"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=307020"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=307020"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=307020"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}