2c:null 2d:["$","title",null,{"children":"Rotating SVG paths | Di | Observable"}] 32:T62f,exampleN = { const svgWidth = 300; const svgHeight = 300; const data = ["a", "b", "c", "d"] const innerRadius = 90; const outerRadius = 150; const svg = d3.create("svg") .attr("width", svgWidth) .attr("height", svgHeight) .attr("id", "exampleN"); svg.append("rect") .attr("fill", "#021D3B") .attr("width", svgWidth) .attr("height", svgHeight); const arc = d3.arc() .innerRadius(0) .outerRadius(150) .startAngle(0) .endAngle(Math.PI / 2); svg.append("path") .style("transform", "translate(0px, 0px)") .attr("class", d => d) .attr("fill", "#000") .attr("stroke", "none") .attr("d", arc); svg.append("path") .style("transform", "translate(37.5px, 37.5px)") .attr("class", d => d) .attr("fill", "#6A1131") .attr("stroke", "none") .attr("d", arc); svg.append("path") .style("transform", "translate(75px, 75px)") .attr("class", d => d) .attr("fill", "#E26F99") .attr("stroke", "none") .attr("d", arc); svg.append("path") .style("transform", "translate(112.5px, 112.5px)") .attr("class", d => d) .attr("fill", "#F5D6E1") .attr("stroke", "none") .attr("d", arc); svg.append("path") .style("transform", "translate(150px, 150px)") .attr("class", d => d) .attr("fill", "#fff") .attr("stroke", "none") .attr("d", arc); return svg.node(); }33:T559,exampleO = { const svgWidth = 300; const svgHeight = 300; const data = ["a", "b", "c", "d"] const innerRadius = 90; const outerRadius = 150; const colorScale = d3 .scaleOrdinal() .range(["#FAEBF0", "#F5D6E1", "#F2C5D6", "#E89BB7"]); const radiusAccessor = d => data.indexOf(d); const radiusScale = d3 .scaleLinear() .domain([0, data.length]) .range([innerRadius, outerRadius]); const arcGenerator = d3 .arc() .innerRadius((d, i) => radiusScale(i)) .outerRadius((d, i) => radiusScale(i + 1)) .startAngle(-2 * Math.PI / 12 / 2) .endAngle(2 * Math.PI / 12 / 2); const svg = d3.create("svg") .attr("width", svgWidth) .attr("height", svgHeight) .attr("id", "exampleO"); svg.append("rect") .attr("fill", "#021D3B") .attr("width", svgWidth) .attr("height", svgHeight); const group = svg.append("g") .attr("id", "exampleO-annulus-sector-group") .style("transform", "translate(150px, 150px)") // .style("transform-origin", "150px 150px"); // .style("transform-origin", "0px 0px"); const annulusSector = group .selectAll("path") .data(data) .join("path") .attr("class", d => d) .attr("fill", d => colorScale(d)) .attr("stroke", "none") .attr("d", arcGenerator); return svg.node(); }34:T533,exampleP = { const svgWidth = 300; const svgHeight = 300; const data = ["a", "b", "c", "d"] const innerRadius = 90; const outerRadius = 150; const colorScale = d3 .scaleOrdinal() .range(["#FAEBF0", "#F5D6E1", "#F2C5D6", "#E89BB7"]); const radiusAccessor = d => data.indexOf(d); const radiusScale = d3 .scaleLinear() .domain([0, data.length]) .range([innerRadius, outerRadius]); const arcGenerator = d3 .arc() .innerRadius((d, i) => radiusScale(i)) .outerRadius((d, i) => radiusScale(i + 1)) .startAngle(-2 * Math.PI / 12 / 2) .endAngle(2 * Math.PI / 12 / 2); const svg = d3.create("svg") .attr("width", svgWidth) .attr("height", svgHeight) .attr("id", "exampleP"); svg.append("rect") .attr("fill", "#021D3B") .attr("width", svgWidth) .attr("height", svgHeight); const group = svg.append("g") .attr("id", "exampleP-annulus-sector-group") .style("transform", "translate(150px, 150px) rotate(90deg)") // .style("transform-origin", "0px 0px"); const annulusSector = group .selectAll("path") .data(data) .join("path") .attr("class", d => d) .attr("fill", d => colorScale(d)) .attr("stroke", "none") .attr("d", arcGenerator); return svg.node(); }35:T6a5,exampleQ = { const svgWidth = 300; const svgHeight = 300; const data = ["a", "b", "c", "d"] const innerRadius = 90; const outerRadius = 150; const colorScale = d3 .scaleOrdinal() .range(["#FAEBF0", "#F5D6E1", "#F2C5D6", "#E89BB7"]); const radiusAccessor = d => data.indexOf(d); const radiusScale = d3 .scaleLinear() .domain([0, data.length]) .range([innerRadius, outerRadius]); const arcGenerator = d3 .arc() .innerRadius((d, i) => radiusScale(i)) .outerRadius((d, i) => radiusScale(i + 1)) .startAngle(-2 * Math.PI / 12 / 2) .endAngle(2 * Math.PI / 12 / 2); const svg = d3.create("svg") .attr("width", svgWidth) .attr("height", svgHeight) .attr("id", "exampleQ"); svg.append("style") .html(` #exampleQ-annulus-sector-group { animation: 3s ease-in-out infinite alternate myAnnulusRotationAnimation; } @keyframes myAnnulusRotationAnimation { 0% { transform: translate(150px, 150px) rotate(0deg) } 100% { transform: translate(150px, 150px) rotate(90deg) } }`) svg.append("rect") .attr("fill", "#021D3B") .attr("width", svgWidth) .attr("height", svgHeight); const group = svg.append("g") .attr("id", "exampleQ-annulus-sector-group") // .style("animation", "3s ease-in-out infinite alternate myAnnulusRotationAnimation"); const annulusSector = group .selectAll("path") .data(data) .join("path") .attr("class", d => d) .attr("fill", d => colorScale(d)) .attr("stroke", "none") .attr("d", arcGenerator); return svg.node(); }36:[{"id":"68d78206f52b3f3ddccda659b9e5d009168178746c05b8b464bd2c40af941ee2e190a85362ce81a5469a0bd690ca497b2ddd43f3392666fadb16192811ffd091","href":"https://static.observableusercontent.com/files/68d78206f52b3f3ddccda659b9e5d009168178746c05b8b464bd2c40af941ee2e190a85362ce81a5469a0bd690ca497b2ddd43f3392666fadb16192811ffd091","name":"image@2.png","type":"image/png","lastModified":1710130164283.687,"size":498874},{"id":"68d78206f52b3f3ddccda659b9e5d009168178746c05b8b464bd2c40af941ee2e190a85362ce81a5469a0bd690ca497b2ddd43f3392666fadb16192811ffd091","href":"https://static.observableusercontent.com/files/68d78206f52b3f3ddccda659b9e5d009168178746c05b8b464bd2c40af941ee2e190a85362ce81a5469a0bd690ca497b2ddd43f3392666fadb16192811ffd091","name":"image@3.png","type":"image/png","lastModified":1710130170365.581,"size":498874},{"id":"60ef1d49b7eb9da3a6a5a42756f3e88d580f671da1400cb0008740dc3701fa01539d36e3a3a0b94117c22e54eb159a3868d78d86734daabfb8779e15456c8703","href":"https://static.observableusercontent.com/files/60ef1d49b7eb9da3a6a5a42756f3e88d580f671da1400cb0008740dc3701fa01539d36e3a3a0b94117c22e54eb159a3868d78d86734daabfb8779e15456c8703","name":"image.png","type":"image/png","lastModified":1708221126766.322,"size":36180},{"id":"2f460a52a13716e6a9552f6bef14fc19750129b66fc67eb932108fcb9389f1dde2a162ced31f48ba3a8737e95ff5b71a246bc74c723daf75700427be2db8302c","href":"https://static.observableusercontent.com/files/2f460a52a13716e6a9552f6bef14fc19750129b66fc67eb932108fcb9389f1dde2a162ced31f48ba3a8737e95ff5b71a246bc74c723daf75700427be2db8302c","name":"image@1.png","type":"image/png","lastModified":1708228477344.612,"size":28530}] 30:{"id":"76bd904e254b10d2","slug":"rotating-svg-paths","title":"Rotating SVG paths","thumbnail":"941b3cae83e00f06ac59c4f0af9cf6b0f08bbd7f752addf5b1ab2607b1c57956","access_level":"public","create_time":"$D2024-02-18T01:32:41.418Z","update_time":"$D2024-03-11T04:11:46.575Z","view_time":null,"first_public_time":"$D2024-02-18T06:33:36.744Z","has_unpublished_edits":null,"fork":{"id":"7012061a800e7057","slug":"simple-svg","title":"Simple SVG","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":3,"starred":false,"owner":{"type":"team","id":"a2b4f87238ecc18c","login":"didoesdigital","name":"Di","avatar_url":"https://avatars-next.observableusercontent.com/0a9ca38d905225337455dc1f1fb979c788c1d0d904071dd82624a90edf934c53","tier":"starter_2024"},"version":633,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"32668205beaa5e0d","login":"didoesdigital","name":"Di","avatar_url":"https://avatars-next.observableusercontent.com/0a9ca38d905225337455dc1f1fb979c788c1d0d904071dd82624a90edf934c53","tier":null}],"members":[{"type":"individual","id":"32668205beaa5e0d","login":"didoesdigital","name":"Di","avatar_url":"https://avatars-next.observableusercontent.com/0a9ca38d905225337455dc1f1fb979c788c1d0d904071dd82624a90edf934c53","tier":null,"role":"editor"},{"type":"team","id":"a2b4f87238ecc18c","login":"didoesdigital","name":"Di","avatar_url":"https://avatars-next.observableusercontent.com/0a9ca38d905225337455dc1f1fb979c788c1d0d904071dd82624a90edf934c53","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Rotating SVG paths","cells":[{"id":0,"value":"# Rotating SVG paths","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"This notebook covers how to rotate SVG paths using:\n\n- SVG transform presentation attribute with rotate value,\n- CSS transform property with rotate value, and\n- D3 arc generators and CSS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":606,"value":"## Circular sector path definitions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":615,"value":"Let's start with creating a circular sector `path` element to play with.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":74,"value":"First, I created a circular sector in [Figma using the Arc tool](https://help.figma.com/hc/en-us/articles/360040450173-Arc-tool-create-arcs-semi-circles-and-rings) from a 300×300px circle:\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":83,"value":"imageFigma = {\n const img = await FileAttachment(\"image.png\").image();\n img.alt = \"Screenshot of Figma showing a 300 x 300 frame with a grey sector from a 300 x 300 circle\"\n img.width = 375;\n return img;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"I then selected the frame and used \"Copy as SVG\" to export the frame's SVG containing the circular sector `path`. Its path definition is relative to the 300×300px frame:\n~~~svg\n\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":113,"value":"Here's that circular sector in a real SVG:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":140,"value":"htl.html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"*In Figma, If I had selected only the sector when I copied to SVG, it would have produced a path like this:*\n~~~svg\n\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"htl.html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"Back to our initial sector:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":155,"value":"htl.html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"## SVG transform rotate","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":160,"value":"To rotate that circular sector using the SVG `transform` attribute, I can use `` to rotate it 14 degrees:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":163,"value":"htl.html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"But it's rotating weirdly, not around the centre of the square. If I take it even further and rotate it 45 degrees, we can see that it's rotating around the top left corner of the square:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":189,"value":"htl.html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"## SVG transform rotate about `x,y` point","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":194,"value":"There are optional `x` and `y` parameters we can provide to set the point about which the `path` rotates. Let's try ``:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":197,"value":"htl.html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"That's more like it!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":182,"value":"According to [MDN: SVG transform rotate](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform#rotate):\n\n> If optional parameters `x` and `y` are not supplied, the rotation is about the origin of the current user coordinate system. If optional parameters `x` and `y` are supplied, the rotation is about the point `(x, y)`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":219,"value":"Well that works as an SVG attribute, but what if we want to set our rotation using CSS?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":599,"value":"## CSS `transform`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":50,"value":"According to [MDN: transform SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform):\n> As of SVG2, `transform` is a presentation attribute, meaning it can be used as a CSS property. However, be aware that there are some differences in syntax between the CSS property and the attribute. See the documentation for the [CSS property `transform`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) for the specific syntax to use in that case.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":293,"value":"This time, I'll add a CSS style, `transform: rotate(45deg)`:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":291,"value":"htl.html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"Oh! That still has the SVG transform attribute on it, but the CSS transform property takes priority and the SVG attribute is ignored. In other words, the CSS rotation does not build on and add to the SVG rotation, but instead replaces it.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":235,"value":"Now I will *remove* the SVG transform attribute and keep only the CSS style, `transform: rotate(45deg)`:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":224,"value":"htl.html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"As before, we're rotating the circular sector about the wrong point.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":597,"value":"## CSS `transform-origin`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":61,"value":"According to [MDN: CSS transform-origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin):\n> The transform origin is the point around which a transformation is applied. For example, the transform origin of the `rotate()` function is the center of rotation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":244,"value":"This time, I'll add a `transform-origin: 150px 150px;` using pixels:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":240,"value":"htl.html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"## `viewBox`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":246,"value":"But we don't typically use pixels in SVG. Instead, we specify magical unitless SVG numbers. So what happens if we mess with the `viewBox`? Let's add a `viewBox` with double the width and height of our square, `