3f:null 40:["$","title",null,{"children":"Rotate path around a pivot in SVG | nkint | Observable"}] 46:[] 44:{"id":"82222a03a0b3ef32","slug":"rotate-path-around-a-pivot","title":"Rotate path around a pivot in SVG","thumbnail":"8a137b1d4826e17b74fe2423de2e0675964f78fded38533f661fbd53e9c7518c","access_level":"public","create_time":"$D2019-08-13T14:55:26.402Z","update_time":"$D2019-08-14T10:55:45.388Z","view_time":null,"first_public_time":"$D2019-08-13T15:06:49.681Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"2cd6692242c1fa16","login":"nkint","name":"nkint","avatar_url":"https://avatars-next.observableusercontent.com/cb626c641e67bcdeb529f9879ed458156acb650a419405651f74f02ded214236","tier":"starter_2024","bio":"","following":false},"version":106,"publish_version":106,"role":null,"authored":false,"authors":[{"type":"individual","id":"ac79f856c9e54075","login":"nkint","name":"nkint","avatar_url":"https://avatars-next.observableusercontent.com/cb626c641e67bcdeb529f9879ed458156acb650a419405651f74f02ded214236","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"ac79f856c9e54075","login":"nkint","name":"nkint","avatar_url":"https://avatars-next.observableusercontent.com/cb626c641e67bcdeb529f9879ed458156acb650a419405651f74f02ded214236","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Rotate path around a pivot in SVG","cells":[{"id":0,"value":"md`# Rotate path around a pivot in SVG`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"md`\n## Note:\n\nThere is an important difference between canvas and SVG:\n\nSVG doesn't rotate based on the 'SVG 0 0 coordinates' but based on the element coordinates from 0,0 of your viewBox.\n\nSo for a similar trick you can can use the CSS \\`transform-origin\\`.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"html`\n

Legend:

The red dot is the pivot

The green heart is the desired result done with rotate syntax around point

The blue heart is a trial of rotation around point with transform concatenation

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"pivot = [50, 30]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"points = [ \n [10, 5],\n [12, 23],\n [13, 42],\n [14, 23],\n [15, 5],\n ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"path = `M 10,30\n A 20,20 0,0,1 50,30\n A 20,20 0,0,1 90,30\n Q 90,60 50,90\n Q 10,60 10,30 z`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"\n\nsvg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 45:"$44:body"