{"id":23279,"date":"2015-02-11T21:01:39","date_gmt":"2015-02-11T13:01:39","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=23279"},"modified":"2025-04-04T02:02:34","modified_gmt":"2025-04-03T18:02:34","slug":"css-heart-shape","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-heart-shape\/","title":{"rendered":"How to Create a Heart Shape with CSS"},"content":{"rendered":"<p>CSS3 has greatly expanded what we can achieve on websites using just HTML and CSS. You can explore <a href=\"https:\/\/www.hongkiat.com\/blog\/coding-graphics-with-css3\/\">remarkable examples<\/a> we\u2019ve previously highlighted. However, let\u2019s start with the basics rather than jumping into more complex designs that could be overwhelming.<\/p>\n<p>We will begin with a simple project to help you grasp <strong>shapes and positioning in CSS<\/strong>, setting a foundation for more intricate work. With Valentine\u2019s Day approaching, what better start than crafting a heart shape using HTML and 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\/built-with-css\/\" class=\"ref-block__link\" title=\"Read More: 20 Cool Stuff Built Using CSS\" rel=\"bookmark\"><span class=\"screen-reader-text\">20 Cool Stuff Built Using CSS<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/built-with-css.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-22535 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/built-with-css.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">20 Cool Stuff Built Using CSS<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tContrary to popular belief, CSS is not only used to provide basic style for a web page in...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>The Basics<\/h2>\n<p>Creating new shapes in CSS often involves combining simpler shapes like rectangles and circles. When looking at a heart shape, you can see it consists of <strong>two circles and a rectangle<\/strong>. HTML elements are typically square or rectangular, but with CSS3\u2019s border-radius, we can transform these rectangles into circles effortlessly.<\/p>\n<p>Start by adding a <code>&lt;div&gt;<\/code> element to serve as the base of our heart shape.<\/p>\n<pre>\r\n&lt;div class=\"heart-shape\"&gt;&lt;\/div&gt;\r\n<\/pre>\n<p>Next, turn it into a square by setting equal width and height. Choose any background color you like.<\/p>\n<pre>\r\n.heart-shape {\r\n  position: relative;\r\n  width: 200px;\r\n  height: 200px;\r\n  background-color: rgba(250,184,66, 0.8);\r\n}\r\n<\/pre>\n<p>Now, let\u2019s create the circles.<\/p>\n<p>Instead of adding new elements, we\u2019ll use the pseudo-elements, <code>:before<\/code> and <code>:after<\/code>. Set up the <code>:before<\/code> pseudo-element as our first circle by giving it equal width and height, just like the div, then transforming it into a circle with a border-radius of 50%. Position it on the left side of the square.<\/p>\n<pre>\r\n.heart-shape:before {\r\n  position: absolute;\r\n  bottom: 0px;\r\n  left: -100px;\r\n  width: 200px;\r\n  height: 200px;\r\n  content: '';\r\n  border-radius: 50%;\r\n  background-color: rgba(250,184,66, 0.8);\r\n}\r\n<\/pre>\n<p>Together with the square, the result will look like this:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-heart-shape\/shape-1.jpg\" alt=\"Initial Heart Shape Creation\" height=\"250\" width=\"700\"><\/figure>\n<p>Subsequently, create the second circle using the <code>:after<\/code> pseudo-element, applying the same styles as the first circle, and position it on the top of the square.<\/p>\n<pre>\r\n.heart-shape:after {\r\n  position: absolute;\r\n  top: -100px;\r\n  right: 0px;\r\n  width: 200px;\r\n  height: 200px;\r\n  content: '';\r\n  border-radius: 50%;\r\n  background-color: rgba(250,184,66, 0.8);\r\n}\r\n<\/pre>\n<p>The result now appears as follows:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-heart-shape\/shape-2.jpg\" alt=\"Second Stage of Heart Shape\" width=\"700\" height=\"340\"><\/figure>\n<p>Combine these styles by grouping the pseudo-element selectors:<\/p>\n<pre>\r\n.heart-shape:before,\r\n.heart-shape:after {\r\n  position: absolute;\r\n  width: 200px;\r\n  height: 200px;\r\n  content: '';\r\n  border-radius: 50%;\r\n  background-color: rgba(250,184,66, 0.8);\r\n}\r\n.heart-shape:before {\r\n  bottom: 0px;\r\n  left: -100px;\r\n}\r\n.heart-shape:after {\r\n  top: -100px;\r\n  right: 0px;\r\n}\r\n<\/pre>\n<p>Now, to orient our heart correctly, we will apply a CSS3 transformation.<\/p>\n<p>Apply the transformation to the square, and the pseudo-elements will automatically adjust their positions accordingly.<\/p>\n<p>Rotate the heart so it appears upright:<\/p>\n<pre>\r\n.heart-shape {\r\n  transform: rotate(45deg);\r\n}\r\n<\/pre>\n<p>Here is how our heart looks now:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-heart-shape\/shape-3.jpg\" alt=\"Heart Shape Rotated\" width=\"700\" height=\"340\"><\/figure>\n<h3>Final Results<\/h3>\n<p>The complete code for the heart shape is detailed below in HTML:<\/p>\n<pre>\r\n&lt;div class=\"heart-shape\"&gt;&lt;\/div&gt;\r\n<\/pre>\n<p>And in our CSS, it looks like this:<\/p>\n<pre>\r\n.heart-shape {\r\n  position: relative;\r\n  width: 200px;\r\n  height: 200px;\r\n  transform: rotate(45deg);\r\n  background-color: rgba(250,184,66, 1);\r\n}\r\n.heart-shape:before,\r\n.heart-shape:after {\r\n  position: absolute;\r\n  width: 200px;\r\n  height: 200px;\r\n  content: '';\r\n  border-radius: 50%;\r\n  background-color: rgba(250,184,66, 1);\r\n}\r\n.heart-shape:before {\r\n  bottom: 0px;\r\n  left: -100px;\r\n}\r\n.heart-shape:after {\r\n  top: -100px;\r\n  right: 0px;\r\n}\r\n<\/pre>\n<p>Now, with the background opacity set to full, our heart looks like this:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-heart-shape\/shape-heart-final.jpg\" alt=\"Final Heart Shape\" width=\"700\" height=\"340\"><\/figure>\n<p>Having perfected the heart shape, you can easily change the background color to pink or red. However, adding a border is not advisable as it might distort the heart\u2019s appearance.<\/p>\n<h2>Conclusion<\/h2>\n<p>With CSS3, creating shapes like a heart is now effortlessly achievable. The <a href=\"https:\/\/www.hongkiat.com\/blog\/css3-border-radius-in-internet-explorer\/\">border-radius property<\/a> enables us to <strong>transform elements or even pseudo-elements into circles<\/strong>. Thanks to <a href=\"https:\/\/www.hongkiat.com\/blog\/css-transform-ie\/\">CSS3 transformations<\/a>, we can <strong>rotate or shift the coordinates of an object<\/strong> with ease.<\/p>\n<p>Your only limit is your creativity and imagination!<\/p>","protected":false},"excerpt":{"rendered":"<p>CSS3 has greatly expanded what we can achieve on websites using just HTML and CSS. You can explore remarkable examples we\u2019ve previously highlighted. However, let\u2019s start with the basics rather than jumping into more complex designs that could be overwhelming. We will begin with a simple project to help you grasp shapes and positioning in&hellip;<\/p>\n","protected":false},"author":141,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,352],"tags":[507],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Create a Heart Shape with CSS - Hongkiat<\/title>\n<meta name=\"description\" content=\"CSS3 has greatly expanded what we can achieve on websites using just HTML and CSS. You can explore remarkable examples we&#039;ve previously highlighted.\" \/>\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-heart-shape\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Heart Shape with CSS\" \/>\n<meta property=\"og:description\" content=\"CSS3 has greatly expanded what we can achieve on websites using just HTML and CSS. You can explore remarkable examples we&#039;ve previously highlighted.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-heart-shape\/\" \/>\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=\"2015-02-11T13:01:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T18:02:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css-heart-shape\/shape-1.jpg\" \/>\n<meta name=\"author\" content=\"Agus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bagusdesain\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Agus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 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-heart-shape\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-heart-shape\\\/\"},\"author\":{\"name\":\"Agus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\"},\"headline\":\"How to Create a Heart Shape with CSS\",\"datePublished\":\"2015-02-11T13:01:39+00:00\",\"dateModified\":\"2025-04-03T18:02:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-heart-shape\\\/\"},\"wordCount\":434,\"commentCount\":11,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-heart-shape\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-heart-shape\\\/shape-1.jpg\",\"keywords\":[\"CSS\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-heart-shape\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-heart-shape\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-heart-shape\\\/\",\"name\":\"How to Create a Heart Shape with CSS - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-heart-shape\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-heart-shape\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-heart-shape\\\/shape-1.jpg\",\"datePublished\":\"2015-02-11T13:01:39+00:00\",\"dateModified\":\"2025-04-03T18:02:34+00:00\",\"description\":\"CSS3 has greatly expanded what we can achieve on websites using just HTML and CSS. You can explore remarkable examples we've previously highlighted.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-heart-shape\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-heart-shape\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-heart-shape\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-heart-shape\\\/shape-1.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-heart-shape\\\/shape-1.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-heart-shape\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create a Heart Shape with CSS\"}]},{\"@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\\\/b23dad06815dff0bcc222088bed549dd\",\"name\":\"Agus\",\"description\":\"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/bagusdesain\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/agus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create a Heart Shape with CSS - Hongkiat","description":"CSS3 has greatly expanded what we can achieve on websites using just HTML and CSS. You can explore remarkable examples we've previously highlighted.","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-heart-shape\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Heart Shape with CSS","og_description":"CSS3 has greatly expanded what we can achieve on websites using just HTML and CSS. You can explore remarkable examples we've previously highlighted.","og_url":"https:\/\/www.hongkiat.com\/blog\/css-heart-shape\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2015-02-11T13:01:39+00:00","article_modified_time":"2025-04-03T18:02:34+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css-heart-shape\/shape-1.jpg","type":"","width":"","height":""}],"author":"Agus","twitter_card":"summary_large_image","twitter_creator":"@bagusdesain","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Agus","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css-heart-shape\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-heart-shape\/"},"author":{"name":"Agus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd"},"headline":"How to Create a Heart Shape with CSS","datePublished":"2015-02-11T13:01:39+00:00","dateModified":"2025-04-03T18:02:34+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-heart-shape\/"},"wordCount":434,"commentCount":11,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-heart-shape\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-heart-shape\/shape-1.jpg","keywords":["CSS"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css-heart-shape\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-heart-shape\/","url":"https:\/\/www.hongkiat.com\/blog\/css-heart-shape\/","name":"How to Create a Heart Shape with CSS - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-heart-shape\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-heart-shape\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-heart-shape\/shape-1.jpg","datePublished":"2015-02-11T13:01:39+00:00","dateModified":"2025-04-03T18:02:34+00:00","description":"CSS3 has greatly expanded what we can achieve on websites using just HTML and CSS. You can explore remarkable examples we've previously highlighted.","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-heart-shape\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-heart-shape\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css-heart-shape\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css-heart-shape\/shape-1.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-heart-shape\/shape-1.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-heart-shape\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create a Heart Shape with CSS"}]},{"@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\/b23dad06815dff0bcc222088bed549dd","name":"Agus","description":"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.","sameAs":["https:\/\/x.com\/bagusdesain"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/agus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-63t","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23279","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\/141"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=23279"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23279\/revisions"}],"predecessor-version":[{"id":73728,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23279\/revisions\/73728"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=23279"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=23279"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=23279"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=23279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}