{"id":229,"date":"2026-11-10T09:13:58","date_gmt":"2026-11-10T09:13:58","guid":{"rendered":"https:\/\/webdevpuneet.com\/blog\/?p=229"},"modified":"2026-11-10T09:14:02","modified_gmt":"2026-11-10T09:14:02","slug":"ditch-the-charting-library-8-live-css-svg-charts-you-can-copy-today","status":"publish","type":"post","link":"https:\/\/webdevpuneet.com\/blog\/ditch-the-charting-library-8-live-css-svg-charts-you-can-copy-today\/","title":{"rendered":"Ditch the Charting Library: 8 Live CSS\/SVG Charts You Can Copy Today"},"content":{"rendered":"<p><!--\n================================================================\n  POST TITLE (paste into the WordPress title field \u2014 it becomes the page H1)\n  Ditch the Charting Library: 8 Live CSS\/SVG Charts You Can Copy Today\n\n  SEO TITLE (51 chars, target 50\u201360, max 60 \u2014 \"Optimize SEO\" panel \u2192 SEO TITLE)\n  8 Live CSS and SVG Chart Snippets Without a Library\n\n  SEO DESCRIPTION (158 chars, target 150\u2013160, max 160 \u2014 \"Optimize SEO\" panel \u2192 SEO DESCRIPTION)\n  Skip the 200KB charting library: 8 free CSS and SVG chart snippets, including bar, donut, gauge, sparkline, radar and heatmap. Preview live and copy the code.\n================================================================\n--><\/p>\n\n\n<p class=\"wp-block-paragraph\">Most dashboards don&#8217;t need a 200KB charting library \u2014 they need one clean bar chart, a gauge, and maybe a sparkline. Below are 8 free chart snippets you can preview live and copy in seconds: a bar chart, a donut chart, a gauge, a sparkline, a candlestick chart, a radar chart, a funnel, and an activity heatmap \u2014 all built in plain HTML, CSS and SVG.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Each one comes with <strong>how the effect actually works<\/strong>, <strong>when to reach for it<\/strong>, and a quick tip for customising or keeping it readable. Charting libraries solve real problems \u2014 pan, zoom, huge datasets \u2014 but for a single dashboard widget or a landing-page stat, they&#8217;re often overkill. These snippets get you 90% of the visual polish for 0% of the bundle size.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Every snippet below is a <strong>live, interactive preview<\/strong> \u2014 hover it, resize it, try it right in the article. When you find one you like, hit <strong>View \/ Edit Code<\/strong> to grab the HTML\/CSS\/JS or export it to React, Vue, Angular or Tailwind.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Do you actually need a charting library?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Reach for D3, Chart.js or Recharts when you need real interactivity at scale \u2014 zooming into ten thousand data points, live-streaming updates, or a dozen chart types driven by one config. Reach for a hand-built snippet instead when any of these are true:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The dataset is small and mostly static<\/strong> \u2014 a handful of bars, one gauge value, a week of activity. No library overhead is justified for that.<\/li>\n\n\n\n<li><strong>Bundle size matters<\/strong> \u2014 a marketing page or landing hero shouldn&#8217;t ship a charting dependency just to show one stat visually.<\/li>\n\n\n\n<li><strong>You want full styling control<\/strong> \u2014 matching a chart&#8217;s exact colours, radii and fonts to a design system is often faster in raw SVG\/CSS than fighting a library&#8217;s theming API.<\/li>\n\n\n\n<li><strong>Accessibility is a priority<\/strong> \u2014 a hand-built chart can expose real text values in the DOM (for screen readers and copy-paste) in a way canvas-based libraries often can&#8217;t.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Keep that trade-off in mind as you scroll \u2014 every snippet below is production-ready for exactly these cases.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. Bar Chart<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A clean, animated bar chart with hover tooltips and value labels \u2014 the single most common chart on the web, built without a single dependency.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/ui-snippets\/bar-chart\/embed\/\" style=\"width:100%;height:480px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Bar Chart \u2014 Free HTML\/CSS\/JS Snippet by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How it works:<\/strong> the bars are SVG rects drawn inside a <code>viewBox=\"0 0 540 240\"<\/code> with <code>preserveAspectRatio<\/code> set, so widths and gaps are expressed as percentages of that coordinate space rather than pixels \u2014 the chart stays sharp at 300px or 900px wide with no <code>ResizeObserver<\/code> needed. Each bar&#8217;s height and y-position are computed from the data value against the dataset&#8217;s max, then grown in with a <code>requestAnimationFrame<\/code> loop using an ease-out cubic curve rather than a plain CSS transition.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Best for:<\/strong> dashboards, monthly reports, and any &#8220;compare N categories&#8221; widget. <strong>Tip:<\/strong> keep the bar count under 10\u201312 on mobile \u2014 past that, labels start colliding and a horizontal bar chart reads better.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Grab the code: <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/bar-chart\/\">Bar Chart<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. Donut Chart<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A segmented donut chart with a centred total, animated segment reveal, and a matching legend \u2014 the classic &#8220;share of total&#8221; visual for revenue, storage, or traffic breakdowns.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/ui-snippets\/donut-chart\/embed\/\" style=\"width:100%;height:480px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Donut Chart \u2014 Free HTML\/CSS\/JS Snippet by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How it works:<\/strong> each segment is an SVG <code>&lt;circle&gt;<\/code> with a <code>stroke-dasharray<\/code> equal to its share of the circle&#8217;s circumference and a <code>stroke-dashoffset<\/code> that positions it after the previous segments \u2014 the same trick behind every SVG progress ring, just stacked. Animating <code>stroke-dashoffset<\/code> on load produces the &#8220;sweeping in&#8221; reveal.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Best for:<\/strong> &#8220;storage used&#8221;, budget breakdowns, traffic-by-source widgets \u2014 anywhere a whole splits into a few named parts. <strong>Tip:<\/strong> cap it at five or six segments; beyond that, thin slivers become unreadable and a bar chart communicates the same data more clearly.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Grab the code: <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/donut-chart\/\">Donut Chart<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. Gauge Chart<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A semi-circular gauge with a needle that sweeps to the current value on load, colour-banded zones, and a large centred number \u2014 the dial you&#8217;d expect on a speedometer or a health-score widget.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/ui-snippets\/gauge-chart\/embed\/\" style=\"width:100%;height:480px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Gauge Chart \u2014 Free HTML\/CSS\/JS Snippet by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How it works:<\/strong> the arc uses the same SVG <code>stroke-dasharray<\/code>\/<code>stroke-dashoffset<\/code> technique as the donut chart, but constrained to a 180\u00b0 sweep instead of a full circle. The needle is an SVG line inside a group with <code>transform-origin<\/code> pinned at the arc&#8217;s centre; JavaScript just sets its rotation angle as a percentage of the gauge&#8217;s range via <code>transform: rotate()<\/code>, and a CSS <code>transition<\/code> on that property handles the smooth sweep \u2014 no animation loop involved.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Best for:<\/strong> credit scores, performance scores, speed or capacity indicators \u2014 any single value that&#8217;s more meaningful against a labelled range than as a bare number. <strong>Tip:<\/strong> label the colour zones (e.g. &#8220;poor \/ fair \/ good&#8221;) directly on the arc so the gauge is legible without a legend.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Grab the code: <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/gauge-chart\/\">Gauge Chart<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4. Sparkline Chart<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A tiny inline trend line with no axes or labels \u2014 the chart that fits inside a table cell or a stat card to answer &#8220;is this going up or down&#8221; in a glance.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/ui-snippets\/sparkline-chart\/embed\/\" style=\"width:100%;height:480px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Sparkline Chart \u2014 Free HTML\/CSS\/JS Snippet by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How it works:<\/strong> each sparkline is drawn on a small <code>&lt;canvas&gt;<\/code> rather than SVG \u2014 the data points are normalised against the series&#8217; min\/max range into pixel coordinates, then joined with <code>bezierCurveTo<\/code> for a smoothed line instead of straight segments, with a soft gradient fill traced underneath down to the baseline. No axes, ticks or gridlines are drawn at all, which is what keeps it small enough to sit inline with text.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Best for:<\/strong> stat cards, table rows, and anywhere you need &#8220;trend at a glance&#8221; without spending real layout space on a full chart. <strong>Tip:<\/strong> pair it with a single end-point dot and a +\/- percentage label \u2014 the sparkline shows shape, the label gives the number people actually scan for.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Grab the code: <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/sparkline-chart\/\">Sparkline Chart<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">5. Candlestick Chart<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">An open\/high\/low\/close candlestick chart with green and red candles and a hoverable price tooltip \u2014 the exact chart type every trading and finance dashboard needs.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/ui-snippets\/candlestick-chart\/embed\/\" style=\"width:100%;height:480px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Candlestick Chart \u2014 Free HTML\/CSS\/JS Snippet by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How it works:<\/strong> each candle is two stacked elements \u2014 a thin &#8220;wick&#8221; line spanning the high-to-low range and a wider &#8220;body&#8221; spanning the open-to-close range \u2014 both positioned and sized as percentages of the chart&#8217;s overall price range. The body&#8217;s colour flips between up and down states depending on whether close is above or below open.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Best for:<\/strong> stock, crypto and forex dashboards where OHLC data matters more than a simple trend line. <strong>Tip:<\/strong> don&#8217;t try to cram more than 30\u201340 candles into a narrow widget \u2014 candlesticks need horizontal breathing room to stay readable, unlike a line chart.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Grab the code: <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/candlestick-chart\/\">Candlestick Chart<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">6. Radar Chart<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A multi-axis radar (spider) chart comparing several metrics at once inside a polygon shape \u2014 perfect for skill breakdowns, product comparisons, or review scorecards.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/ui-snippets\/radar-chart\/embed\/\" style=\"width:100%;height:480px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Radar Chart \u2014 Free HTML\/CSS\/JS Snippet by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How it works:<\/strong> each metric gets its own axis radiating from a shared centre point, spaced evenly around 360\u00b0 using basic trigonometry (<code>sin<\/code>\/<code>cos<\/code> of each axis&#8217;s angle). Every data value is plotted along its axis as a distance from centre, and the points are joined into a single SVG <code>&lt;polygon&gt;<\/code> that fills with a translucent colour.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Best for:<\/strong> comparing 4\u20138 weighted metrics at once \u2014 skill trees, product feature comparisons, review breakdowns. <strong>Tip:<\/strong> overlaying two polygons (e.g. &#8220;you&#8221; vs. &#8220;average&#8221;) on the same axes is where a radar chart earns its keep \u2014 a single polygon alone is often less clear than a bar chart.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Grab the code: <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/radar-chart\/\">Radar Chart<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">7. Funnel Chart<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A tapering funnel chart showing drop-off between stages, with each segment&#8217;s conversion percentage labelled \u2014 the standard way to visualise a signup or checkout flow.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/ui-snippets\/funnel-chart\/embed\/\" style=\"width:100%;height:480px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Funnel Chart \u2014 Free HTML\/CSS\/JS Snippet by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How it works:<\/strong> each stage is a plain centred bar, not an SVG shape \u2014 its width is set via a <code>--w<\/code> CSS custom property calculated as a percentage of the top stage&#8217;s value, then centred with <code>margin: 0 auto<\/code>. Because every bar is narrower than the one before it and all are centre-aligned, the stack naturally forms the symmetric tapering funnel silhouette with no <code>clip-path<\/code> or polygon math required.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Best for:<\/strong> signup flows, checkout funnels, sales pipelines \u2014 anywhere a fixed sequence of steps loses users along the way. <strong>Tip:<\/strong> label both the raw count and the percentage of the previous stage on each segment; percentage-of-total alone hides which specific step is actually leaking users.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Grab the code: <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/funnel-chart\/\">Funnel Chart<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">8. Activity Heatmap<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A GitHub-style contribution heatmap \u2014 a grid of coloured squares where intensity maps to activity level, with a hover tooltip showing the exact date and count.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/ui-snippets\/activity-heatmap\/embed\/\" style=\"width:100%;height:480px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Activity Heatmap \u2014 Free HTML\/CSS\/JS Snippet by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How it works:<\/strong> the grid is a CSS Grid of small squares, one per day, generated in JS from a date range. Each square&#8217;s background colour is picked from a fixed intensity scale by bucketing that day&#8217;s value (e.g. none \/ low \/ medium \/ high), so the whole grid renders as flat divs with zero canvas or SVG involved \u2014 just colour lookups.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Best for:<\/strong> contribution graphs, habit trackers, login-activity or usage-frequency widgets. <strong>Tip:<\/strong> always pair colour intensity with a tooltip showing the real number \u2014 colour alone can&#8217;t communicate exact values, and colour-blind users need the fallback.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Grab the code: <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/activity-heatmap\/\">Activity Heatmap<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to drop these into your project<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Every snippet is framework-agnostic, so the workflow is the same wherever you&#8217;re building:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the snippet and hit <strong>View \/ Edit Code<\/strong> to see the HTML, CSS and JS in separate tabs.<\/li>\n\n\n\n<li>Paste the HTML into your markup, the CSS into your stylesheet, and the JS (if any) before your closing <code>&lt;\/body&gt;<\/code> tag.<\/li>\n\n\n\n<li>Prefer a component? Use the one-click <strong>export to React, Vue, Angular or Tailwind<\/strong> and wire it up to your own data.<\/li>\n\n\n\n<li>Swap the sample values for your real dataset and adjust the colour scale variables at the top of each snippet to match your brand.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Keep your charts honest and accessible<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A chart that looks good but misleads or excludes users isn&#8217;t doing its job. Three rules cover almost every case:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Never truncate a bar or gauge axis to exaggerate a difference \u2014 start value axes at zero unless you have a specific, clearly labelled reason not to.<\/li>\n\n\n\n<li>Expose the underlying numbers in the DOM (a <code>title<\/code> attribute, a visually-hidden table, or a tooltip) so screen readers and copy-paste both work, not just the visual shape.<\/li>\n\n\n\n<li>Don&#8217;t rely on colour alone to separate categories \u2014 pair colour with labels, patterns, or position so colour-blind users aren&#8217;t reading a different chart than everyone else.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Final Thought<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">These are just 8 of dozens of chart types you can copy for free \u2014 no login, no sign-up, no dependency to install. The underlying techniques \u2014 proportional SVG stroke offsets, canvas curve drawing, CSS custom-property scaling, grid-based colour buckets, and simple trigonometry for radial layouts \u2014 are what every charting library is doing under the hood anyway. Once you&#8217;ve built a few of these by hand, reaching for a full library becomes a deliberate choice instead of a default.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Preview any of them live, tweak the code, and export to your framework of choice in one click. Browse the full collection at <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/charts\/\">webdevpuneet UI Snippets \u2014 Charts<\/a> \u2014 it&#8217;s free and runs entirely in your browser.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Most dashboards don&#8217;t need a 200KB charting library \u2014 they need one clean bar chart, a gauge, and maybe a sparkline. Below are 8 free chart snippets you can preview live and copy in seconds: a bar chart, a donut chart, a gauge, a sparkline, a candlestick chart, a radar chart, a funnel, and an [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":230,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","advanced_seo_description":"Skip the 200KB charting library: 8 free CSS and SVG chart snippets, including bar, donut, gauge, sparkline, radar and heatmap. Preview live and copy the code.","jetpack_seo_html_title":"8 Live CSS and SVG Chart Snippets Without a Library","jetpack_seo_noindex":false,"jetpack_seo_schema_type":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_hide_featured_image":false,"_jetpack_featured_image_duplicate_dismissed":0,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"Skip the 200KB charting library.\n\nBuild beautiful data visualizations with 8 free CSS & SVG chart snippets:\n\n- Bar charts\n- Donut charts\n- Gauges\n- Sparklines\n- Radar charts\n- Heatmaps\n- And more\n\nPreview live and copy the HTML, CSS & JS.\n\nLightweight. Customizable. No heavy dependencies.\n\n#CSS #SVG #WebDevelopment #Frontend","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},"jetpack_post_was_ever_published":false},"categories":[14],"tags":[],"class_list":["post-229","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui-snippets","et-has-post-format-content","et_post_format-et-post-format-standard"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/phrh5V-3H","jetpack_featured_media_url":"https:\/\/i0.wp.com\/webdevpuneet.com\/blog\/wp-content\/uploads\/2026\/11\/css-svg-charts-header-1200w.jpg?fit=1200%2C630&ssl=1","_links":{"self":[{"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/posts\/229","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/comments?post=229"}],"version-history":[{"count":1,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/posts\/229\/revisions"}],"predecessor-version":[{"id":231,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/posts\/229\/revisions\/231"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/media\/230"}],"wp:attachment":[{"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/media?parent=229"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/categories?post=229"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/tags?post=229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}