29:null 2a:["$","title",null,{"children":"SVG Translate Transition | Jonas | Observable"}] 2f:[] 2d:{"id":"fdd97de25d6772da","slug":null,"title":"SVG Translate Transition","thumbnail":"6bee7af7c33a67a5c350b68df9605a83d07e36bfe78137236465be9492bc7bea","access_level":"public","create_time":"$D2023-02-22T12:45:41.438Z","update_time":"$D2023-02-22T13:09:19.787Z","view_time":null,"first_public_time":"$D2023-02-22T12:45:41.438Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6015bb0b93952860","login":"jnsprnw","name":"Jonas","avatar_url":"https://avatars-next.observableusercontent.com/4ac18ffeb86a7f908cf6997d5bb728ceb25707f3a3db2104f3517527f54aa1f6","tier":"starter_2024"},"version":124,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"002ca05f0ffda548","login":"jnsprnw","name":"Jonas","avatar_url":"https://avatars-next.observableusercontent.com/4ac18ffeb86a7f908cf6997d5bb728ceb25707f3a3db2104f3517527f54aa1f6","tier":null}],"members":[{"type":"individual","id":"002ca05f0ffda548","login":"jnsprnw","name":"Jonas","avatar_url":"https://avatars-next.observableusercontent.com/4ac18ffeb86a7f908cf6997d5bb728ceb25707f3a3db2104f3517527f54aa1f6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"SVG Translate Transition","cells":[{"id":0,"value":"# SVG Translate Transition","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":36,"value":"viewof isLeft = Inputs.toggle({label: \"is left\", value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"## Simple position via cx","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"wrapCircle(svg``)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":57,"value":"## Position via SVG-transform","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":43,"value":"wrapCircle(svg``)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":59,"value":"## Position via CSS-transform\nNotice the `px` and the comma in the translate function!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":50,"value":"wrapCircle(svg``)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":101,"value":"## Position via CSS-transform with transition\nTransition only work if the transform is done by CSS.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":63,"value":"wrapCircle(svg``)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":123,"value":"## Helper","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":89,"value":"function wrapCircle(circle) {\n return svg``\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"width = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"height = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":79,"value":"postion = isLeft ? -width / 3 : width / 3;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"