{"id":55510,"date":"2021-06-23T18:01:09","date_gmt":"2021-06-23T10:01:09","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=55510"},"modified":"2022-08-02T18:40:34","modified_gmt":"2022-08-02T10:40:34","slug":"css-doode-framework","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-doode-framework\/","title":{"rendered":"Draw Custom Patterns in CSS With CSS-Doodle Web Component"},"content":{"rendered":"<p>With a name like <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/css-doodle\/css-doodle\">CSS Doodle<\/a> you might not know what to expect.<\/p>\n<p>But this is a really cool web component that lets you build some pretty awesome stuff. It works on the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/w3c.github.io\/webcomponents\/spec\/shadow\/\">shadow DOM<\/a> and lets you customize different shapes, figures, and patterns with CSS.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/css3-animation-tools\/\" class=\"ref-block__link\" title=\"Read More: 10 CSS3 Animation Tools You Should Bookmark\" rel=\"bookmark\"><span class=\"screen-reader-text\">10 CSS3 Animation Tools You Should Bookmark<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css3-animation-tools.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-25432 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css3-animation-tools.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">10 CSS3 Animation Tools You Should Bookmark<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tAs people tend to more easily perceive things that move, smartly used animations can enhance the user experience...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<p>This also works with <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/css3-2d-transformation\/\" rel=\"noopener\">2D transforms<\/a> which are very powerful CSS3 properties when used right. This makes CSS Doodle one of the coolest and most aesthetically pleasing web components on the Internet.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/css-doodle\/css-doodle\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-doode-framework\/01-css-doodle-draw-library.jpg\" alt=\"CSS Doodle webapp\" width=\"1000\" height=\"603\"><\/a><\/figure>\n<p>To get started you just add the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/raw.githubusercontent.com\/yuanchuan\/css-doodle\/master\/css-doodle.min.js\">main script<\/a> into your page\u2019s header. There\u2019s also directions on the CSS Doodle website to help you get up & running.<\/p>\n<p>It has some pretty crazy syntax which you\u2019ll find lower on the main page.<\/p>\n<p>This relies on various custom selectors that are defined inside the JS file. So when you write CSS Doodle code it\u2019s being parsed <strong>through JavaScript<\/strong>, although you don\u2019t need to know any JS yourself.<\/p>\n<p>Here\u2019s a sample snippet from the main page showing off a simple CSS Doodle.<\/p>\n<pre>&lt;css-doodle&gt;\r\n  :doodle {\r\n    @grid: 11 \/ 100vmax;\r\n    background: #0a0c27;\r\n  }\r\n  --n: calc(\r\n      @abs(@abs(@row() - 6)\r\n    + @abs(@col() - 6) - 11) \/ 11\r\n  );\r\n  margin: -10%;\r\n  transform: rotate(45deg);\r\n  border: 1px solid;\r\n  border-color: hsla(\r\n    calc(var(--n) * 360 + 120), 60%, 68%,\r\n    var(--n)\r\n  );\r\n&lt;\/css-doodle&gt;<\/pre>\n<p>You can design your patterns with grids, custom panels inside a grid, or with randomized settings. Plus it has tons of pre-built shapes you can add into your geometric designs.<\/p>\n<p>The whole thing is super easy to edit and it\u2019s really entertaining.<\/p>\n<p>Check out <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/yuanchuan\/pen\/KyJvmo\">this example<\/a> from CodePen for just one basic demo:<\/p>\n<p><iframe height=\"500\" scrolling=\"no\" title=\"Dashed-border\" src=\"https:\/\/codepen.io\/yuanchuan\/embed\/KyJvmo\/?height=500&theme-id=0&default-tab=html,result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\"><\/iframe><\/p>\n<p>If you wanna see more there\u2019s an <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/collection\/XyVkpQ\/\">entire collection<\/a> on CodePen to browse through.<\/p>\n<p>Or you can dig into the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/yuanchuan\/css-doodle\">main GitHub repo<\/a> if you\u2019re curious about the different settings, selectors, or animation styles.<\/p>\n<p>Maybe not the most practical web component but it is a fun library to work with.<\/p>","protected":false},"excerpt":{"rendered":"<p>With a name like CSS Doodle you might not know what to expect. But this is a really cool web component that lets you build some pretty awesome stuff. It works on the shadow DOM and lets you customize different shapes, figures, and patterns with CSS. This also works with 2D transforms which are very&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[4109,2902],"topic":[],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Draw Custom Patterns in CSS With CSS-Doodle Web Component - Hongkiat<\/title>\n<meta name=\"description\" content=\"With a name like CSS Doodle you might not know what to expect. But this is a really cool web component that lets you build some pretty awesome stuff. It\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/css-doode-framework\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Draw Custom Patterns in CSS With CSS-Doodle Web Component\" \/>\n<meta property=\"og:description\" content=\"With a name like CSS Doodle you might not know what to expect. But this is a really cool web component that lets you build some pretty awesome stuff. It\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-doode-framework\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-23T10:01:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-02T10:40:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css-doode-framework\/01-css-doodle-draw-library.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-doode-framework\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-doode-framework\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Draw Custom Patterns in CSS With CSS-Doodle Web Component\",\"datePublished\":\"2021-06-23T10:01:09+00:00\",\"dateModified\":\"2022-08-02T10:40:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-doode-framework\\\/\"},\"wordCount\":285,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-doode-framework\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-doode-framework\\\/01-css-doodle-draw-library.jpg\",\"keywords\":[\"CSS Frameworks\",\"CSS Tools\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-doode-framework\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-doode-framework\\\/\",\"name\":\"Draw Custom Patterns in CSS With CSS-Doodle Web Component - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-doode-framework\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-doode-framework\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-doode-framework\\\/01-css-doodle-draw-library.jpg\",\"datePublished\":\"2021-06-23T10:01:09+00:00\",\"dateModified\":\"2022-08-02T10:40:34+00:00\",\"description\":\"With a name like CSS Doodle you might not know what to expect. But this is a really cool web component that lets you build some pretty awesome stuff. It\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-doode-framework\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-doode-framework\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-doode-framework\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-doode-framework\\\/01-css-doodle-draw-library.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-doode-framework\\\/01-css-doodle-draw-library.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-doode-framework\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Draw Custom Patterns in CSS With CSS-Doodle Web Component\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Draw Custom Patterns in CSS With CSS-Doodle Web Component - Hongkiat","description":"With a name like CSS Doodle you might not know what to expect. But this is a really cool web component that lets you build some pretty awesome stuff. It","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/css-doode-framework\/","og_locale":"en_US","og_type":"article","og_title":"Draw Custom Patterns in CSS With CSS-Doodle Web Component","og_description":"With a name like CSS Doodle you might not know what to expect. But this is a really cool web component that lets you build some pretty awesome stuff. It","og_url":"https:\/\/www.hongkiat.com\/blog\/css-doode-framework\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2021-06-23T10:01:09+00:00","article_modified_time":"2022-08-02T10:40:34+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css-doode-framework\/01-css-doodle-draw-library.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css-doode-framework\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-doode-framework\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Draw Custom Patterns in CSS With CSS-Doodle Web Component","datePublished":"2021-06-23T10:01:09+00:00","dateModified":"2022-08-02T10:40:34+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-doode-framework\/"},"wordCount":285,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-doode-framework\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-doode-framework\/01-css-doodle-draw-library.jpg","keywords":["CSS Frameworks","CSS Tools"],"articleSection":["Toolkit"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-doode-framework\/","url":"https:\/\/www.hongkiat.com\/blog\/css-doode-framework\/","name":"Draw Custom Patterns in CSS With CSS-Doodle Web Component - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-doode-framework\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-doode-framework\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-doode-framework\/01-css-doodle-draw-library.jpg","datePublished":"2021-06-23T10:01:09+00:00","dateModified":"2022-08-02T10:40:34+00:00","description":"With a name like CSS Doodle you might not know what to expect. But this is a really cool web component that lets you build some pretty awesome stuff. It","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-doode-framework\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-doode-framework\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css-doode-framework\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css-doode-framework\/01-css-doodle-draw-library.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-doode-framework\/01-css-doodle-draw-library.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-doode-framework\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Draw Custom Patterns in CSS With CSS-Doodle Web Component"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-erk","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/55510","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=55510"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/55510\/revisions"}],"predecessor-version":[{"id":61101,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/55510\/revisions\/61101"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=55510"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=55510"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=55510"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=55510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}