{"id":306066,"date":"2020-04-15T07:51:48","date_gmt":"2020-04-15T14:51:48","guid":{"rendered":"https:\/\/css-tricks.com\/?p=306066"},"modified":"2020-04-15T07:51:49","modified_gmt":"2020-04-15T14:51:49","slug":"create-a-responsive-css-motion-path-sure-we-can","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/create-a-responsive-css-motion-path-sure-we-can\/","title":{"rendered":"Create a Responsive CSS Motion Path? Sure We Can!"},"content":{"rendered":"\n<p>There was a discussion recently on the <a href=\"https:\/\/damp-lake-50659.herokuapp.com\/\" rel=\"noopener\">Animation at Work Slack<\/a>: <em>how could you make a CSS motion path responsive?<\/em> What techniques would be work? This got me thinking.<\/p>\n\n\n\n<p>A CSS motion path allows us to animate elements along custom user-defined paths. Those paths follow the same structure as SVG paths. We define a path for an element using <code>offset-path<\/code>.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.block {\n\u00a0 offset-path: path('M20,20 C20,100 200,0 200,100');\n}<\/code><\/pre>\n\n\n\n<p>These values appear relative at first and they would be if we were using SVG. But, when used in an <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/o\/offset-path\/\"><code>offset-path<\/code><\/a>, <strong>they behave like px units.<\/strong> This is exactly the problem. Pixel units aren\u2019t really responsive. This path won\u2019t flex as the element it is in gets smaller or larger. Let\u2019s figure this out.<\/p>\n\n\n\n<p>To set the stage, the <code>offset-distance<\/code> property dictates where an element should be on that path:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_cd95c54d57891b095df99eaa02cdbd67\" src=\"\/\/codepen.io\/anon\/embed\/cd95c54d57891b095df99eaa02cdbd67?height=450&amp;theme-id=1&amp;slug-hash=cd95c54d57891b095df99eaa02cdbd67&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed cd95c54d57891b095df99eaa02cdbd67\" title=\"CodePen Embed cd95c54d57891b095df99eaa02cdbd67\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Not only can we define the distance an element is along a path, but we can also define an element&#8217;s rotation with offset-rotate. The default value is auto which results in our element following the path. Check out the property\u2019s <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/o\/offset-rotate\/\">almanac article<\/a> for more values.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_d5aa1448cb745c1affe9fd6786958053\" src=\"\/\/codepen.io\/anon\/embed\/d5aa1448cb745c1affe9fd6786958053?height=450&amp;theme-id=1&amp;slug-hash=d5aa1448cb745c1affe9fd6786958053&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed d5aa1448cb745c1affe9fd6786958053\" title=\"CodePen Embed d5aa1448cb745c1affe9fd6786958053\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>To animate an element along the path, we animate the <code>offset-distance<\/code>:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_df6858993397f31e2d15dba096bc75c2\" src=\"\/\/codepen.io\/anon\/embed\/df6858993397f31e2d15dba096bc75c2?height=450&amp;theme-id=1&amp;slug-hash=df6858993397f31e2d15dba096bc75c2&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed df6858993397f31e2d15dba096bc75c2\" title=\"CodePen Embed df6858993397f31e2d15dba096bc75c2\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>OK, that catches up to speed on moving elements along a path. Now we have to answer\u2026<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"can-we-make-responsive-paths\">Can we make responsive paths?<\/h3>\n\n\n<p>The sticking point with CSS motion paths is the hardcoded nature. It&#8217;s not flexible. We are stuck hardcoding paths for particular dimensions and viewport sizes. A path that animates an element 600px, will animate that element 600px regardless of whether the viewport is 300px or 3440px wide.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2020\/03\/rwd-motion-path-1.mp4\"><\/video><\/figure>\n\n\n\n<p>This differs from what we are familiar with when using SVG paths. They will scale with the size of the SVG viewbox.<\/p>\n\n\n\n<p>Try resizing this next demo below and you\u2019ll see:<\/p>\n\n\n\n<ul><li>The SVG will scale with the viewport size as will the contained path.<\/li><li>The offset-path <strong>does not<\/strong> scale and the element goes off course.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_9fa8d87f764fbb682732b81985a87d5a\" src=\"\/\/codepen.io\/anon\/embed\/9fa8d87f764fbb682732b81985a87d5a?height=450&amp;theme-id=1&amp;slug-hash=9fa8d87f764fbb682732b81985a87d5a&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 9fa8d87f764fbb682732b81985a87d5a\" title=\"CodePen Embed 9fa8d87f764fbb682732b81985a87d5a\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This could be okay for simpler paths. But once our paths become more complicated, it will be hard to maintain. Especially if we wish to use paths we&#8217;ve created in vector drawing applications.<\/p>\n\n\n\n<p>For example, consider the path we worked with earlier:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n\u00a0 --path: 'M20,20 C20,100 200,0 200,100';\n\u00a0 offset-path: path(var(--path));\n}<\/code><\/pre>\n\n\n\n<p>To scale that up to a different container size, we would need to work out the path ourselves, then apply that path at different breakpoints. But even with this &#8220;simple&#8221; path, is it a case of multiplying all the path values? Will that give us the right scaling?<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@media(min-width: 768px) {\n\u00a0 .element {\n\u00a0 \u00a0 --path: 'M40,40 C40,200 400,0 400,200'; \/\/ ????\n\u00a0 }\n}<\/code><\/pre>\n\n\n\n<p>A more complex path such as one drawn in a vector application is going to be trickier to maintain. It will need the developer to open the application, rescale the path, export it, and integrate it with the CSS. This will need to happen for all container size variations. It\u2019s not the worst solution, but it does require a level of maintenance that we might not want to get ourselves into.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n\u00a0 --path: 'M40,228.75L55.729166666666664,197.29166666666666C71.45833333333333,165.83333333333334,102.91666666666667,102.91666666666667,134.375,102.91666666666667C165.83333333333334,102.91666666666667,197.29166666666666,165.83333333333334,228.75,228.75C260.2083333333333,291.6666666666667,291.6666666666667,354.5833333333333,323.125,354.5833333333333C354.5833333333333,354.5833333333333,386.0416666666667,291.6666666666667,401.7708333333333,260.2083333333333L417.5,228.75';\n\u00a0 offset-path: path(var(--path));\n}\n\u2028\n@media(min-width: 768px) {\n\u00a0 .element {\n\u00a0 \u00a0 --path: 'M40,223.875L55.322916666666664,193.22916666666666C70.64583333333333,162.58333333333334,101.29166666666667,101.29166666666667,131.9375,101.29166666666667C162.58333333333334,101.29166666666667,193.22916666666666,162.58333333333334,223.875,223.875C254.52083333333334,285.1666666666667,285.1666666666667,346.4583333333333,315.8125,346.4583333333333C346.4583333333333,346.4583333333333,377.1041666666667,285.1666666666667,392.4270833333333,254.52083333333334L407.75,223.875';\n\u00a0 }\n}\n\u2028\n@media(min-width: 992px) {\n\u00a0 .element {\n\u00a0 \u00a0 --path: 'M40,221.625L55.135416666666664,191.35416666666666C70.27083333333333,161.08333333333334,100.54166666666667,100.54166666666667,130.8125,100.54166666666667C161.08333333333334,100.54166666666667,191.35416666666666,161.08333333333334,221.625,221.625C251.89583333333334,282.1666666666667,282.1666666666667,342.7083333333333,312.4375,342.7083333333333C342.7083333333333,342.7083333333333,372.9791666666667,282.1666666666667,388.1145833333333,251.89583333333334L403.25,221.625';\n\u00a0 }\n}<\/code><\/pre>\n\n\n\n<p>It feels like a JavaScript solution makes sense here. GreenSock is my first thought because its <a href=\"https:\/\/greensock.com\/motionpath\/\" rel=\"noopener\">MotionPath<\/a> plugin can scale SVG paths. But what if we want to animate outside of an SVG? Could we write a function that scales the paths for us? We could but it won&#8217;t be straightforward.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"trying-different-approaches\">Trying different approaches<\/h3>\n\n\n<p>What tool allows us to define a path in some way without the mental overhead? A charting library! Something like <a href=\"https:\/\/d3js.org\" rel=\"noopener\">D3.js<\/a> allows us to pass in a set of coordinates and receive a generated path string. We can tailor that string to our needs with different curves, sizing, etc.<\/p>\n\n\n\n<p>With a little tinkering, we can create a function that scales a path based on a defined coordinate system:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_9af4e20e6307178f27ede2f3e7ff6f78\" src=\"\/\/codepen.io\/anon\/embed\/9af4e20e6307178f27ede2f3e7ff6f78?height=450&amp;theme-id=1&amp;slug-hash=9af4e20e6307178f27ede2f3e7ff6f78&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 9af4e20e6307178f27ede2f3e7ff6f78\" title=\"CodePen Embed 9af4e20e6307178f27ede2f3e7ff6f78\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This definitely works, but it\u2019s also less than ideal because it&#8217;s unlikely we are going to be declaring SVG paths using sets of coordinates. What we want to do is take a path straight out of a vector drawing application, optimize it, and drop it on a page. That way, we can invoke some JavaScript function and let that do the heavy lifting.<\/p>\n\n\n\n<p>So that\u2019s exactly what we are going to do.<\/p>\n\n\n\n<p>First, we need to create a path. This one was thrown together quickly in Inkscape. Other vector drawing tools are available.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"271\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/path-doodle.png?resize=700%2C271&#038;ssl=1\" alt=\"\" class=\"wp-image-306067\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/path-doodle.png?w=700&amp;ssl=1 700w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/path-doodle.png?resize=300%2C116&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>A path created in Inkscape on a 300&#215;300 canvas<\/figcaption><\/figure>\n\n\n\n<p>Next, let\u2019s optimize the SVG. After saving the SVG file, we\u2019ll run it through Jake Archibald\u2019s brilliant <a href=\"https:\/\/jakearchibald.github.io\/svgomg\/\" rel=\"noopener\">SVGOMG<\/a> tool. That gives us something along these lines:<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 79.375 79.375\" height=\"300\" width=\"300\">&lt;path d=\"M10.362 18.996s-6.046 21.453 1.47 25.329c10.158 5.238 18.033-21.308 29.039-18.23 13.125 3.672 18.325 36.55 18.325 36.55l12.031-47.544\" fill=\"none\" stroke=\"#000\" stroke-width=\".265\"\/>&lt;\/svg><\/code><\/pre>\n\n\n\n<p>The parts we\u2019re interested are <code>path<\/code> and <code>viewBox<\/code>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"expanding-the-javascript-solution\">Expanding the JavaScript solution<\/h3>\n\n\n<p>Now we can create a JavaScript function to handle the rest. Earlier, we created a function that takes a set of data points and converts them into a scalable SVG path. But now we want to take that a step further and take the path string and work out the data set. This way our users never have to worry about trying to convert their paths into data sets.<\/p>\n\n\n\n<p>There is one caveat to our function: Besides the path string, we also need some bounds by which to scale the path against. These bounds are likely to be the third and fourth values of the viewBox attribute in our optimized SVG.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">const path =\n\"M10.362 18.996s-6.046 21.453 1.47 25.329c10.158 5.238 18.033-21.308 29.039-18.23 13.125 3.672 18.325 36.55 18.325 36.55l12.031-47.544\";\nconst height = 79.375 \/\/ equivalent to viewbox y2\nconst width = 79.375 \/\/ equivalent to viewbox x2\n\u2028\nconst motionPath = new ResponsiveMotionPath({\n\u00a0 height,\n\u00a0 width,\n\u00a0 path,\n});<\/code><\/pre>\n\n\n\n<p>We won\u2019t go through this function line-by-line. You can check it out in the demo! But we will highlight the important steps that make this possible.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"first-were-converting-a-path-string-into-a-data-set\">First, we\u2019re converting a path string into a data set<\/h4>\n\n\n<p>The biggest part of making this possible is being able to read the path segments. This is totally possible, thanks to the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/SVGGeometryElement\" rel=\"noopener\">SVGGeometryElement API<\/a>. We start by creating an SVG element with a path and assigning the path string to its <code>d<\/code> attribute.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/\/ To convert the path data to points, we need an SVG path element.\nconst svgContainer = document.createElement('div');\n\/\/ To create one though, a quick way is to use innerHTML\nsvgContainer.innerHTML = `\n\u00a0 &lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\u00a0 \u00a0 &lt;path d=\"${path}\" stroke-width=\"${strokeWidth}\"\/>\n\u00a0 &lt;\/svg>`;\nconst pathElement = svgContainer.querySelector('path');<\/code><\/pre>\n\n\n\n<p>Then we can use the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/SVGGeometryElement\" rel=\"noopener\">SVGGeometryElement API<\/a> on that path element. All we need to do is iterate over the total length of the path and return the point at each length of the path.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">convertPathToData = path => {\n\u00a0 \/\/ To convert the path data to points, we need an SVG path element.\n\u00a0 const svgContainer = document.createElement('div');\n\u00a0 \/\/ To create one though, a quick way is to use innerHTML\n\u00a0 svgContainer.innerHTML = `&lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;path d=\"${path}\"\/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;\/svg>`;\n\u00a0 const pathElement = svgContainer.querySelector('path');\n\u00a0 \/\/ Now to gather up the path points.\n\u00a0 const DATA = [];\n\u00a0 \/\/ Iterate over the total length of the path pushing the x and y into\n\u00a0 \/\/ a data set for d3 to handle &#x1f44d;\n\u00a0 for (let p = 0; p &lt; pathElement.getTotalLength(); p++) {\n\u00a0 \u00a0 const { x, y } = pathElement.getPointAtLength(p);\n\u00a0 \u00a0 DATA.push([x, y]);\n\u00a0 }\n\u00a0 return DATA;\n}<\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"next-we-generate-scaling-ratios\">Next, we generate scaling ratios<\/h4>\n\n\n<p>Remember how we said we\u2019d need some bounds likely defined by the <code>viewBox<\/code>? This is why. We need some way to calculate a ratio of the motion path against its container. This ratio will be equal to that of the path against the SVG <code>viewBox<\/code>. We will then use these with <a href=\"https:\/\/github.com\/d3\/d3-scale\" rel=\"noopener\">D3.js scales<\/a>.<\/p>\n\n\n\n<p>We have two functions: one to grab the largest <code>x<\/code> and <code>y<\/code> values, and another to calculate the ratios in relation to the <code>viewBox<\/code>.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">getMaximums = data => {\n\u00a0 const X_POINTS = data.map(point => point[0])\n\u00a0 const Y_POINTS = data.map(point => point[1])\n\u00a0 return [\n\u00a0 \u00a0 Math.max(...X_POINTS), \/\/ x2\n\u00a0 \u00a0 Math.max(...Y_POINTS), \/\/ y2\n\u00a0 ]\n}\ngetRatios = (maxs, width, height) => [maxs[0] \/ width, maxs[1] \/ height]<\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"now-we-need-to-generate-the-path\">Now we need to generate the path<\/h4>\n\n\n<p>The last piece of the puzzle is to actually generate the path for our element. This is where D3.js actually comes into play. Don&#8217;t worry if you haven&#8217;t used it before because we\u2019re only using a couple of functions from it. Specifically, we are going to use D3 to generate a path string with the data set we generated earlier.<\/p>\n\n\n\n<p>To create a line with our data set, we do this:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">d3.line()(data); \/\/ M10.362000465393066,18.996000289916992L10.107386589050293, etc.<\/code><\/pre>\n\n\n\n<p>The issue is that those points aren&#8217;t scaled to our container. The cool thing with D3 is that it provides the ability to create scales. These act as interpolation functions. See where this is going? We can write one set of coordinates and then have D3 recalculate the path. We can do this based on our container size using the ratios we generated.<\/p>\n\n\n\n<p>For example, here\u2019s the scale for our <code>x<\/code> coordinates:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">const xScale = d3\n\u00a0 .scaleLinear()\n\u00a0 .domain([\n\u00a0 \u00a0 0,\n\u00a0 \u00a0 maxWidth,\n\u00a0 ])\n\u00a0 .range([0, width * widthRatio]);<\/code><\/pre>\n\n\n\n<p>The domain is from 0 to our highest <code>x<\/code> value. The range in most cases will go from 0 to container width multiplied by our width ratio.<\/p>\n\n\n\n<p>There are times where our range may differ and we need to scale it. This is when the aspect ratio of our container doesn\u2019t match that of our path. For example, consider a path in an SVG with a <code>viewBox<\/code> of <code>0 0 100 200<\/code>. That\u2019s an aspect ratio of 1:2. But if we then draw this in a container that has a height and width of 20vmin, the aspect ratio of the container is 1:1. We need to pad the width range to keep the path centered and maintain the aspect ratio.<\/p>\n\n\n\n<p>What we can do in these cases is calculate an offset so that our path will still be centered in our container.&nbsp;<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">const widthRatio = (height - width) \/ height\nconst widthOffset = (ratio * containerWidth) \/ 2\nconst xScale = d3\n\u00a0 .scaleLinear()\n\u00a0 .domain([0, maxWidth])\n\u00a0 .range([widthOffset, containerWidth * widthRatio - widthOffset])<\/code><\/pre>\n\n\n\n<p>Once we have two scales, we can map our data points using the scales and generate a new line.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">const SCALED_POINTS = data.map(POINT => [\n\u00a0 xScale(POINT[0]),\n\u00a0 yScale(POINT[1]),\n]);\nd3.line()(SCALED_POINTS); \/\/ Scaled path string that is scaled to our container<\/code><\/pre>\n\n\n\n<p>We can apply that path to our element by passing it inline via a CSS property &#x1f44d;<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">ELEMENT.style.setProperty('--path', `\"${newPath}\"`);<\/code><\/pre>\n\n\n\n<p>Then it\u2019s our responsibility to decide when we want to generate and apply a new scaled path. Here\u2019s one possible solution:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">const setPath = () => {\n\u00a0 const scaledPath = responsivePath.generatePath(\n\u00a0 \u00a0 CONTAINER.offsetWidth,\n\u00a0 \u00a0 CONTAINER.offsetHeight\n\u00a0 )\n\u00a0 ELEMENT.style.setProperty('--path', `\"${scaledPath}\"`)\n}\nconst SizeObserver = new ResizeObserver(setPath)\nSizeObserver.observe(CONTAINER)<\/code><\/pre>\n\n\n\n<p>This demo (viewed best in full screen) shows three versions of the element using a motion path. The paths are present to easier see the scaling. The first version is the unscaled SVG. The second is a scaling container illustrating how the path doesn&#8217;t scale. The third is using our JavaScript solution to scale the path.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_oNXdaZp\" src=\"\/\/codepen.io\/anon\/embed\/oNXdaZp?height=800&amp;theme-id=1&amp;slug-hash=oNXdaZp&amp;default-tab=result\" height=\"800\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed oNXdaZp\" title=\"CodePen Embed oNXdaZp\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"phew-we-did-it\">Phew, we did it!<\/h3>\n\n\n<p>This was a really cool challenge and I definitely learned a bunch from it! Here\u2019s a couple of demos using the solution.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ExjpmZV\" src=\"\/\/codepen.io\/anon\/embed\/ExjpmZV?height=350&amp;theme-id=1&amp;slug-hash=ExjpmZV&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ExjpmZV\" title=\"CodePen Embed ExjpmZV\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ZEGjZvj\" src=\"\/\/codepen.io\/anon\/embed\/ZEGjZvj?height=350&amp;theme-id=1&amp;slug-hash=ZEGjZvj&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ZEGjZvj\" title=\"CodePen Embed ZEGjZvj\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>It should work as a proof of concept and looks promising! Feel free to drop your own optimized SVG files into this demo to try them out! \u2014 it should catch most aspect ratios.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_dyoewER\" src=\"\/\/codepen.io\/anon\/embed\/dyoewER?height=600&amp;theme-id=1&amp;slug-hash=dyoewER&amp;default-tab=result\" height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed dyoewER\" title=\"CodePen Embed dyoewER\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>I&#8217;ve created a package named &#8220;<a class=\"ek-link\" href=\"https:\/\/npmjs.org\/meanderer\" rel=\"noopener\">Meanderer<\/a>&#8221; on <a class=\"ek-link\" href=\"https:\/\/github.com\/jh3y\/meanderer\" rel=\"noopener\">GitHub<\/a> and <a class=\"ek-link\" href=\"https:\/\/npmjs.org\/meanderer\" rel=\"noopener\">npm<\/a>. You can also pull it down with <a class=\"ek-link\" href=\"https:\/\/unpkg.com\/meanderer\" rel=\"noopener\">unpkg CDN<\/a> to play with it in CodePen, if you want to try it out.<\/p>\n\n\n\n<p>I look forward to seeing where this might go and hope we might see some native way of handling this in the future. &#x1f64f;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>There was a discussion recently on the Animation at Work Slack: how could you make a CSS motion path responsive? What techniques would be work? This got me thinking. A CSS motion path allows us to animate elements along custom user-defined paths. Those paths follow the same structure as SVG paths. We define a path [&hellip;]<\/p>\n","protected":false},"author":265369,"featured_media":306855,"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":[1657,1661,1658],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/responsive-motion-path.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":307127,"url":"https:\/\/css-tricks.com\/different-approaches-to-responsive-css-motion-path\/","url_meta":{"origin":306066,"position":0},"title":"Different Approaches to Responsive CSS Motion Path","date":"April 24, 2020","format":false,"excerpt":"As a follow-up to Jhey's recent post on responsive motion paths, Michelle Barker notes that another approach could be to just transform: scale() the whole dang element. The trade-off there is that you're scaling both the path and the element on the path at the same time; Jhey's approach only\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/animated-motion-path.gif?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":299869,"url":"https:\/\/css-tricks.com\/motion-paths-past-present-and-future\/","url_meta":{"origin":306066,"position":1},"title":"Motion Paths \u2013 Past, Present and Future","date":"December 6, 2019","format":false,"excerpt":"Cassie Evans has a great intro to motion paths. That is, being able to animate an element along a path. Not just up\/down\/left\/right, but whatever curvy\/wiggly\/weird path you want. It's an interesting subject because there are so many different technologies helping to do it over time. SMIL, JavaScript-powered animation libraries,\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/cassie-evans-motion-path.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":303113,"url":"https:\/\/css-tricks.com\/get-moving-or-not-with-css-motion-path\/","url_meta":{"origin":306066,"position":2},"title":"Get Moving (or not) with CSS Motion Path","date":"February 3, 2020","format":false,"excerpt":"We just linked up the idea that offset-path can be cleverly used to set type on a path. Don't miss Michelle Barker's experimentation either, with drawing paths or animating text along a path. Dan Wilson has also been following this tech for quite a while and points out why the\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/path.png?fit=1200%2C699&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":249797,"url":"https:\/\/css-tricks.com\/basic-shapes-path-never-twain-shall-meet\/","url_meta":{"origin":306066,"position":3},"title":"Basic Shapes &#038; Path&#8230; Never the Twain Shall Meet?","date":"February 7, 2017","format":false,"excerpt":"There are some values available in CSS that allow shapes to be drawn. For example, there is a circle() function that is a valid value for a couple of CSS properties. \"Drawn\" might not be the right word, though. It's not like in SVG where you can create a element\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/02\/round-clip-path.png?fit=500%2C420&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":302008,"url":"https:\/\/css-tricks.com\/set-type-on-a-circle-with-offset-path\/","url_meta":{"origin":306066,"position":4},"title":"Set Type on a Circle&#8230; with offset-path","date":"January 28, 2020","format":false,"excerpt":"Here's some legit CSS trickery from yuanchuan. There is this CSS property offset-path. Once upon a time, it was called motion-path and then it was renamed. I sort of rolled my eyes at the time, because the property is so obviously for animating things along a path. But you don't\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/circles-circles-circles.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":324484,"url":"https:\/\/css-tricks.com\/libraries-for-svg-drawing-animations\/","url_meta":{"origin":306066,"position":5},"title":"Libraries for SVG Drawing Animations","date":"November 11, 2020","format":false,"excerpt":"In 2013, Jake Archibald introduced this cool trick of animating an SVG path to look like it\u2019s drawing itself. It\u2019s 2020 now, and the trick is still popular. I\u2019ve seen it on a lot of websites I\u2019ve visited recently. I, too, feature an animated SVG loader on my website using\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/castle-svg-texture.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/responsive-motion-path.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/306066"}],"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\/265369"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=306066"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/306066\/revisions"}],"predecessor-version":[{"id":306798,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/306066\/revisions\/306798"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/306855"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=306066"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=306066"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=306066"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}