29:null 2a:["$","title",null,{"children":"SVG & CSS TRYOUTS | Sandraviz | Observable"}] 2f:T535,style = html``30:[] 2d:{"id":"0112afad204f2c76","slug":null,"title":"SVG & CSS TRYOUTS","thumbnail":"4c99e2569854c8aed19dd37064fced453fb8042292b54806f46767ca6805d381","access_level":"public","create_time":"$D2021-09-30T13:31:56.782Z","update_time":"$D2023-10-02T14:15:49.409Z","view_time":null,"first_public_time":"$D2021-09-30T13:37:56.568Z","fork":{"id":"e57692300453779b","slug":"interactive-svg","title":"Interactive SVG","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":2,"starred":false,"owner":{"type":"team","id":"6661932e6ac85aef","login":"sandraviz","name":"Sandraviz","avatar_url":"https://avatars-next.observableusercontent.com/e6a2480f89a40dcfbe75f19d5081ae2296848971c4b934ed0499fd3b7f1973eb","tier":"starter_2024"},"version":573,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3d1beb3a90fbfe98","login":"sandraviz","name":"Sandraviz","avatar_url":"https://avatars-next.observableusercontent.com/9b19f1a074469dcaafa9bd24c7b08f4bc969889b551fe70c209497f1d03c6514","tier":null}],"members":[{"type":"individual","id":"3d1beb3a90fbfe98","login":"sandraviz","name":"Sandraviz","avatar_url":"https://avatars-next.observableusercontent.com/9b19f1a074469dcaafa9bd24c7b08f4bc969889b551fe70c209497f1d03c6514","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"SVG & CSS TRYOUTS","cells":[{"id":0,"value":"# SVG & CSS TRYOUTS\n\nI use this notebook to tryout SVG concepts that I see for the first time in a visualisation and want to use. \n\n### SVG warm up\nTo get started I just created simple SVG visuals like circle, rect and line. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4,"value":"htl.html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":469,"value":"### Path\nThe SVG element is the generic element to define a shape. All the basic shapes can be created with a path element.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":466,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":121,"value":"### Arcs\nThe other type of curved line that can be created using SVG is the arc, called with the A command. Arcs are sections of circles or ellipses. For a given x-radius and y-radius, there are two ellipses that can connect any two points (as long as they're within the radius of the circle). Along either of those circles, there are two possible paths that can be taken to connect the points—so in any situation, there are four possible arcs available.\n\nBecause of that, arcs require quite a few parameters:\n\n A rx ry x-axis-rotation large-arc-flag sweep-flag x y. \n A rx ry x-axis-rotation large-arc-flag sweep-flag dx dy","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":75,"value":"htl.html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":280,"value":"In Data Visualization we tend to want the Arcs being easily interpret, so we tend to choose a horizontal or vertical line and the choose the corresponding arcs. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":203,"value":"htl.html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":322,"value":"### feDropShadow\nThe SVG filter primitive creates a drop shadow of the input image. It can only be used inside a element. Note: The drop shadow color and opacity can be changed by using the flood-color and flood-opacity presentation attributes.\n\n*Attributes*\n\n- dx: This attribute defines the x offset of the drop shadow. Value type: ; Default value: 2; Animatable: yes\n- dy: This attribute defines the y offset of the drop shadow. Value type: ; Default value: 2; Animatable: yes\n- stdDeviation: This attribute defines the standard deviation for the blur operation in the drop shadow. Value type: ; Default value: 2; Animatable: yes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":344,"value":"htl.html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":411,"value":"### RX, RY \n\nThe rx attribute defines a radius on the x-axis and the ry attribute defines a radius on the y-axis.\nYou can use these attributes with the following SVG elements: ellipse, rect","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":417,"value":"htl.html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":461,"value":"### G elements \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":453,"value":"htl.html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":500,"value":"### Linear Gradient\n\nThe element lets authors define linear gradients that can be applied to fill or stroke of graphical elements.\n\n- x1\nThis attribute defines the x coordinate of the starting point of the vector gradient along which the linear gradient is drawn. Value type: ; Default value: 0%; Animatable: yes\n- x2\nThis attribute defines the x coordinate of the ending point of the vector gradient along which the linear gradient is drawn. Value type: ; Default value: 100%; Animatable: yes\n- y1\nThis attribute defines the y coordinate of the starting point of the vector gradient along which the linear gradient is drawn. Value type: ; Default value: 0%; Animatable: yes\n- y2\nThis attribute defines the y coordinate of the ending point of the vector gradient along which the linear gradient is drawn. Value type: ; Default value: 0%; Animatable: yes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":482,"value":"htl.html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":530,"value":"### Mix-blend-mode\n\nThe mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":535,"value":"htl.html`\n\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":525,"value":"---\n### Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6,"value":"height = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"