Public
Edited
Nov 18, 2024
<svg
viewBox="0 0 256 256"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<radialGradient
id="g0"
fx="0.5"
fy="0.5"
fr="0%">
<stop offset="0%" stop-color="white" />
<stop offset="100%" stop-color="black" />
</radialGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url('#g0')"/>
</svg>
<svg
viewBox="0 0 256 256"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<radialGradient
id="g1"
fx="0.5"
fy="1">
<stop offset="0%" stop-color="white" />
<stop offset="100%" stop-color="black" />
</radialGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url('#g1')"/>
</svg>
<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<radialGradient id="g2" fx="0.5" fy="1">
<stop offset="0%" stop-color="white"/>
<stop offset="100%" stop-color="black"/>
</radialGradient>
<!-- Define the clipping path that matches the SVG's viewBox -->
<clipPath id="clipRect">
<rect x="0" y="0" width="256" height="256"/>
</clipPath>
</defs>
<!-- Background fill -->
<rect x="0" y="0" width="100%" height="100%" fill="black"/>
<!-- Transformed rectangle with clipping path applied -->
<rect x="0" y="0" width="100%" height="100%" fill="url('#g2')"
transform="skewX(15) rotate(15) translate(32 0)"
clip-path="url(#clipRect)"/>
</svg>
<svg
viewBox="0 0 256 256"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="300px">
<defs>
<radialGradient
id="myGradient"
fx="0.5"
fy="0.5">
<stop offset="0%" stop-color="white" />
<stop offset="100%" stop-color="black" />
<!-- Animate fy with a refined cubic easing approximation -->
<animate
attributeName="fy"
values="0.5;0.75;1;0.75;0.5"
dur="3s"
repeatCount="indefinite"
keyTimes="0;0.25;0.5;0.75;1"
keySplines="0.645 0.045 0.355 1; 0.645 0.045 0.355 1; 0.645 0.045 0.355 1; 0.645 0.045 0.355 1" />
</radialGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#myGradient)" />
</svg>
<svg width="256" height="200" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid slice">
<defs>
<radialGradient id="g2" fx="0.5" fy="1">
<stop offset="0%" stop-color="white"/>
<stop offset="100%" stop-color="black"/>
</radialGradient>
<!-- Define the clipping path that matches the SVG's viewBox -->
<clipPath id="clipRect">
<rect x="0" y="0" width="256" height="256"/>
</clipPath>
</defs>
<!-- Background fill -->
<rect x="0" y="0" width="100%" height="100%" fill="black"/>
<!-- Transformed rectangle with clipping path applied -->
<rect x="0" y="0" width="100%" height="100%" fill="url('#g2')"
transform="skewX(15) rotate(15) translate(32 0)"
clip-path="url(#clipRect)"/>
</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.
