<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./index.css">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="./script.js" defer></script>
</head>
<body>
<svg id="stern" version="1.0" xmlns="http://www.w3.org/2000/svg"
width="1280.000000pt" height="1234.000000pt" viewBox="0 0 1280.000000 1234.000000"
preserveAspectRatio="xMidYMid meet">
<g id="g"></g>
<text x="400" y="360" fill="black" font-family="Verdana, serif" font-size="24" font-weight="900">Fotostudio Stern</text>
<metadata>
Created by potrace 1.15, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,1234.000000) scale(0.100000,-0.100000)"
fill="#ffeb3b" stroke="none">
<path d="M6293 11153 c-37 -40 -297 -432 -375 -568 -53 -91 -298 -594 -298
-611 0 -3 -18 -44 -41 -92 -23 -48 -52 -112 -66 -142 -14 -30 -38 -82 -53
-115 -79 -168 -120 -257 -120 -260 0 -1 -29 -64 -65 -140 -36 -75 -65 -138
-65 -140 0 -6 -111 -239 -179 -374 -118 -236 -203 -361 -323 -477 -174 -168#stern {
width: 300px;
height: 300px;
margin:100px;
display: block;
border-radius: 50%;
animation: pulse 1.3s none;
}
@keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(255, 235, 58, 1);
box-shadow: 0 0 0 0 rgba(255, 235, 58, 1);
}
70% {
-moz-box-shadow: 0 0 0 20px rgba(204,169,44, 0);
box-shadow: 0 0 0 20px rgba(204,169,44, 0);
}
}anime({
targets: [
'#stern',
document.querySelector('#stern'),
],
translateX: {
value: 250,
duration: 800,
},
rotate: {
value: 360,
duration: 1800,
easing: 'easeInOutSine'
}
});
Простой
Средний
