<marker>
.<svg viewBox="0 0 140 140" width=100vw height=100vh>
<defs>
<marker id="markerCircle" markerWidth="8" markerHeight="8" refX="5" refY="5">
<circle cx=5 cy=5 r=3 />
</marker>
</defs>
<path d="M20 20 L30 40 L70 20 L90 80" fill="none" stroke="red" marker-start=url(#markerCircle) marker-mid=url(#markerCircle) marker-end=url(#markerCircle)>
<animate
attributeName="d"
values="M20 20 L30 40 L70 20 L90 80;
M20 40 L30 10 L70 60 L90 110;
M10 10 L15 80 L120 70 L150 75;
M20 20 L30 40 L70 20 L90 80"
dur="20s"
repeatCount="indefinite"
/>
</path>
</svg>
.btn:focus, .btn:active {
box-shadow: none !important;
}
<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M11.9826 4C9.93339 4 7.90628 4.80442 6.34377 6.36692C3.21874 9.49203 3.21874 14.5544 6.34377 17.6794C9.46879 20.8044 14.5312 20.8044 17.6562 17.6794C20.7813 14.5544 20.7813 9.49203 17.6562 6.36692C16.0937 4.80442 14.0318 4 11.9826 4V4ZM11.9826 5.11384C13.7441 5.11384 15.5053 5.78232 16.8557 7.13269C19.5563 9.83331 19.5563 14.1782 16.8557 16.8788C14.155 19.5795 9.81018 19.5795 7.10953 16.8788C4.40889 14.1782 4.40889 9.83331 7.10953 7.13269C8.45986 5.78232 10.2211 5.11384 11.9826 5.11384V5.11384ZM9.37203 8.03768L8.04934 9.39518L10.6947 12.0057L8.04934 14.6511L9.37203 15.9738L12.0174 13.3632L14.628 15.939L15.9507 14.6163L13.3401 12.0057L15.9507 9.39518L14.628 8.07249L12.0174 10.6831L9.37203 8.03768Z" fill="black"/>
</svg>
<svg viewbox="0 0 10 6.7" xmlns="http://www.w3.org/2000/svg">
<rect x=1 y=1 width="8" height="5" fill="white"></rect>
Если есть возможность на CSS управлять этими размерами было бы супер.
<circle class="circle1" cx="9" cy="1" r="1" fill="black"></circle>
.circle1{
r: 3;
cx: 5;
}
.theDude{
position: relative;
}
.theDude:before{
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
transform: translate(20px, 20px);
background-color: gray;
}
.theDude:after{
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
z-index: -2;
transform: translate(40px, 40px);
background-color: lightgray;
}
let els = document.getElementsByClassName('element')
document.addEventListener("scroll",e=>{
for (let i = 0; i<els.length; i++) {
if ((els[i].getBoundingClientRect().top>390) & (els[i].getBoundingClientRect().top<460)) {
els[i].classList.add('bigusElementus')
} else els[i].classList.remove('bigusElementus')
}
})