[html]
<style>
.svg {
position: relative;
width: 200px;
height: 200px;
display: inline-block;
}
.svg svg {
width: 200px;
height: 200px;
}
.svg.muted {
opacity: 0.5;
}
.svg.click::before,
.svg.click::after {
position: absolute;
width: 10px;
height: 10px;
opacity: 0.75;
}
.svg.click::after {
content: '';
top: 15%;
right: 15%;
border-bottom: 1px solid #ffa500;
border-left: 1px solid #ffa500;
}
.svg.click::before {
content: '';
bottom: 15%;
left: 15%;
border-top: 1px solid #ffa500;
border-right: 1px solid #ffa500;
}
a {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
color: #000;
padding: 1em;
background-color: #ffa500;
font-family: 'Monospace';
text-decoration: none;
}
body {
background: #1a1a2e;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
flex-direction: column;
gap: 20px;
}
</style>
</head>
<body>
<div class="svg click">
<svg id="b1"></svg>
</div>
<!-- ПОДКЛЮЧАЕМ БИБЛИОТЕКИ -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// ============================================
// ОРИГИНАЛЬНЫЙ КОД (исправленный)
// ============================================
var s1 = Snap('#b1');
var c = 200 / 2;
var clr = 'orange';
// ============================================
// ВСПОМОГАТЕЛЬНЫЕ ФУНКЦИИ
// ============================================
function r(circumference) {
return circumference / (2 * Math.PI);
}
function s(circumference, count, w, spaceAfter) {
w ? w = w : w = 5;
var res = [w, (circumference / count) - w];
spaceAfter ? res = [(circumference / count) - w, w] : res = res;
return res;
}
// ============================================
// ФУНКЦИИ АНИМАЦИИ
// ============================================
var bezier = function(x1, y1, x2, y2, epsilon) {
var curveX = function(t) {
var v = 1 - t;
return 3 * v * v * t * x1 + 3 * v * t * t * x2 + t * t * t;
};
var curveY = function(t) {
var v = 1 - t;
return 3 * v * v * t * y1 + 3 * v * t * t * y2 + t * t * t;
};
var derivativeCurveX = function(t) {
var v = 1 - t;
return 3 * (2 * (t - 1) * t + v * v) * x1 + 3 * (-t * t * t + 2 * v * t) * x2;
};
return function(t) {
var x = t,
t0, t1, t2, x2, d2, i;
for (t2 = x, i = 0; i < 8; i++) {
x2 = curveX(t2) - x;
if (Math.abs(x2) < epsilon) return curveY(t2);
d2 = derivativeCurveX(t2);
if (Math.abs(d2) < 1e-6) break;
t2 = t2 - x2 / d2;
}
t0 = 0, t1 = 1, t2 = x;
if (t2 < t0) return curveY(t0);
if (t2 > t1) return curveY(t1);
while (t0 < t1) {
x2 = curveX(t2);
if (Math.abs(x2 - x) < epsilon) return curveY(t2);
if (x > x2) t0 = t2;
else t1 = t2;
t2 = (t1 - t0) * .5 + t0;
}
return curveY(t2);
};
};
var duration = 200;
var epsilon = (1000 / 60 / duration) / 4;
var timingFunction = bezier(0.08, 1.05, 0.95, 0.12, epsilon);
var timingFunction2 = bezier(0.5, 0.5, 0.5, 0.5, epsilon);
var timingFunc = bezier(.75, 0, 0.15, 1, epsilon);
var timingFunc2 = bezier(.5, 0, 0, 1, epsilon);
var timingFunc3 = bezier(0, 0, 0.25, 1, epsilon);
// ============================================
// РИСУЕМ КРУГ
// ============================================
var c11 = s1.circle(c, c, r(300)).attr({
fill: 'transparent',
stroke: clr,
strokeWidth: 2,
});
var c12 = s1.circle(c, c, r(300)).attr({
fill: 'transparent',
stroke: clr,
strokeWidth: 6,
strokeDasharray: s(300, 4, 5),
transform: ['r-' + 5 * (2 / 3), c, c]
});
// ============================================
// КЛИК ПО КРУГУ
// ============================================
c12.node.onclick = function() {
c12.attr({
r: r(300),
strokeDasharray: s(300, 4, 5),
transform: ['r-' + 5 * (2 / 3), c, c]
})
Snap.animate(300, 360, function(v) {
var vc = v - 300;
c12.attr({
r: r(v),
strokeDasharray: s(v, 4, 5),
transform: ['r' + ((vc * 1.5) - (5 * (2 / 3))), c, c]
})
}, 800, timingFunc2, function() {
c12.animate({
transform: ['r' + (180 - (5 * (2 / 3))), c, c]
}, 800, mina.bounce, function() {
Snap.animate(360, 300, function(v) {
c12.attr({
r: r(v),
strokeDasharray: s(v, 4, 5)
})
}, 800, timingFunc2)
})
});
}
// ============================================
// АВТОЗАПУСК
// ============================================
setTimeout(function() {
if (c12 && c12.node) {
c12.node.click();
}
}, 500);
</script>
[/html]
