Published unlisted
Edited
May 30, 2022
keyframe test
<circle class = "pulse" cx = "50%" cy = "50%" r = "5px" stroke= "black"></circle>
<svg xmlns="http://www.w3.org/2000/svg" >
<circle class = "pulse" cx = "50%" cy = "50%" r = "5px" stroke= "black"></circle>
</svg>
<style type="text/css">
.pulse {
fill-opacity: 0;
transform-origin: center;
animation-duration: 2s;
animation-name: pulse;
animation-iteration-count: infinite;
animation-timing-function : cubic-bezier(.17,.67,.83,.67)
}
@keyframes pulse {
from {
stroke-width: 4px;
stroke-opacity: 1;
transform: scale(0.3);
}
to {
stroke-width: 0;
stroke-opacity: 0;
transform: scale(2);
}
}
</style>
`
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.
