SVG attributes rx, ry / Shreshth Mohan | Observable

Published

Edited

Feb 13, 2022

SVG clip-path and mask SVG Attributes stroke-linejoin, stroke-miterlimit SVG Attributes Visual Documentation ideas

SVG attributes rx, ry

SVG stroke-dasharray, stroke-dashoffset and pathLength SVG Alignment Attributes (Interactive)SVG Presentation Attributes for Alignment

<svg viewBox="0 0 600 150" xmlns="http://www.w3.org/2000/svg">

<ellipse cx="75" cy="75" fill="none" stroke="gray" stroke-width="3"

rx="${radii.rx}${radii.pc ? '%' : ''}"

ry="${radii.ry}${radii.pc ? '%' : ''}"

/>

<rect x="150" y="15" width="120" height="120"

fill="none" stroke="gray" stroke-width="5"

rx="${radii.rx}${radii.pc ? '%' : ''}"

ry="${radii.ry}${radii.pc ? '%' : ''}"/>

<rect x="150" y="15" width="120" height="120" fill="none" stroke="black" stroke-width="1" />

</svg>

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.