{"id":14169,"date":"2025-10-24T16:42:10","date_gmt":"2025-10-24T14:42:10","guid":{"rendered":"https:\/\/monodes.com\/predaelli\/?p=14169"},"modified":"2025-10-24T16:42:12","modified_gmt":"2025-10-24T14:42:12","slug":"how-to-emulate-hand-drawn-shapes-algorithms-behind-roughjs-shihn-ca","status":"publish","type":"post","link":"https:\/\/monodes.com\/predaelli\/2025\/10\/24\/how-to-emulate-hand-drawn-shapes-algorithms-behind-roughjs-shihn-ca\/","title":{"rendered":"How to emulate hand-drawn shapes \/ Algorithms behind RoughJS | shihn.ca"},"content":{"rendered":"\n
\n

How to emulate hand-drawn shapes \/ Algorithms behind RoughJS | shihn.ca<\/a><\/em><\/h2>\n\n\n\n

A dive into graphics algorithms used in RoughJS – A graphics library that lets you draw in a sketchy, hand-drawn-like, style.<\/p>\n<\/blockquote>\n\n\n\n\n\n\n\n\n\n\n\n

<\/p>\n\n\n\n

\n

How to emulate hand-drawn shapes \/ Algorithms behind RoughJS<\/h1>\n\n\n\n

A dive into graphics algorithms used in RoughJS – A graphics library that lets you draw in a sketchy, hand-drawn-like, style.<\/p>\n\n\n\n

Apr 29, 2020<\/p>\n\n\n\n

9 minute read<\/p>\n\n\n\n

Introduction<\/h2>\n\n\n\n

RoughJS<\/a> is a small-ish (<9kB) JavaScript graphics library that lets you draw in a sketchy, hand-drawn-like<\/em> style. It lets you draw on <canvas><\/code> and with SVG<\/code>. This blog post is to address the most common issue filed with RoughJS: How does it work?<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

A bit of history<\/h2>\n\n\n\n

Charmed by images of hand-drawn graphs, diagrams, and sketches; like I true nerd, I wondered what if there were a way to draw such figures through code. Emulate hand-drawing as close as possible and yet be legible and programmable. I decided to focus on primitives – lines, polygons, ellipses, and curves, creating a full 2D graphics library. Charting\/Diagramming libraries and apps could be built on top of it.<\/p>\n\n\n\n

After some quick research, I came across this paper by Jo Wood<\/a> and others, titled Sketchy rendering for information visualization<\/a>. The techniques described here formed the basis of the library, especially for drawing lines and ellipses.<\/p>\n\n\n\n

I wrote the first version in 2017 which only worked on Canvas. Once the problem was solved, I lost interest. A year later I was working a lot with SVG, and decided to adapt RoughJS to also work with SVG. I also redesigned the API to be more basic and focus on the simple vector graphic primitives. I shared the 2.0 version of Hacker News and, surprisingly, it blew up. It was the second most popular post of ShowHN<\/a> in 2018.<\/p>\n\n\n\n

People have since created some amazing things with RoughJS \u2014 Excalidraw<\/a>, Why do Cats & Dogs…<\/a>, roughViz charting library<\/a>, to name a few.<\/p>\n\n\n\n

Now let’s get to the algorithms….<\/p>\n\n\n\n

Roughness<\/h2>\n\n\n\n

The fundamental concept behind emulating hand-drawn shapes is randomness. When you draw anything by hand, no two shapes will be exactly the same. Nothing is exact. So, every spatial point in RoughJS is adjusted by a random offset. The amount of randomness is described by a numeric parameter called roughness<\/code>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Imagine a point A<\/code> and a circle around it. A<\/code> is now replaced by a random point within that circle. The area of this circle of randomness is controlled by the roughness<\/code> value.<\/p>\n\n\n\n

Lines<\/h2>\n\n\n\n

Hand drawn lines are never straight and often develop a bowing<\/em> curvature (described here<\/a>). We randomize the two end points of the line based on the roughness. Then we also pick two other random points around the 50% and 75% marks along the line. Connecting these points by a curve gives the bowing<\/em> effect.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

When drawing by hand, people sometimes go quickly back and forth on the line. This could be either to highlight the line, or just as an adjustment to the straightness of the line. It looks something like this:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

To give this extra sketchy effect, RoughJS draws the line twice to make it feel more sketchy. I do plan to make this more configurable in the future.<\/p>\n\n\n\n

Try sketching lines on this interactive canvas surface. Adjust the roughness to see the lines change: Roughness0.4 <\/canvas><\/p>\n\n\n\n

When drawing by hand, longer lines tend to get less straight and more curvy. So, the randomness of the offsets to create the bowing<\/code> effect are a function of the line’s length and the randomness<\/code> value. This, however, does not scale for really long lines. In the image below, for example, concentric squares are drawn with the same random seeds – i.e. they are essentially the same random shape, but scaled differently.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

You will notice that the edges on outer squares tend to look a bit more rough<\/code> than the inner ones. So, a dampening factor is also added based on the length of the line. The dampening factor is applied as a step function at different lengths.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Ellipses (and circles)<\/h2>\n\n\n\n

Take a piece of paper and draw a bunch of circles as quickly as your can, in one continuous motion. Here’s what it looks like when I did that:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Notice that the start and end point of the loop don’t actually meet unless you are very careful. RoughJS tries to achieve this while making it look more complete (adapted from the giCenter paper<\/a>).<\/p>\n\n\n\n

The algorithm finds n<\/code> points on an ellipse, where n<\/code> is determined by the size of the ellipse. Each point is then randomized by its roughness<\/code>. A curve is then fitted through these points. To achieve the ends not meeting effect<\/em> the second to last point does not meet the first point. Instead, it joins the second and third points.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

A second ellipse is also drawn to give it a more closed-loop, and extra sketchy effect.<\/p>\n\n\n\n

Try sketching ellipses on this interactive canvas surface. Adjust the roughness to see the shapes change: Roughness0.1 <\/canvas><\/p>\n\n\n\n

As in the case with lines, some of these artefacts get more accented if the same shape is scaled to different sizes. In ellipse, this is more noticeable because the relationship is quadratic in nature. In the image below, notice the circles have the same shape, but the outer circles look more rough.<\/p>\n\n\n\n

\"Rough<\/figure>\n\n\n\n

The algorithm now auto-adjusts itself based on the size of the shape by estimating more points on the circle (n<\/code>). Following is the same set of circles generated with auto-adjust.<\/p>\n\n\n\n

\"Rough<\/figure>\n\n\n\n

Filling<\/h2>\n\n\n\n

A common way to fill a hand-drawn shape is using hachure<\/em> lines. As in hand-drawn sketches, lines do not stay within the outlines of the shape. They are also randomized. The density, angle, width of the lines is configurable.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Filling squares like the example above is easy, but you get into some trouble when filling all sorts of shapes. For example, concave polygons (where angles can be more than 180\u00b0) often lead to problems like these:<\/p>\n\n\n\n

\"Concave<\/figure>\n\n\n\n

In fact the above image is from a bug report in an earlier version of RoughJS. Since then I have updated the hachure filling algorithm to an adapted version of Scanline fill technique<\/a>.<\/p>\n\n\n\n

The Scan-Line Filling Algorithm<\/strong> can be used to fill any polygon. The idea is to scan the polygon using horizontal lines (scanlines). The scanlines go from the top of the polygon to the bottom. For each scanline, we determine at what points does the scanline intersect with the polygon. We arrange these intersecting points from left to right.<\/p>\n\n\n\n

\"Polygon<\/figure>\n\n\n\n

As we go from one point to another, we switch from filling mode to non-filling mode; and toggle between the states as we encounter each intersection point on the scan line. There is a bit more to consider here, specifically edge cases and how to optimize the scan; more on this can be found here: Rasterizing polygons<\/a>, or expand the following section<\/strong> for pseudocode. Scanline Algorithm Details<\/p>\n\n\n\n

We define two data structures (tables) to hold data about the polygon edges.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffc First, a global Edge Table (ET) of all the edges sorted by the Y<sub>min<\/sub><\/code> value. If the edges have the same Y<sub>min<\/sub><\/code> values, then they are sorted by their X<sub>min<\/sub><\/code> coordinate value.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffc Second, an Active Edge Table (AET) where we keep only the edges that intersect with the current scanline.<\/p>\n\n\n\n

Following describes the data structure in each row of the tables:<\/p>\n\n\n\n

interface EdgeTableEntry {\n  ymin: number;\n  ymax: number;\n  x: number; \/\/ Initialized to Xmin\n  iSlope: number; \/\/ Inverse of the slope of the line: 1\/m\n}\n\ninterface ActiveEdgeTableEntry {\n  scanlineY: number; \/\/ The y value of the scanline\n  edge: EdgeTableEntry;\n}\n<\/pre>\n\n\n\n
After initializing the Edge Table, we perform the following:<\/p>\n\n\n\n
1.<\/strong> Set y<\/em> to the smallest y<\/em> in the ET. This represents the current scanline.<\/p>\n\n\n\n
2.<\/strong> Initialize the AET to be an empty table.<\/p>\n\n\n\n
3.<\/strong> Repeat the following until both AET and ET are empty:<\/p>\n\n\n\n
(a)<\/strong> Move from ET bucket y<\/em> to the AET edges whose ymin<\/sub> \u2264 y<\/em>.<\/p>\n\n\n\n
(b)<\/strong> Remove from AET entries where y = ymax<\/sub><\/em>, then sort the AET on x<\/em>.<\/p>\n\n\n\n
(c)<\/strong> Fill in pixels on scanline y<\/em> by using pairs of x<\/em> coordinates from the AET.<\/p>\n\n\n\n
(d)<\/strong> Increment y<\/em> by appropriate value defined by the hachure density, i.e. the next scanline.<\/p>\n\n\n\n
(e)<\/strong> For each non-vertical edge remaining in the AET, update x<\/em> for the new y<\/em>
(edge.x = edge.x + edge.iSlope<\/code>)<\/p>\n\n\n\n
In the following interactive, each square represents a pixel. Move the vertices to change the polygon and see what pixels would traditionally get filled in.<\/p>\n\n\n\n
For a Hachure Fill, the scan lines are incremented in steps based on the specified hachure line density and each line is drawn using the line algorithm described above.<\/p>\n\n\n\n
This algorithm, however, is designed for horizontal scan-lines. To achieve various hachure angles, the algorithm first rotates the shape itself by the desired hachure angle. Scan-lines are calculated for the rotated shape. The computed lines are then rotated back by the hachure angle in the opposite direction.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
More than hachure fills<\/h3>\n\n\n\n
RoughJS also supports other fill styles, but they are all derived from the same hachure algorithm. A cross-hatch<\/strong> is drawing hachure lines at an angle<\/code> and then again with angle + 90\u00b0<\/code>. A zig-zag<\/strong> tries to connect one hachure line to the previous. Draw tiny circles along the hachure lines to get a dotted<\/strong> pattern.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Curves<\/h2>\n\n\n\n
Everything in RoughJS gets normalized to curves. Lines, Polygons, Ellipses, etc. So creating a sketchy curve is natural extension. In RoughJS you provide a set of points on the curve, and Curve fitting<\/a> is used to translate these into a set of Cubic Bezier Curves.<\/p>\n\n\n\n
Each Bezier curve has two endpoints, and two control points. By randomizing these based on roughness<\/code>, one can create sketchy curves in the same fashion.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Filling Curves<\/h3>\n\n\n\n
Filling curves, however, requires the opposite. Instead of normalizing everything to a curve, the curve is normalized to a polygon. Once you have a polygon, the scan-line algorithm can be used to fill the curved shape.<\/p>\n\n\n\n
One can sample the points on a curve at a desired rate by using the Cubic Bezier Curve equation<\/a>.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Using a sampling rate based on the hachure density can give you enough points to fill the shape. But it’s not very efficient. If the section of the curve is sharp, you’d want more points. If the section of the curve is nearly a straight line, you’d want fewer points. One technique is to figure out how curvy\/flat<\/em> the curve is. If it’s too curvy, split the curve into two smaller curves. If it’s flat, then just treat it as a line.<\/p>\n\n\n\n
The flatness of the curve is calculated using the method described in this blog post<\/a>. The flatness value is compared to a tolerance value to decide whether to split the curve or not.<\/p>\n\n\n\n
Here’s the same curve with a tolerance level of 0.7:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Based on the tolerance alone, this algorithm nicely provides enough points to represent a curve. It does not, however, efficiently get rid of unneeded points. A second parameter, distance<\/strong> helps with that. The technique uses the Ramer\u2013Douglas\u2013Peucker algorithm<\/a> to reduce the points.<\/p>\n\n\n\n
Following are the points generated with distance values of 0.15<\/code>, 0.75<\/code>, 1.5<\/code>, and 3.0<\/code><\/p>\n\n\n\n
\"Bezier<\/figure>\n\n\n\n
Based on the roughness<\/em> of the shape, one can set an appropriate value of distance. Once you have all the vertices of the polygon, curved shapes fill nicely:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
SVG Paths<\/h2>\n\n\n\n
SVG Paths<\/a> are very powerful and can be used to create all sorts of amazing drawings, which also makes them a bit tricky to work with.<\/p>\n\n\n\n
RoughJS parses the path and normalizes the path into only three operations: Move<\/strong>, Line<\/strong>, and Cubic Curve<\/strong>. (path-data-parser<\/a>). Once normalized, the shape can be drawn using techniques described above to draw lines and curves.<\/p>\n\n\n\n
The points-on-path<\/a> package combines the path normalization and curve point sampling to estimate the appropriate points on the path.<\/p>\n\n\n\n
Following is rough estimation of points for the path M240,100c50,0,0,125,50,100s0,-125,50,-150s175,50,50,100s-175,50,-300,0s0,-125,50,-100s0,125,50,150s0,-100,50,-100<\/code><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
An SVG example I like to share often, a sketchy<\/em> map of the United States:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Try RoughJS<\/h2>\n\n\n\n
Visit the website<\/a> or the Github repo<\/a> or the API docs<\/a>. Follow the project on Twitter @RoughLib<\/a>.<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"
How to emulate hand-drawn shapes \/ Algorithms behind RoughJS | shihn.ca A dive into graphics algorithms used in RoughJS – A graphics library that lets you draw in a sketchy, hand-drawn-like, style.<\/p>\n
Read more →<\/a><\/p>\n","protected":false},"author":1,"featured_media":14170,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"federated","footnotes":"","jetpack_publicize_message":"","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}},"categories":[72,50],"tags":[],"class_list":["post-14169","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-documentations","category-javascript"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/monodes.com\/predaelli\/wp-content\/uploads\/sites\/4\/2025\/10\/cover.png?fit=480%2C480&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p6daft-3Gx","jetpack-related-posts":[{"id":14555,"url":"https:\/\/monodes.com\/predaelli\/2025\/12\/28\/wired-elements\/","url_meta":{"origin":14169,"position":0},"title":"Wired Elements","author":"Paolo Redaelli","date":"2025-12-28","format":false,"excerpt":"Wired Elements, the perfect compation of rough.js A set of common UI elements with a hand-drawn, sketchy look. These can be used for wireframes, mockups, or just the fun hand-drawn look. The elements are drawn with enough randomness that no two renderings will be exactly the same \u2014 just like\u2026","rel":"","context":"In "Javascript"","block_context":{"text":"Javascript","link":"https:\/\/monodes.com\/predaelli\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6310,"url":"https:\/\/monodes.com\/predaelli\/2019\/12\/12\/hand-drawn-border-buttons-in-css-%e2%84%82%f0%9d%95%a0%f0%9d%95%95%f0%9d%95%96%f0%9d%95%84%f0%9d%95%aa%f0%9d%95%8c%f0%9d%95%80\/","url_meta":{"origin":14169,"position":1},"title":"Hand-Drawn Border Buttons in CSS \u2013 \u2102\ud835\udd60\ud835\udd55\ud835\udd56\ud835\udd44\ud835\udd6a\ud835\udd4c\ud835\udd40","author":"Paolo Redaelli","date":"2019-12-12","format":false,"excerpt":"Hand-Drawn Border Buttons in CSS From: Hand-Drawn Border Buttons in CSS \u2013 \u2102\ud835\udd60\ud835\udd55\ud835\udd56\ud835\udd44\ud835\udd6a\ud835\udd4c\ud835\udd40 I know I will try this style sooner or later in a WordPress theme, eventually coupled with a old-style typewriter font. Hand-Drawn Border Buttons in CSS From: Hand-Drawn Border Buttons in CSS \u2013 \u2102\ud835\udd60\ud835\udd55\ud835\udd56\ud835\udd44\ud835\udd6a\ud835\udd4c\ud835\udd40 I know I\u2026","rel":"","context":"In "Themes"","block_context":{"text":"Themes","link":"https:\/\/monodes.com\/predaelli\/category\/themes\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1139,"url":"https:\/\/monodes.com\/predaelli\/2016\/03\/12\/sorting-algorithm-animations\/","url_meta":{"origin":14169,"position":2},"title":"Sorting Algorithm Animations","author":"Paolo Redaelli","date":"2016-03-12","format":false,"excerpt":"Sorting Algorithm Animations These pages show 8 different sorting algorithms on 4 different initial conditions. These visualizations are intended to: Show how each algorithm operates. Show that there is no best sorting algorithm. Show the advantages and disadvantages of each algorithm. Show that worse-case asymptotic behavior is not always the\u2026","rel":"","context":"In "Senza categoria"","block_context":{"text":"Senza categoria","link":"https:\/\/monodes.com\/predaelli\/category\/senza-categoria\/"},"img":{"alt_text":"[cml_media_alt id='1140']sorts[\/cml_media_alt]","src":"https:\/\/i0.wp.com\/monodes.com\/predaelli\/wp-content\/uploads\/sites\/4\/2016\/03\/sorts-1.jpeg?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/monodes.com\/predaelli\/wp-content\/uploads\/sites\/4\/2016\/03\/sorts-1.jpeg?resize=350%2C200 1x, https:\/\/i0.wp.com\/monodes.com\/predaelli\/wp-content\/uploads\/sites\/4\/2016\/03\/sorts-1.jpeg?resize=525%2C300 1.5x"},"classes":[]},{"id":8153,"url":"https:\/\/monodes.com\/predaelli\/2021\/02\/05\/local-cnd-emulators\/","url_meta":{"origin":14169,"position":3},"title":"Local CND emulators","author":"Paolo Redaelli","date":"2021-02-05","format":false,"excerpt":"We may discover that we want do use them: LocalCDN LocalCDN is a web browser extension that emulates Content Delivery Networks to improve your online privacy. It intercepts traffic, finds supported resources locally, and injects them into the environment. All of this happens automatically, so no prior configuration is required.\u2026","rel":"","context":"In "Ethics"","block_context":{"text":"Ethics","link":"https:\/\/monodes.com\/predaelli\/category\/ethics\/"},"img":{"alt_text":"","src":"https:\/\/decentraleyes.org\/images\/logo.svg?v=30062018","width":350,"height":200},"classes":[]},{"id":9401,"url":"https:\/\/monodes.com\/predaelli\/2022\/05\/26\/the-simdjson-library\/","url_meta":{"origin":14169,"position":4},"title":"The simdjson library","author":"Paolo Redaelli","date":"2022-05-26","format":false,"excerpt":"The simdjson library Parsing gigabytes of JSON per second JSON is everywhere on the Internet. Servers spend a lot of time parsing it. The simdjson library uses commonly available SIMD instructions and microparallel algorithms to break speed records.","rel":"","context":"In "Agenda"","block_context":{"text":"Agenda","link":"https:\/\/monodes.com\/predaelli\/category\/agenda\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":15334,"url":"https:\/\/monodes.com\/predaelli\/2026\/03\/15\/how-can-we-trust-them\/","url_meta":{"origin":14169,"position":5},"title":"How can we trust them?","author":"Paolo Redaelli","date":"2026-03-15","format":false,"excerpt":"When I found Algorithms with TypeScript I told myself \"wow, that's an interesting book!\" And the premises are really catching: This book grew out of a simple observation: most software engineers use algorithms and data structures every day, yet many feel uncertain about the fundamentals. \u2026 Algorithms with TypeScript bridges\u2026","rel":"","context":"In "Ethics"","block_context":{"text":"Ethics","link":"https:\/\/monodes.com\/predaelli\/category\/ethics\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts\/14169","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/comments?post=14169"}],"version-history":[{"count":2,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts\/14169\/revisions"}],"predecessor-version":[{"id":14190,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts\/14169\/revisions\/14190"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/media\/14170"}],"wp:attachment":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/media?parent=14169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/categories?post=14169"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/tags?post=14169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}