{"id":305467,"date":"2020-03-25T19:36:14","date_gmt":"2020-03-26T02:36:14","guid":{"rendered":"https:\/\/css-tricks.com\/?p=305467"},"modified":"2020-03-28T11:14:21","modified_gmt":"2020-03-28T18:14:21","slug":"how-to-animate-text-with-svg-and-css","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/how-to-animate-text-with-svg-and-css\/","title":{"rendered":"How to Animate Text with SVG and CSS"},"content":{"rendered":"\n<p>The other day I was helping my pal Jez work on <a href=\"https:\/\/jezburrows.com\/enthusiasm\/\" rel=\"noopener\">Dept. of Enthusiasm<\/a>, the site for his newsletter, and I had a thought. What if we made the word \u201centhusiasm\u201d in the title animate a little bit? Like, what if each of the letters in the word bopped up and down enthusiastically?<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Like this:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_a744030a251db3ad2047aa719e3df959\" src=\"\/\/codepen.io\/anon\/embed\/a744030a251db3ad2047aa719e3df959?height=350&amp;theme-id=1&amp;slug-hash=a744030a251db3ad2047aa719e3df959&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed a744030a251db3ad2047aa719e3df959\" title=\"CodePen Embed a744030a251db3ad2047aa719e3df959\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Neat, huh? To build this thing I knew we could use SVG for the text and then animate things with CSS. Each letter is a path with its own class, which makes it possible to select each one. That said, there\u2019s nothing really stopping us from doing this with HTML and CSS. Using SVG is just one approach that felt right to me at the time.<\/p>\n\n\n\n<p>To get started we headed over to Figma and typed out the text in separate text boxes. We did this so that when we click on the \u201cOutline stroke\u201d menu item here&#8230;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1208\" height=\"1472\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-20-at-10.08.21-AM.png?fit=840%2C1024&amp;ssl=1\" alt=\"\" class=\"wp-image-305471\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-20-at-10.08.21-AM.png?w=1208&amp;ssl=1 1208w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-20-at-10.08.21-AM.png?resize=246%2C300&amp;ssl=1 246w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-20-at-10.08.21-AM.png?resize=840%2C1024&amp;ssl=1 840w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-20-at-10.08.21-AM.png?resize=768%2C936&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-20-at-10.08.21-AM.png?resize=1000%2C1219&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" \/><\/figure>\n\n\n\n<p>&#8230;we have individual vectors of each letter. This will help us when we export the SVG so that we can add the correct CSS classes to each element. Once we\u2019ve outlined the strokes of each letter we can then edit the points in the vector (but we don\u2019t need to for what we\u2019re about to do): <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1022\" height=\"558\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-20-at-10.08.32-AM.png?resize=1022%2C558&#038;ssl=1\" alt=\"\" class=\"wp-image-305472\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-20-at-10.08.32-AM.png?w=1022&amp;ssl=1 1022w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-20-at-10.08.32-AM.png?resize=300%2C164&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-20-at-10.08.32-AM.png?resize=768%2C419&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-20-at-10.08.32-AM.png?resize=1000%2C546&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>If we added all the text in one box and clicked &#8220;Outline Stroke&#8221; then it would\u2019ve created a single vector with all these letters combined. That would then make a single path with the coordinates and that\u2019s pretty difficult for me to style or even understand what the heck is going on in there.<\/p>\n\n\n\n<p>Next up, I put all these letters in a Frame (Sketch calls this an Artboard) and placed each word into a Group. This way, when they\u2019re exported as an SVG, each word will be in it&#8217;s own <code>g<\/code> tag which also helps us style the letters:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"2012\" height=\"728\" src=\"https:\/\/i2.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-20-at-10.29.42-AM.png?fit=1024%2C371&amp;ssl=1\" alt=\"\" class=\"wp-image-305473\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-20-at-10.29.42-AM.png?w=2012&amp;ssl=1 2012w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-20-at-10.29.42-AM.png?resize=300%2C109&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-20-at-10.29.42-AM.png?resize=1024%2C371&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-20-at-10.29.42-AM.png?resize=768%2C278&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-20-at-10.29.42-AM.png?resize=1536%2C556&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-20-at-10.29.42-AM.png?resize=1000%2C362&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" \/><\/figure>\n\n\n\n<p>From there, I exported the SVG \u2014 but! \u2014 I had to make sure to include the <code>id<\/code> option when doing it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1006\" height=\"462\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-20-at-10.43.09-AM.png?resize=1006%2C462&#038;ssl=1\" alt=\"\" class=\"wp-image-305483\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-20-at-10.43.09-AM.png?w=1006&amp;ssl=1 1006w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-20-at-10.43.09-AM.png?resize=300%2C138&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-20-at-10.43.09-AM.png?resize=768%2C353&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-20-at-10.43.09-AM.png?resize=1000%2C459&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>If we don\u2019t do this we\u2019ll get a bunch of <code>path<\/code> elements for each letter but they won\u2019t have an <code>id<\/code> attributes.<\/p>\n\n\n\n<p>This is what we get after the export:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_MWwBqqq\" src=\"\/\/codepen.io\/anon\/embed\/MWwBqqq?height=250&amp;theme-id=1&amp;slug-hash=MWwBqqq&amp;default-tab=html,result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed MWwBqqq\" title=\"CodePen Embed MWwBqqq\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>I&#8217;m not sure how much of this weirdness is me and how much is Figma\u2019s SVG export, but I deleted that <code>&lt;rect&gt;<\/code> element because it&#8217;s unecessary. Then I gave the <code>body<\/code> element a background so I could see the text and remove those inline <code>height<\/code> and <code>width<\/code> attributes on the SVG itself:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_LYVBJqV\" src=\"\/\/codepen.io\/anon\/embed\/LYVBJqV?height=250&amp;theme-id=1&amp;slug-hash=LYVBJqV&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed LYVBJqV\" title=\"CodePen Embed LYVBJqV\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Neato! Now we can get to the fun part: animating each letter in the word. <\/p>\n\n\n\n<p>If you look at the HTML of that example above you\u2019ll notice there&#8217;s a <code>g<\/code> element which with an <code>id<\/code> with the same name of the Frame in Figma.There are also <code>g<\/code> elements for each word and every <code>path<\/code> that makes up the word will have an individual <code>id<\/code>. (This is why naming our Frames and Groups properly, as well as <a href=\"https:\/\/css-tricks.com\/telling-the-story-of-graphic-design\/\">keeping things organized<\/a> in any design application, is important.)<\/p>\n\n\n\n<p>One thing that surprised me was the order in which each <code>path<\/code> is exported though: it\u2019s in the opposite order than the one I\u2019d expect, with <code>M<\/code> being the first letter in the \u201cENTHUSIASM\u201d group. So I cleaned that up a bit and made sure each letter is in the correct order.<\/p>\n\n\n\n<p>To get the animation working we first bump down each letter by <code>2px<\/code>:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">g path {\n  transform: translateY(2px);\n}<\/code><\/pre>\n\n\n\n<p>That\u2019s because I want each letter to make a <code>2px<\/code> hop which we\u2019ll get to in a bit. I also noticed with this change I\u2019d need to update the SVG viewbox too. Otherwise, the bottom of each letter will be cut off:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;svg class=\"header\" viewBox=\"0 0 146 13\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><\/code><\/pre>\n\n\n\n<p>I probably should\u2019ve have just repositioned the text within the frame in Figma and exported it again, but this is fine for what I needed.<\/p>\n\n\n\n<p>Now I can target the third group in the SVG (the word \u201centhusiasm\u201d) and set the <code>animation-count<\/code> to infinite: <\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* targets the word \"enthusiasm\" *\/\ng:nth-child(3) path {\n  animation-name: wiggleWiggle;\n  animation-duration: 2.5s;\n  animation-iteration-count: infinite;\n}<\/code><\/pre>\n\n\n\n<p>The code above then calls the <code>wiggleWiggle<\/code> animation below: <\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@keyframes wiggleWiggle {\n  20%,\n  100% {\n    transform: translate(0, 2px); \/* stay on the baseline for most of the animation duration *\/\n  }\n\n  0% {\n    transform: translate(0, 0px); \/* hop up *\/\n  }\n  10% {\n    transform: translate(0, 2px); \/* return to baseline *\/\n  }\n}<\/code><\/pre>\n\n\n\n<p>See the beginning of that keyframe \u2014 the 20%, 100% bit? What that&#8217;s saying is &#8220;keep all the text on the baseline for the majority of the animation.&#8221; That\u2019s what gives us a nice delay between each bounce:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_RwPBeNp\" src=\"\/\/codepen.io\/anon\/embed\/RwPBeNp?height=250&amp;theme-id=1&amp;slug-hash=RwPBeNp&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed RwPBeNp\" title=\"CodePen Embed RwPBeNp\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>I learnt this trick from this really good post about <a href=\"https:\/\/css-tricks.com\/using-multi-step-animations-transitions\/\">animation timing<\/a> by Geoff and I would highly recommend you check it out if you\u2019re about to start learning about animation in CSS.<\/p>\n\n\n\n<p>Now for the fun bit: with the <code>animation-delay<\/code> property, we can make each letter hop just after the one before it. There\u2019s definitely a smarter way I could be doing this, but I just used the <code>id<\/code> of each letter like so:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">#E {\n  animation-delay: 0s;\n}\n\n#N {\n  animation-delay: 0.1s;\n}\n\n#T {\n  animation-delay: 0.15s;\n}\n\n#H {\n  animation-delay: 0.2s;\n}\n\n#U {\n  animation-delay: 0.25s;\n}\n\n#S_2 {\n  animation-delay: 0.3s;\n}\n\n#I {\n  animation-delay: 0.35s;\n}\n\n#A {\n  animation-delay: 0.4s;\n}\n\n#S {\n  animation-delay: 0.45s;\n}\n\n#M {\n  animation-delay: 0.5s;\n}<\/code><\/pre>\n\n\n\n<p>It sure is messy, but writing the loop wouldn\u2019t save me that much time and I won\u2019t need to update it in the future, so I think it\u2019s fine enough. And with that we\u2019re pretty much done!<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_PoqBybQ\" src=\"\/\/codepen.io\/anon\/embed\/PoqBybQ?height=250&amp;theme-id=1&amp;slug-hash=PoqBybQ&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed PoqBybQ\" title=\"CodePen Embed PoqBybQ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>We now have a bouncy, enthusiastic title to say hello. Yay for wiggly text!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The other day I was helping my pal Jez work on Dept. of Enthusiasm, the site for his newsletter, and I had a thought. What if we made the word \u201centhusiasm\u201d in the title animate a little bit? Like, what if each of the letters in the word bopped up and down enthusiastically?<\/p>\n","protected":false},"author":223806,"featured_media":305768,"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":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/letter-sbouncing.gif?fit=800%2C400&ssl=1","jetpack-related-posts":[{"id":344497,"url":"https:\/\/css-tricks.com\/typewriter-animation-that-handles-anything-you-throw-at-it\/","url_meta":{"origin":305467,"position":0},"title":"Typewriter Animation That Handles Anything You Throw at It","date":"July 20, 2021","format":false,"excerpt":"I watched Kevin Powell\u2019s video where he was able to recreate a nice typewriter-like animation using CSS. It\u2019s neat and you should definitely check it out because there are bonafide CSS tricks in there. I\u2019m sure you\u2019ve seen other CSS attempts at this, including this site\u2019s very own snippet. Like\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/typewriter-animation-text.gif?fit=900%2C450&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":342353,"url":"https:\/\/css-tricks.com\/how-i-used-the-waapi-to-build-an-animation-library\/","url_meta":{"origin":305467,"position":1},"title":"How I Used the WAAPI to Build an Animation Library","date":"June 16, 2021","format":false,"excerpt":"The Web Animations API lets us construct animations and control their playback with JavaScript. The API opens the browser\u2019s animation engine to developers and was designed to underlie implementations of both CSS animations and transitions, leaving the door open to future animation effects. It is one of the most performant\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/YeWYFmww.jpeg?fit=1200%2C800&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":335589,"url":"https:\/\/css-tricks.com\/how-to-animate-the-details-element\/","url_meta":{"origin":305467,"position":2},"title":"How to Animate the Details Element","date":"March 2, 2021","format":false,"excerpt":"Here's a nice simple demo from Moritz Gie\u00dfmann on animating the triangle of a <details> element, which is the affordance that tells people this thing can be opened. Animating it, then is another kind of affordance that tells people this thing is opening now. The tricks? Turn off the default\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/Screen-Shot-2021-03-02-at-1.57.23-PM.png?fit=1200%2C687&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":148294,"url":"https:\/\/css-tricks.com\/css-animate-fromto-auto\/","url_meta":{"origin":305467,"position":3},"title":"CSS Animate from\/to &#8220;auto&#8221;","date":"August 27, 2013","format":false,"excerpt":"I have no doubt CSS will allow this one day, but right now, you can't animate the width or height of an element from a fixed value to auto. This is particularly useful when the desire is to animate from hidden to visible like jQuery's slideDown(). Nikita Vasilyev shows how\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":357239,"url":"https:\/\/css-tricks.com\/a-handy-little-system-for-animated-entrances-in-css\/","url_meta":{"origin":305467,"position":4},"title":"A Handy Little System for Animated Entrances in CSS","date":"November 26, 2021","format":false,"excerpt":"I love little touches that make a website feel like more than just a static document. What if web content wouldn\u2019t just \u201cappear\u201d when a page loaded, but instead popped, slid, faded, or spun into place? It might be a stretch to say that movements like this are always useful,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/pop-in.gif?fit=900%2C450&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":168883,"url":"https:\/\/css-tricks.com\/improving-ui-animation-workflow-velocity-js\/","url_meta":{"origin":305467,"position":5},"title":"Improving UI Animation Workflow with Velocity.js","date":"April 30, 2014","format":false,"excerpt":"The following is a guest post by Julian Shapiro. Julian recently released Velocity.js, a more performant jQuery replacement for .animate(). He recently wrote about how JavaScript animations can be so fast over on David Walsh's blog, a topic we've covered here as well. In this article, Julian introduces Velocity.js itself.\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/letter-sbouncing.gif?fit=800%2C400&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/305467"}],"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=305467"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/305467\/revisions"}],"predecessor-version":[{"id":305877,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/305467\/revisions\/305877"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/305768"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=305467"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=305467"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=305467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}