Обмен готовыми решениями - JavaScript - Страница 4

@andyj · 20.12.2017, 07:13

Студворк — интернет-сервис помощи студентам

div-кнопка с бортиками с управляемым углом освещения. ("проба пера")

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!doctype html><html><head><title>Angle Light</title><meta charset='utf-8' />
<style type="text/css">
.button1{
    padding: 13px; margin: 13px;
    color:#000000;
    background: #eeeeee;
    border: 14px solid #888888;
}
</style>
</head>
<body>
 
<div class="button1" id="button1">text1</div>
<div class="button1" id="button2">text2</div>
<div class="button1" id="button3">text3</div>
    
<script>
    function angleColor(btn, angle){
        if(angle==null) angle=30;
        angle = angle*Math.PI/180;
        var t=(150+50*Math.sin(angle)).toFixed(0);
        var l=(150+50*Math.cos(angle)).toFixed(0);
        var r=(150-50*Math.cos(angle)).toFixed(0);
        var b=(150-50*Math.sin(angle)).toFixed(0);
        btn.style.borderTopColor = 'rgb('+t+', '+t+', '+t+')';
        btn.style.borderLeftColor = 'rgb('+l+', '+l+', '+l+')';
        btn.style.borderRightColor = 'rgb('+r+', '+r+', '+r+')';
        btn.style.borderBottomColor = 'rgb('+b+', '+b+', '+b+')';
    }
 
    var angle=0;
    function onTimer(){
        angleColor(document.getElementById("button1"), angle);
        angleColor(document.getElementById("button2"), angle);
        angleColor(document.getElementById("button3"), angle);
        angle=(angle+2)%360;
    }
    onTimer()
    setInterval(onTimer, 30);
</script>
 
</body></html>

@8Observer8 · 11.01.2018, 00:38

Предлагаю делиться проектами/примерами на Three.js и Babylon.js в этой теме: Проекты на Three.js и Babylon.js

@Eva Rosalene · 19.03.2018, 21:14

Хак transition для width/height: auto.
На backquote вместо нормальных кавычек внимания не обращайте, клавиатура приказала долго жить.

Перед изменением контента использовать .lockBounds, после - .fitContent(duration).
Настоятельная рекомендация вместо вызова конструктора использовать AutoBoundsTransition.for(element), либо упрощённую обёртку AutoBoundsWrapper(element, duration) с методом .resize(callback), передавая в callback функцию, которая и производит изменение размеров элемента.

Совместимость: ES6+.
Версия для ES5 после транспайла бабелем - под спойлером, требует babel-polyfill.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
class AutoBoundsTransition {
  static for(node) {
    if (!this._context) this._context = new WeakMap();
    if (!this._context.has(node)) this._context.set(node, new this(node));
    
    return this._context.get(node);
  }
  
  pRequestAnimationFrame() {
    return new Promise(resolve => requestAnimationFrame(resolve));
  }
  
  constructor(node) {
    this.node = node;
  }
  
  lockBounds() {
    this.lockedWidth = this.node.getBoundingClientRect().width;
    this.lockedHeight = this.node.getBoundingClientRect().height;
    
    this.oldHeight = this.node.style.height;
    this.oldWidth = this.node.style.width;
    
    this.node.style.width = this.lockedWidth + `px`;
    this.node.style.height = this.lockedHeight + `px`;
  }
  
  waitTransitionFinish() {
    let resolve = null;
    let promise = new Promise(res => resolve = res);
    
    this.node.addEventListener(`transitionend`, function listener(event) {
      event.target.removeEventListener(`transitionend`, listener, true);
      resolve();
    }, true);
    return promise;
  }
  
  async fitContent(duration) {
    let oldTransition = this.node.style.transition;
    this.node.style.height = this.oldHeight;
    this.node.style.width = this.oldWidth;
    
    await this.pRequestAnimationFrame();
    let newWidth = this.node.getBoundingClientRect().width;
    let newHeight = this.node.getBoundingClientRect().height;
    
    this.node.style.width = this.lockedWidth + `px`;
    this.node.style.height = this.lockedHeight + `px`;
    
    await this.pRequestAnimationFrame();
    this.node.style.transition = `height ${duration}ms, width ${duration}ms`;
    this.node.style.height = newHeight + `px`;
    this.node.style.width = newWidth + `px`;
    
    await this.waitTransitionFinish();
    this.node.style.transition = null;
    this.node.style.height = this.oldHeight;
    this.node.style.width = this.oldWidth;
  }
}
 
class AutoBoundsWrapper {
  constructor(node, duration=500) {
    this.autoBoundsTransition = AutoBoundsTransition.for(node);
    this.duration = duration;
  }
  
  async resize(resizer) {
    this.autoBoundsTransition.lockBounds();
    resizer();
    await this.autoBoundsTransition.fitContent(this.duration);
  }
}

Демо: https://jsfiddle.net/bnhqcyz2/16/

ES5-совестимый код (Babel)

Внимание! Требуются полифиллы: https://babeljs.io/docs/usage/polyfill

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
"use strict";
 
function _asyncToGenerator(fn) {
  return function() {
    var gen = fn.apply(this, arguments);
    return new Promise(function(resolve, reject) {
      function step(key, arg) {
        try {
          var info = gen[key](arg);
          var value = info.value;
        } catch (error) {
          reject(error);
          return;
        }
        if (info.done) {
          resolve(value);
        } else {
          return Promise.resolve(value).then(
            function(value) {
              step("next", value);
            },
            function(err) {
              step("throw", err);
            }
          );
        }
      }
      return step("next");
    });
  };
}
 
function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}
 
var AutoBoundsTransition = (function() {
  AutoBoundsTransition.for = function _for(node) {
    if (!this._context) this._context = new WeakMap();
    if (!this._context.has(node)) this._context.set(node, new this(node));
 
    return this._context.get(node);
  };
 
  AutoBoundsTransition.prototype.pRequestAnimationFrame = function pRequestAnimationFrame() {
    return new Promise(function(resolve) {
      return requestAnimationFrame(resolve);
    });
  };
 
  function AutoBoundsTransition(node) {
    _classCallCheck(this, AutoBoundsTransition);
 
    this.node = node;
  }
 
  AutoBoundsTransition.prototype.lockBounds = function lockBounds() {
    this.lockedWidth = this.node.getBoundingClientRect().width;
    this.lockedHeight = this.node.getBoundingClientRect().height;
 
    this.oldHeight = this.node.style.height;
    this.oldWidth = this.node.style.width;
 
    this.node.style.width = this.lockedWidth + "px";
    this.node.style.height = this.lockedHeight + "px";
  };
 
  AutoBoundsTransition.prototype.waitTransitionFinish = function waitTransitionFinish() {
    var resolve = null;
    var promise = new Promise(function(res) {
      return (resolve = res);
    });
 
    this.node.addEventListener(
      "transitionend",
      function listener(event) {
        event.target.removeEventListener("transitionend", listener, true);
        resolve();
      },
      true
    );
    return promise;
  };
 
  AutoBoundsTransition.prototype.fitContent = (function() {
    var _ref = _asyncToGenerator(
      /*#__PURE__*/ regeneratorRuntime.mark(function _callee(duration) {
        var oldTransition, newWidth, newHeight;
        return regeneratorRuntime.wrap(
          function _callee$(_context) {
            while (1) {
              switch ((_context.prev = _context.next)) {
                case 0:
                  oldTransition = this.node.style.transition;
 
                  this.node.style.height = this.oldHeight;
                  this.node.style.width = this.oldWidth;
 
                  _context.next = 5;
                  return this.pRequestAnimationFrame();
 
                case 5:
                  newWidth = this.node.getBoundingClientRect().width;
                  newHeight = this.node.getBoundingClientRect().height;
 
                  this.node.style.width = this.lockedWidth + "px";
                  this.node.style.height = this.lockedHeight + "px";
 
                  _context.next = 11;
                  return this.pRequestAnimationFrame();
 
                case 11:
                  this.node.style.transition =
                    "height " + duration + "ms, width " + duration + "ms";
                  this.node.style.height = newHeight + "px";
                  this.node.style.width = newWidth + "px";
 
                  _context.next = 16;
                  return this.waitTransitionFinish();
 
                case 16:
                  this.node.style.transition = null;
                  this.node.style.height = this.oldHeight;
                  this.node.style.width = this.oldWidth;
 
                case 19:
                case "end":
                  return _context.stop();
              }
            }
          },
          _callee,
          this
        );
      })
    );
 
    function fitContent(_x) {
      return _ref.apply(this, arguments);
    }
 
    return fitContent;
  })();
 
  return AutoBoundsTransition;
})();
 
var AutoBoundsWrapper = (function() {
  function AutoBoundsWrapper(node) {
    var duration =
      arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 500;
 
    _classCallCheck(this, AutoBoundsWrapper);
 
    this.autoBoundsTransition = AutoBoundsTransition.for(node);
    this.duration = duration;
  }
 
  AutoBoundsWrapper.prototype.resize = (function() {
    var _ref2 = _asyncToGenerator(
      /*#__PURE__*/ regeneratorRuntime.mark(function _callee2(resizer) {
        return regeneratorRuntime.wrap(
          function _callee2$(_context2) {
            while (1) {
              switch ((_context2.prev = _context2.next)) {
                case 0:
                  this.autoBoundsTransition.lockBounds();
                  resizer();
                  _context2.next = 4;
                  return this.autoBoundsTransition.fitContent(this.duration);
 
                case 4:
                case "end":
                  return _context2.stop();
              }
            }
          },
          _callee2,
          this
        );
      })
    );
 
    function resize(_x3) {
      return _ref2.apply(this, arguments);
    }
 
    return resize;
  })();
 
  return AutoBoundsWrapper;
})();

@NX9000 · 26.08.2018, 21:53

Библиотека для работы с JSON данными включающими в себя логические ветвления.

https://www.npmjs.com/package/jsoncode

@Kraken73 · 26.10.2018, 09:07

написал плагин для выделения последней строки в тексте, т.к. в инете кривоватый был
принимаются идеи по улучшению кода\плагина
https://github.com/Kovich73/lastLine

@Опан · 27.11.2018, 15:30

Онлайн радиостанция без специального сервера и передающего ПО

Хочу предложить онлайн радиостанцию, организованную в обход традиционного подхода к созданию радио онлайн - без традиционного аудиострима, специальной серверной платформы, вещающих программ и многого другого.
В варианте, который я хочу предложить, достаточно обычного сайта на обычном сервере, даже без PHP, а радиовещание в автоматическом режиме отвечает элемент аудио. Может это так же можно назвать имитацией вещания, но результат имеет такой же эффект - на одновременно открытых страницах даже на разных компьютерах в одно и то же время звучит одно и тоже, как при прослушивании радио. Но любом случае реализазии онлайн радио звук всегда берётся из файлов, которые где-то "лежат". Кроме этого в этом примере выводится история раннее прослушанного в недалёком времени. Алгоритм автосоставления плейлиста таков: в течении одного цикла плейлиста композиции воспроизводятся в случайном порядке, но не повторяются.
Перед первым запуском кода нужно будет сделать кое-какую подготовку - прежде всего желательно загрузить все аудиофайлы на сервер. (они могут быть мультимедийными или содержащими рекламу) Так, как тут всё обходится без PHP и библиотек, в сроках с 68 по 70 нужно будет прописать соответственно пути к файлам, названия треков и их длительности в секундах, которые должны иметь точность более, чем в секунду, чем точнее, тем лучше. Этот пример рассчитан на 10 треков, но количество можно изменить.
Кроме этого нужно будет посчитать суммарную длительность треков в плейлисте и записать её в переводе на милисекунды в 75 строке. А так же посчитать, сколько раз плейлист успел бы воспроизвестись с 1 января 1970 г., и записать это число в 73 строке.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<html>
<head>
    <title>Радио</title>
    <style>
    body{
        background: #ccc;
        font-family: arial;
    }
    button{
        width: 150px;
        border-radius: 7px;
        background: #033;
        color: white;
    }
    button:hover{
        background: #066;
        color: gold;
        cursor: pointer;
    }
    hr{
        width: 80%;
    }
    #myhistory{
        width: 50%;
        background: black;
        color: white;
        text-align: left;
        padding: 10px;
    }
    .mytime{
        background: black;
        color: #ccc;
    }
    .now_live{
        background: black;
        color: gold;
        width: 100%;
    }
    #mes1{
        background: #444;
        padding: 5px;
        width: 98%;
        display: block;
        border-radius: 5px;
    }
    #mes2{
        background: #444;
        padding: 5px;
        width: 98%;
        display: none;
        border-radius: 5px;
    }
    </style>
</head>
<body><center><h3>Радио</h3>
<button id=myplay onclick="listen()">Слушать</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button onclick="turn_off()">Выключить</button><hr>
<div id=myhistory>
    <span id=mes1> Сейчас в эфире: </span><br><span id=my_time class=mytime> время </span><span id=nowlive class=now_live> тут будет то,что сейчас </span><br><br>
    <span id=mes2> Раньше звучали: <br></span><br>
    <table id=mytable border=0 cellspacing=0></table>
</div>
</center></body>
<script>
var audio = new Audio();
    audioCat = "mp3/", // Путь к папке, где лежат МП3-файлы, если они в отдельной папке
//  audioCat = ""; // В противном случае присваиваем пустую строку
    mp3 = [
        ["track1.mp3", "track2.mp3", "track3.mp3", "track4.mp3", "track5.mp3", "track6.mp3", "track7.mp3", "track8.mp3", "track9.mp3", "track10.mp3"], // Пути к файлам
        ["Исполнитель1 - Трек1", "Исполнитель2 - Трек2", "Исполнитель3 - Трек3", "Исполнитель4 - Трек4", "Исполнитель5 - Трек5", "Исполнитель6 - Трек6", "Исполнитель7 - Трек7", "Исполнитель8 - Трек8", "Исполнитель9 - Трек9", "Исполнитель10 - Трек10"], // Названия
        [376.3232, 338.367275, 187.87585, 187.64075, 221.991775, 529.6244, 133.5047, 223.8597, 265.8839, 270.086] // Длительности треков
    ],
    numTr = mp3[0].length, // Количество треков в плейлисте
    a = 399300, // Количество раз воспроизведения плейлиста с момента 1 января 1970 г. на момент публикации скрипта на сайте - рассчитать самостоятельно и прописать один раз и на постоянно в момент публикации скрипта на сайте
    hst = [[], []], // История раннее прослушанного
    totalDuration = 3859627, // Сумарная длительность в милисекундах всех треков в плейлисте - рассчитать самостоятельно
    mymax = 7; // Максимальное количество треков в истории раннее прослушанного
function getTrack(){ // Получение данных о текущем воспроизводящемся треке, его временной позиции воспроизведения и времени начала воспроизведения
    randArray = []; // Случайные номера треков
    var tek = new Date().getTime();
    var numCycles = Math.floor(tek / totalDuration); // Количество раз воспроизведения плейлиста с момента 1 января 1970 г.
    var ind = 0;
    for(i = 1; i < numTr + 1; i ++){
        for(j = 0; j < numCycles - a; j ++){
            ind ++;
            if(ind == numTr)ind = 0;
            while(randArray[ind]){
                ind ++;
                if(ind == numTr)ind = 0;
            }
        }
        randArray[ind] = i;
    }
    var newCycle = numCycles * totalDuration; // Время начала нового цикла воспроизведения плейлиста
    var mytime = (tek - newCycle)/1000; // Временная позиция воспроизведения всего плейлиста
    var s = 0;
    turn = 0;
    while(s < mytime){
        s += mp3[2][randArray[turn] - 1];
        turn ++;
    }
    turn --;
    index = randArray[turn] - 1; // Индекс (номер) текущего воспроизводимого трека
    var s1 = s - mp3[2][index];
    hour_min = hourmin(newCycle + s1 * 1000);
    curTime = mytime - s1;
}
function listen(){ // Слушаем
    getTrack();
    my_time.innerHTML = "&nbsp;" + hour_min + "&nbsp;&nbsp;&nbsp;";
    nowlive.innerHTML = mp3[1][index];
    audio.src = audioCat + mp3[0][index];
    audio.currentTime = curTime;
    audio.volume = 0.3;
    audio.play();
}
function turn_off(){ // Выключим
    myplay.disabled = true;
    var myInterval = setInterval(function(){
        audio.volume -= 0.03;
        if(audio.volume <= 0.02){
            clearInterval(myInterval);
            audio.pause();
            myplay.disabled = false;
        }
    }, 100);
}
audio.onended = function(){ // Переход на следующий трек
    mes2.style.display = "block";
    if(hst[0].length >= mymax){
        hst[0].shift();
        hst[1].shift();
    }
    hst[0].push(hour_min);
    hst[1].push(index);
    mytable.innerHTML = "";
    for(j = 0; j < hst[0].length; j ++){
        var mytr = document.createElement("tr");
            var mytd = document.createElement("td");
                mytd.className = "mytime";
                mytd.innerHTML = "&nbsp;" + hst[0][hst[0].length - 1 - j] + "&nbsp;&nbsp;&nbsp;";
            mytr.appendChild(mytd);
            var mytd = document.createElement("td");
                mytd.className = "now_live";
                mytd.innerHTML = mp3[1][hst[1][hst[0].length-1-j]];
            mytr.appendChild(mytd);
        mytable.appendChild(mytr);
    }
    getTrack();
    audio.src = audioCat + mp3[0][index];
    audio.play();
    my_time.innerHTML = "&nbsp;" + hourmin() + "&nbsp;&nbsp;&nbsp;";
    nowlive.innerHTML = mp3[1][index];
}
function hourmin(e){
    var newDate = new Date();
    if(e)newDate.setTime(e);
    var ndArray = newDate.toLocaleTimeString().split(":");
    return ndArray[0] + ":" + ndArray[1];
}
getTrack();
my_time.innerHTML = "&nbsp;" + hour_min + "&nbsp;&nbsp;&nbsp;";
nowlive.innerHTML = mp3[1][index];
</script>
</html>

@Опан · 20.03.2020, 18:08

Имитатор АМ-радиоприёмника на базе онлайн-радиопотоков

Хочу предложить имитатор АМ-радиоприёмника с использование обычных аудиостримов. Настройка на станции происходит плавно с помощью <input type=range> и стрелок вправо и влево. При этом имитируются некоторые звуковые эффекты, привычные для АМ-приёмников - помехи, плавные перепады частотной характеристики вещания в зависимости от точности настройки на станцию.
Этот пример рассчитан на 20 станций, но их может быть любое количество. От этого будет зависить только шаг между станциями, обнаруживаемыми во время настройки.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<html>
<head>
    <title>имитатор АМ-радиоприёмника</title>
</head>
<body bgcolor=#ccc><center>
<h3>Имитатор АМ-радиоприёмника</h3>
<input id=myrange type=range value=0 max=1000 style="background: red; width: 500px" /><br /><br />
<button onclick="startRadio()"> включить </button>
<button onclick="stopRadio()"> выключить </button>
</body>
<script>
var selectivity = 1.8, // избирательность радиоприёмника
rm = myrange.max,
noise = 3, // после которой по счёту станции имитируется приём помехи
filters = ["highpass", "bandpass"], st,
stations = [
    "http://radiostream1", // пропишите
    "http://radiostream2", // URL-ы
    "http://radiostream3", // всех
        //  ...
    "http://radiostream20" // радиопотоков
];
var m = 0;
for(i = 0; i < stations.length; i ++){
    var audio = new Audio();
    audio.src = stations[i];
    audio.id = "a" + i;
    audio.volume = 0;
    audio.setAttribute("crossorigin", "anonymous");
    audio.onpaused = function(){audio.play()};
    document.body.appendChild(audio);
}
var all = document.getElementsByTagName("audio"),
mystep = rm  / all.length;
function startRadio(){
    myrange.focus();
    var context = new AudioContext();
    var filter = context.createBiquadFilter();
    filter.frequency.value = 1000;
    var gainNode = context.createGain();
    gainNode.gain.setValueAtTime(0, context.currentTime);
    oscillator = context.createOscillator();
    oscillator.frequency.value = 500;
    oscillator.connect(gainNode);
    gainNode.connect(context.destination);
    oscillator.start(0);
    for(i = 0; i < all.length; i ++){
        all["a" + i].play();
        var source = context.createMediaElementSource(document.getElementById("a" + i));
        source.connect(filter);
        filter.connect(context.destination);
    }
    setInterval(function(){
        st = 0;
        for(i = 0; i < all.length; i ++){
            if(i != noise){
                document.getElementById("a" + st).volume = 1 - Math.min(Math.abs(myrange.value - i * mystep - mystep / 2) / (mystep / selectivity), 1);
                st ++;
            }
        }
        filter.frequency.value = Math.min(Math.abs(myrange.value - mystep * Math.floor(myrange.value / mystep) - mystep / 2) * selectivity / 2, mystep / 2) * 300 + 300;
        var noiseVolume = 1 - Math.min(Math.abs(myrange.value - noise * mystep - mystep / 2) / (mystep / selectivity * 1.2), 1);
        gainNode.gain.setValueAtTime(noiseVolume, context.currentTime);
        var filterIndex = Math.floor(myrange.value / mystep) & 1,
        indexFilter = myrange.value / mystep > noise ? filterIndex : 1 - filterIndex;
        filter.type = filters[indexFilter];
    }, 100);
    setInterval(function(){
        oscillator.detune.setValueAtTime(Math.sin(m * 5) * 500, context.currentTime);
        m ++;
    }, 30);
}
document.onkeydown = function(e){myrange.focus()};
function stopRadio(){for(i = 0; i < all.length; i ++) all["a" + i].pause(); oscillator.stop()};
</script>
</center></body>
</html>

К сожалению, не все адреса радиопотоков поддаются обработке с помощью WebAudio Api, поэтому остаётся искать подходящие.

@Опан · 11.03.2022, 12:13

Трёхмерная анимированная заставка на canvas

Хочу предложить простую 3д-заставку из случайных линий разного цвета, соединённых друг с другом.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<canvas id=canvas width=400 height=400></canvas>
<script>
let linecount = 64; // количество линий
document.bgColor = "black";
var ctx = document.getElementById("canvas").getContext("2d");
var mas = [], cv = canvas.width, cw = canvas.width / 2;
for(i = 0; i <= linecount; i ++){
    mas[i] = [];
    mas[i][0] = Math.random() * cv - cw;
    mas[i][1] = Math.random() * cv - cw;
    mas[i][2] = Math.random() * cv - cw;
    var r = Math.floor(Math.random() * 256),
    g = Math.floor(Math.random() * 256),
    b = Math.floor(Math.random() * 256);
    mas[i][3] = "rgb(" + r + "," + g + "," + b + ")";
}
var t = 0;
setInterval(function(){
    ctx.clearRect(0, 0, 400, 400);
    for(i = 1; i < linecount; i ++){
        ctx.beginPath();
        xy(0);
        ctx.moveTo(cw + x, cw + y);
        xy(1);
        ctx.lineTo(cw + x, cw + y);
        ctx.strokeStyle = mas[i][3];
        ctx.stroke();
    }
    t += 0.01;
}, 20000);
function xy(a){
    x = mas[i + a][0] * Math.sin(t) + mas[i + a][2] * Math.cos(t);
    y = mas[i + a][1] * Math.cos(t) + mas[i + a][2] * Math.sin(t);
}
</script>

@mr_dramm · 15.03.2023, 12:26

Плавная прокрутка всегда пригодится в хозяйстве на любом сайте, комментируем не стесняемся отвечу всем!

@diadiavova · 01.12.2024, 06:14

Часы "Ностальжи на Эс Ви Джи"

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="218" height="218" viewBox="0 0 218 218" version="1.1" id="svg1" xmlns="http://www.w3.org/2000/svg"
  xmlns:svg="http://www.w3.org/2000/svg">
  <defs id="defs1" />
  <g id="layer1">
    <rect style="opacity:0.994;fill:#0000ff;fill-opacity:1;stroke:none;paint-order:stroke fill markers" id="rect231"
      width="930" height="1230" x="-367" y="-615" transform="matrix(0.227,0,0,0.178,83.6,109)" />
    <path id="path131" class="clockface"
      style="fill: #ffffff; opacity: 0.994; stroke-miterlimit: 29.4; paint-order: stroke fill markers"
      d="M 103.9 3.6 C 103.9 3.8 103.9 4.1 103.4 4.4 L 102 5.8 C 101.5 6.1 101.2 6.4 100.7 6.6 C 100.7 6.6 100.4 6.6 100.4 6.8 L 100.4 7.1 L 100.4 7.3 C 100.4 7.5 100.7 7.6 100.7 7.6 C 101.2 7.6 101.5 7.5 102 7.3 L 102 15.6 C 102 15.8 102 16 101.5 16 C 101.5 16.1 101.2 16.2 101 16.2 L 101 16.7 C 101 16.9 101.2 17.1 101.2 17.1 C 101.2 17.2 101.5 17.2 101.5 17.2 L 105.2 17.2 C 105.5 17.2 105.5 17.1 105.5 17 L 105.5 16.3 C 105.5 16.2 105.5 16.1 105.2 16 C 105.2 16 105 15.8 105 15.7 L 105 3.6 L 104.2 3.6 Z M 110.6 3.6 C 109.5 3.6 108.7 4 108.2 4.7 C 107.6 5.2 107.1 5.9 107.1 6.8 C 107.1 7.3 107.4 7.7 107.4 7.9 C 107.6 8.2 107.9 8.4 108.2 8.4 C 108.7 8.4 109 8.3 109.2 8 C 109.5 7.7 109.5 7.3 109.5 6.8 L 109.5 6 L 109.5 5.5 C 109.5 5.3 109.8 5.1 109.8 5 C 109.8 4.8 110 4.7 110.3 4.7 C 110.8 4.7 111.1 4.8 111.1 5.2 C 111.4 5.6 111.4 6.2 111.4 7.1 C 111.4 8.1 111.4 9 110.8 9.7 C 110.8 10.4 110.3 11.3 109.2 12.3 C 108.4 13.4 107.9 14 107.6 14.2 C 107.1 14.6 106.8 15 106.8 15.2 L 106.8 17.2 L 113.5 17.2 C 113.7 17.2 114 17.2 114 17.1 L 114 16.4 C 114.3 15.9 114.3 15.4 114.3 14.8 C 114.5 14.2 114.5 13.8 114.5 13.7 L 114.5 13.5 C 114.5 13.4 114.5 13.3 114 13.3 C 114 13.3 113.7 13.3 113.7 13.4 C 113.7 13.4 113.5 13.5 113.5 13.7 C 113.5 14.1 113.5 14.3 113.2 14.5 C 113.2 14.6 113 14.7 112.7 14.7 L 108.7 14.7 C 109.2 14.1 110 13.4 111.1 12.5 C 112.2 11.8 112.7 11.2 113 10.8 C 113.5 10.4 114 9.8 114 9.3 C 114.5 8.7 114.5 8.1 114.5 7.6 C 114.5 6.4 114.3 5.4 113.5 4.7 C 113 4 111.9 3.6 110.6 3.6 Z M 152.3 15.5 C 152.3 15.7 152.1 16 151.8 16.3 L 150.5 17.6 C 149.9 18 149.4 18.3 149.1 18.4 C 148.9 18.4 148.9 18.5 148.9 18.7 L 148.9 19 L 148.9 19.2 C 148.9 19.4 148.9 19.5 149.1 19.5 C 149.4 19.5 149.9 19.4 150.5 19.2 L 150.5 27.5 C 150.5 27.7 150.2 27.9 149.9 27.9 C 149.7 28 149.7 28.1 149.4 28.1 L 149.4 28.6 C 149.4 28.8 149.4 28.9 149.7 29 C 149.7 29.1 149.7 29.1 149.9 29.1 L 153.6 29.1 C 153.9 29.1 153.9 29 153.9 28.9 L 153.9 28.2 C 153.9 28.1 153.9 28 153.6 27.9 C 153.4 27.9 153.4 27.8 153.4 27.6 L 153.4 15.5 L 152.6 15.5 Z M 53.4 16.8 C 53.4 17 53.4 17.3 52.8 17.6 L 51.5 18.9 C 51 19.3 50.7 19.6 50.2 19.7 C 50.2 19.7 49.9 19.8 49.9 20 L 49.9 20.3 L 49.9 20.5 C 49.9 20.7 50.2 20.8 50.2 20.8 C 50.7 20.8 51 20.7 51.5 20.5 L 51.5 28.8 C 51.5 29 51.5 29.2 51 29.2 C 51 29.3 50.7 29.3 50.4 29.4 L 50.4 29.9 C 50.4 30.1 50.7 30.3 50.7 30.3 C 50.7 30.4 51 30.4 51 30.4 L 54.7 30.4 C 55 30.4 55 30.3 55 30.2 L 55 29.5 C 55 29.4 55 29.3 54.7 29.2 C 54.7 29.2 54.4 29.1 54.4 28.9 L 54.4 16.8 L 53.6 16.8 Z M 59.8 16.8 C 59.8 17 59.8 17.3 59.2 17.6 L 57.9 18.9 C 57.4 19.3 57.1 19.6 56.6 19.7 C 56.6 19.7 56.3 19.8 56.3 20 L 56.3 20.3 L 56.3 20.5 C 56.3 20.7 56.6 20.8 56.6 20.8 C 57.1 20.8 57.4 20.7 57.9 20.5 L 57.9 28.8 C 57.9 29 57.9 29.2 57.4 29.2 C 57.4 29.3 57.1 29.3 56.8 29.4 L 56.8 29.9 C 56.8 30.1 57.1 30.3 57.1 30.3 C 57.1 30.4 57.4 30.4 57.4 30.4 L 61.1 30.4 C 61.3 30.4 61.3 30.3 61.3 30.2 L 61.3 29.5 C 61.3 29.4 61.3 29.3 61.1 29.2 C 61.1 29.2 60.8 29.1 60.8 28.9 L 60.8 16.8 L 60 16.8 Z M 104.4 21.1 C 56 21.6 16.9 61.1 17.5 109.5 C 17.7 158 57.1 197.1 105.5 196.8 C 153.9 196.8 193.3 157.4 193 109 L 193 108 C 192.8 59.5 152.8 20.6 104.4 21.1 Z M 103.9 25.1 L 103.6 43.3 L 105.2 43.3 L 105.5 25.1 C 107.9 25.1 110.3 25.2 112.7 25.4 L 111.9 32.7 L 113.5 32.9 L 114.3 25.6 C 116.9 25.9 119.3 26.2 121.7 26.7 L 119.9 34.1 L 121.5 34.4 L 123.1 27 C 125.7 27.6 128.1 28.2 130.2 28.9 L 127.8 36.1 L 129.2 36.6 L 131.8 29.4 C 134.2 30.2 136.4 31 138.5 32 L 135.3 38.8 L 136.6 39.5 L 139.8 32.6 C 141.9 33.5 143.8 34.5 145.9 35.6 L 136.4 51.6 L 137.7 52.4 L 147.3 36.4 C 149.4 37.6 151.5 38.9 153.4 40.3 L 148.9 46.5 L 150.2 47.3 L 154.7 41.3 C 156.8 42.7 158.7 44.1 160.6 45.7 L 155 51.6 L 156.3 52.6 L 161.6 47 C 163.5 48.6 165.4 50.2 166.9 52.1 L 160.8 57.4 L 161.9 58.5 L 168 53.4 C 169.6 55.3 171.2 57.1 172.5 59 L 166.2 63.5 L 166.9 64.6 L 173.3 60.1 C 174.7 61.9 176 63.8 177.1 65.9 L 161.1 75 L 161.9 76.3 L 177.9 67.3 C 179.2 69.4 180.2 71.5 181.3 73.6 L 174.4 76.8 L 174.9 78.2 L 182.1 75.2 C 182.9 77.4 183.7 79.8 184.5 81.9 L 177.1 84.3 L 177.6 85.9 L 185 83.5 C 185.8 85.9 186.6 88.3 187.2 90.7 L 179.4 92.3 L 179.4 93.6 L 187.4 92.3 C 188 94.7 188.2 97 188.5 99.4 L 180.8 100 L 180.8 101.6 L 188.5 100.8 C 188.8 103.2 189 105.6 189 108 L 170.1 107.7 L 170.1 109.3 L 189.3 109.5 C 189.3 111.9 189 114.6 189 117 L 180.8 115.9 L 180.5 117.5 L 188.8 118.6 C 188.5 121 188 123.4 187.7 125.8 L 179.4 123.9 L 179.2 125.5 L 187.2 127.4 C 186.6 129.8 186.1 132.2 185.3 134.6 L 177.3 131.9 L 176.8 133.2 L 184.8 136.1 C 184 138.5 183.2 140.7 182.1 142.8 L 174.7 139.3 L 173.9 140.7 L 181.6 144.1 C 180.5 146.3 179.4 148.4 178.4 150.2 L 161.6 140.1 L 160.8 141.7 L 177.6 151.6 L 173.6 158 L 166.7 152.6 L 165.9 154 L 172.5 159.3 C 171.2 161.2 169.6 163 168 164.9 L 161.6 158.8 L 160.6 160.1 L 166.9 166.2 C 165.1 167.8 163.2 169.7 161.4 171.3 L 155.8 164.9 L 154.7 165.7 L 160.3 172.3 C 158.4 173.9 156.6 175.5 154.4 176.8 L 149.7 169.9 L 148.6 170.7 L 153.4 177.9 C 151.5 179 149.7 180.3 147.5 181.4 L 138 164.6 L 136.6 165.4 L 146.2 182.2 C 144.1 183.5 141.7 184.6 139.6 185.6 L 136.1 177.9 L 134.8 178.4 L 138 186.2 C 135.8 187.2 133.4 188 131 188.8 L 128.6 180.6 L 127 181.1 L 129.4 189.3 C 127 189.9 124.7 190.7 122.3 191.2 L 120.7 183 L 119.3 183 L 120.7 191.5 C 118.3 191.7 115.9 192.3 113.5 192.5 L 113 184.3 L 111.4 184.3 L 112.2 192.5 C 110 192.8 107.9 192.8 105.8 192.8 L 106 173.7 L 104.4 173.7 L 104.2 192.8 C 101.5 192.8 99.1 192.5 96.7 192.3 L 97.8 184.3 L 96.2 184 L 95.1 192.3 C 92.7 192 90.3 191.5 87.9 190.9 L 89.8 183 L 88.2 182.4 L 86.3 190.7 C 83.7 190.1 81.3 189.3 78.9 188.5 L 81.8 180.8 L 80.5 180.3 L 77.6 188.3 C 75.2 187.5 73 186.4 70.9 185.6 L 74.4 178.2 L 73 177.4 L 69.3 184.8 C 67.5 184 65.3 182.7 63.5 181.6 L 73 165.1 L 71.7 164.3 L 61.9 180.8 C 59.8 179.5 57.9 178.2 55.8 176.8 L 60.8 170.2 L 59.5 169.4 L 54.4 175.8 C 52.6 174.2 50.7 172.9 48.8 171 L 54.4 165.1 L 53.4 164.1 L 47.8 169.9 C 45.9 168.3 44.1 166.5 42.5 164.6 L 48.6 159.3 L 47.8 158.2 L 41.4 163.3 C 39.8 161.7 38.5 159.6 36.9 157.7 L 43.5 153.2 L 42.7 152.1 L 36.1 156.6 C 35 154.8 33.7 152.9 32.6 151 L 49.6 141.5 L 48.8 140.1 L 31.8 149.7 C 30.8 147.6 29.7 145.2 28.6 143.1 L 36.3 139.6 L 35.5 138.3 L 27.8 141.5 C 27 139.3 26.2 136.9 25.4 134.6 L 33.4 132.2 L 32.9 130.6 L 24.9 133 C 24.1 130.6 23.6 128.2 23 125.8 L 31.3 124.2 L 31 122.8 L 22.8 124.2 C 22.5 121.8 22 119.4 21.7 117 L 30 116.5 L 29.7 114.9 L 21.7 115.7 C 21.4 113.5 21.4 111.7 21.4 109.5 L 21.4 109.3 L 40.9 109.5 L 40.9 108 L 21.4 107.7 C 21.4 105 21.7 102.6 22 100.2 L 30.2 101.3 L 30.5 99.7 L 22 98.6 C 22.2 96 22.8 93.6 23.3 91.2 L 31.6 93.3 L 31.8 91.7 L 23.6 89.6 C 24.1 87.2 24.9 84.8 25.7 82.4 L 33.7 85.3 L 34.2 84 L 26.2 80.8 C 27 78.7 27.8 76.3 28.9 74.2 L 36.3 77.9 L 37.1 76.6 L 29.4 72.8 C 30.2 71 31.3 69.4 32.4 67.5 L 49.1 77.6 L 49.9 76.3 L 32.9 66.2 C 34.2 64.1 35.5 61.9 37.1 60.1 L 44.1 65.1 L 45.1 64.1 L 38.2 58.7 C 39.5 56.6 41.1 54.8 42.7 52.9 L 49.4 59 L 50.4 57.9 L 43.8 51.8 C 45.7 50 47.5 48.1 49.4 46.5 L 55 53.2 L 56 52.4 L 50.4 45.4 C 52.3 43.8 54.2 42.3 56.3 40.9 L 61.1 48.1 L 62.4 47.3 L 57.4 40 C 59 38.9 60.8 37.8 62.7 36.7 L 72.3 53.7 L 73.6 52.9 L 64 35.9 C 66.1 34.7 68.3 33.6 70.7 32.5 L 74.1 40.5 L 75.4 39.8 L 72 31.9 C 74.4 30.9 76.8 30 78.9 29.3 L 81.6 37.7 L 83.2 37.2 L 80.5 28.8 C 82.9 28 85.3 27.4 87.9 26.9 L 89.5 35.5 L 90.9 35.3 L 89.5 26.6 C 91.9 26.2 94.3 25.8 96.7 25.5 L 97.3 34.1 L 98.9 34 L 98.1 25.4 C 99.9 25.3 102 25.1 103.9 25.1 Z M 188.8 51 C 187.7 51 186.9 51.3 186.4 52.1 C 185.8 52.6 185.3 53.4 185.3 54.2 C 185.3 54.8 185.6 55 185.6 55.3 C 185.8 55.5 186.1 55.8 186.4 55.8 C 186.9 55.8 187.2 55.5 187.4 55.3 C 187.7 55 187.7 54.8 187.7 54.2 L 187.7 53.4 L 187.7 52.9 C 187.7 52.6 188 52.6 188 52.4 C 188 52.1 188.2 52.1 188.5 52.1 C 189 52.1 189.3 52.4 189.3 52.6 C 189.6 52.9 189.6 53.7 189.6 54.5 C 189.6 55.5 189.6 56.3 189 57.1 C 189 57.7 188.5 58.7 187.4 59.8 C 186.6 60.9 186.1 61.4 185.8 61.7 C 185.3 61.9 185 62.5 185 62.7 L 185 64.6 L 191.7 64.6 L 192.2 64.6 L 192.2 63.8 C 192.5 63.3 192.5 62.7 192.5 62.2 C 192.8 61.7 192.8 61.1 192.8 61.1 L 192.8 60.9 C 192.8 60.9 192.8 60.6 192.2 60.6 C 192.2 60.6 192 60.6 192 60.9 C 192 60.9 191.7 60.9 191.7 61.1 C 191.7 61.4 191.7 61.7 191.4 61.9 C 191.4 61.9 191.2 62.2 190.9 62.2 L 186.9 62.2 C 187.4 61.4 188.2 60.9 189.3 59.8 C 190.4 59.3 190.9 58.7 191.2 58.2 C 191.7 57.7 192.2 57.1 192.2 56.6 C 192.8 56.1 192.8 55.5 192.8 55 C 192.8 53.7 192.5 52.9 191.7 52.1 C 191.2 51.3 190.1 51 188.8 51 Z M 15.3 53.2 C 15.3 53.4 15.1 53.7 14.8 54 L 13.5 55.3 C 12.9 55.5 12.4 55.8 12.1 56.1 L 11.9 56.3 L 11.9 56.6 L 11.9 56.9 L 12.1 57.1 C 12.4 57.1 12.9 57.1 13.5 56.9 L 13.5 65.1 C 13.5 65.4 13.2 65.4 12.9 65.7 L 12.4 65.7 L 12.4 66.2 L 12.7 66.7 L 12.9 66.7 L 16.7 66.7 C 16.7 66.7 16.9 66.7 16.9 66.5 L 16.9 65.9 C 16.9 65.7 16.7 65.7 16.7 65.7 L 16.4 65.1 L 16.4 53.2 L 15.6 53.2 Z M 22.2 53.2 C 21.2 53.2 20.1 53.7 19.3 55 C 18.5 56.1 18.3 57.7 18.3 60.1 C 18.3 62.5 18.5 64.1 19.6 65.1 C 20.1 66.2 20.9 66.7 22 66.7 C 23 66.7 24.1 66.2 24.9 65.1 C 25.4 63.8 26 62.2 26 59.8 C 26 58.5 25.7 57.4 25.4 56.3 C 25.2 55.5 24.6 54.8 24.1 54.2 C 23.6 53.4 22.8 53.2 22.2 53.2 Z M 22.2 54.2 C 22.2 54.2 22.5 54.2 22.5 54.5 C 22.5 54.8 22.8 55 22.8 55.3 L 22.8 64.9 C 22.8 65.1 22.5 65.4 22.5 65.7 L 22 65.7 C 21.4 65.7 21.4 65.4 21.4 64.9 L 21.4 55.3 C 21.4 54.5 21.7 54.2 22.2 54.2 Z M 9.2 101.3 C 8.1 101.3 7.3 101.6 6.8 102.4 C 6.3 102.9 6 103.4 5.8 104.2 C 5.5 105 5.2 105.8 5.2 106.6 C 5.2 108.2 5.5 109.3 6 110.1 C 6.5 110.9 7.3 111.1 8.1 111.1 C 8.7 111.1 9.2 110.9 9.7 110.3 L 9.7 110.9 C 9.7 111.7 9.7 112.2 9.5 112.5 C 9.2 113 8.9 113.3 8.4 113.3 C 7.9 113.5 7.3 113.8 6.5 113.8 L 6.3 113.8 L 6.3 114.6 L 6.3 114.9 L 6.8 114.9 C 8.9 114.9 10.3 114.3 11.3 113.3 C 12.4 112.2 12.9 110.3 12.9 107.7 C 12.9 105.3 12.7 103.7 11.9 102.9 C 11.3 101.8 10.3 101.3 9.2 101.3 Z M 201.3 102.1 C 200.2 102.1 199.4 102.4 198.9 102.9 C 198.3 103.4 198.1 104.2 198.1 105 C 198.1 105.6 198.3 105.8 198.3 106.1 C 198.6 106.4 198.9 106.6 199.1 106.6 C 199.7 106.6 199.9 106.6 199.9 106.4 C 200.2 106.1 200.2 105.8 200.2 105.6 L 200.2 104.5 L 200.2 104 L 200.2 103.4 C 200.5 103.4 200.7 103.2 201 103.2 C 201.3 103.2 201.5 103.4 201.5 103.7 C 201.8 104.2 201.8 104.8 201.8 105.8 C 201.8 106.6 201.8 107.2 201.5 107.4 L 201 108 L 199.7 108 C 199.7 108 199.4 108.2 199.4 108.5 L 199.4 108.5 L 199.4 109 L 199.7 109.3 L 199.9 109.3 L 200.7 109.3 C 201.3 109.3 201.5 109.3 201.5 109.5 C 201.8 109.8 201.8 110.1 201.8 110.3 L 201.8 112.5 L 202.1 113 C 202.1 113.5 202.1 114.1 201.8 114.3 C 201.8 114.6 201.5 114.9 201 114.9 C 200.7 114.9 200.5 114.9 200.2 114.6 C 200.2 114.3 199.9 114.3 199.9 114.1 C 199.9 113.8 200.2 113.8 200.2 113.5 L 200.2 112.7 C 200.2 112.5 200.2 112.2 199.9 111.9 C 199.9 111.7 199.7 111.4 199.1 111.4 C 198.9 111.4 198.6 111.7 198.1 111.9 C 198.1 112.2 197.8 112.5 197.8 113 C 197.8 113.8 198.3 114.3 198.9 115.1 C 199.4 115.7 200.2 115.9 201 115.9 C 201.8 115.9 202.6 115.7 203.1 115.4 C 203.9 115.1 204.5 114.6 204.7 114.1 C 205.3 113.5 205.3 112.7 205.3 111.9 C 205.3 110.3 204.5 109 202.3 108.5 L 202.3 108.5 C 203.4 108.2 203.9 108 204.2 107.4 C 204.7 106.9 205 106.4 205 105.6 C 205 104.8 204.7 104 203.9 103.2 C 203.4 102.6 202.6 102.1 201.3 102.1 Z M 9.2 102.4 C 9.7 102.4 9.7 102.6 9.7 103.2 L 9.7 109 L 9.5 109.5 L 8.9 109.8 L 8.7 109.5 C 8.7 109.5 8.4 109.3 8.4 109 L 8.4 103.2 C 8.4 102.6 8.7 102.4 9.2 102.4 Z M 21.2 152.1 C 20.1 152.1 19.3 152.6 18.5 153.2 C 17.7 153.7 17.5 154.5 17.5 155.6 C 17.5 156.9 18 158.2 19.1 159 C 17.7 159.8 17.2 160.9 17.2 162.2 C 17.2 163.3 17.5 164.1 18.3 164.9 C 19.1 165.7 19.9 165.9 20.9 165.9 C 22 165.9 22.8 165.4 23.6 164.9 C 24.4 164.1 24.9 163 24.9 161.7 C 24.9 160.9 24.6 160.4 24.4 159.8 C 24.1 159 23.6 158.5 23 158 C 24.1 157.4 24.6 156.4 24.6 155.3 C 24.6 154.5 24.4 153.7 23.6 153.2 C 23 152.6 22.2 152.1 21.2 152.1 Z M 191.4 153.2 C 190.9 153.2 190.6 153.4 190.6 153.4 L 190.4 153.7 L 185.8 161.2 C 185.3 161.4 185.3 161.7 185.3 161.7 L 185.3 161.9 L 185.3 163 L 185.3 163.3 L 185.8 163.3 L 189 163.3 L 189 165.1 C 189 165.4 188.8 165.7 188.8 165.7 C 188.5 165.7 188.5 165.9 188.5 166.2 L 188.5 166.7 L 188.8 166.7 L 192.2 166.7 L 192.5 166.7 C 192.5 166.7 192.8 166.7 192.8 166.5 L 192.8 166.2 C 192.8 165.9 192.5 165.7 192.5 165.7 C 192 165.4 192 165.1 192 164.9 L 192 163.3 L 192.8 163.3 L 193 163.3 L 193 163 L 193 162.5 L 193 161.9 L 192.8 161.9 L 192 161.9 L 192 153.7 L 192 153.4 C 191.7 153.4 191.4 153.2 191.4 153.2 Z M 21.2 153.2 C 22.2 153.2 22.8 154 22.8 155.3 C 22.8 156.4 22.5 156.9 22 157.4 C 21.2 156.9 20.6 156.4 20.4 155.8 C 20.1 155.6 19.9 155.3 19.9 154.8 C 19.9 154.5 19.9 154.2 20.1 153.7 C 20.4 153.4 20.9 153.2 21.2 153.2 Z M 189 158 L 189 161.9 L 186.4 161.9 Z M 19.9 159.8 L 21.2 160.6 L 22.2 161.7 C 22.5 162.2 22.8 162.5 22.8 163 C 22.8 163.5 22.5 164.1 22.2 164.3 C 22 164.6 21.4 164.6 20.9 164.6 C 20.4 164.6 19.9 164.6 19.6 164.1 C 19.3 163.5 19.3 163 19.3 161.9 L 19.3 160.6 C 19.6 160.1 19.6 159.8 19.9 159.8 Z M 53.4 188.5 L 53.4 189.1 L 53.1 192 C 53.1 192 53.1 192.3 53.4 192.3 C 53.9 192.3 54.2 192 54.2 192 L 54.4 191.7 C 54.4 191.2 54.7 191.2 55 191.2 L 58.4 191.2 L 57.1 193.3 C 56.6 194.7 56 195.7 55.8 197.1 C 55.2 198.1 55.2 199.2 55.2 200 L 55.2 200.5 L 55 200.5 L 54.7 200.8 L 54.7 201.3 L 54.7 201.6 L 55 201.8 L 58.4 201.8 C 58.4 201.8 58.7 201.8 58.7 201.6 C 58.7 201.6 59 201.6 59 201.3 C 59 201.1 58.7 200.8 58.7 200.8 L 58.4 200.3 C 58.2 200.3 58.2 199.7 58.2 198.9 C 58.2 196.8 58.4 195.2 59 193.3 C 59.5 191.7 59.8 190.4 60.3 189.9 C 60.3 189.3 60.5 189.1 60.5 189.1 L 60.5 188.8 L 60.5 188.5 L 60.3 188.5 L 53.9 188.5 Z M 155.8 189.3 L 155.5 189.6 L 155.2 189.6 L 151.3 189.6 L 150.7 196.3 L 150.7 196.5 C 150.7 196.5 150.7 196.8 151 196.8 L 151.3 196.8 C 151.3 196.8 151.5 196.5 151.8 196.5 L 151.8 196.3 C 152.1 195.5 152.6 195.2 153.1 195.2 C 153.4 195.2 153.6 195.2 153.9 195.7 C 153.9 196.3 154.2 197.1 154.2 198.1 L 154.2 199.5 L 154.2 201.1 C 154.2 201.3 153.9 201.6 153.9 201.6 C 153.6 201.8 153.4 201.8 153.1 201.8 C 152.8 201.8 152.6 201.8 152.6 201.6 L 152.3 201.1 L 152.3 200.5 C 152.3 200.3 152.6 200 152.6 199.7 C 152.6 199.5 152.3 199.2 152.1 198.9 C 151.8 198.7 151.5 198.7 151.3 198.7 C 150.7 198.7 150.5 198.7 150.5 198.9 C 150.2 199.2 150.2 199.7 150.2 200 C 150.2 200.8 150.5 201.3 151 202.1 C 151.5 202.6 152.3 202.9 153.4 202.9 C 154.4 202.9 155.2 202.4 156.3 201.6 C 156.8 200.8 157.4 199.7 157.4 198.4 C 157.4 197.1 156.8 196 156.3 195.2 C 155.8 194.4 154.7 193.9 153.6 193.9 C 153.1 193.9 152.6 194.1 152.1 194.4 L 152.1 192 L 156 192 L 156.3 192 L 156.3 191.7 L 156.6 189.9 L 156.6 189.6 L 156.6 189.3 L 156 189.3 Z M 106.6 201.3 C 105.5 201.3 104.4 201.6 103.4 202.1 C 102.6 202.6 101.8 203.4 101.2 204.5 C 100.7 205.6 100.4 206.9 100.4 208.8 C 100.4 210.1 100.7 211.4 101 212.2 C 101.5 213.3 101.8 213.8 102.3 214.3 C 102.8 214.6 103.6 214.9 104.4 214.9 C 105.5 214.9 106.6 214.3 107.1 213.3 C 107.9 212.5 108.2 211.2 108.2 209.6 C 108.2 208 107.9 206.9 107.4 206.1 C 106.8 205.3 106.3 205 105.2 205 C 104.7 205 104.2 205.3 103.6 205.8 C 103.6 204.8 103.9 204.2 103.9 204 C 104.4 203.4 104.7 202.9 105.2 202.9 C 105.8 202.6 106.3 202.6 106.8 202.6 C 107.1 202.6 107.1 202.4 107.1 202.4 L 107.1 201.6 C 107.1 201.3 106.8 201.3 106.6 201.3 Z M 104.4 206.4 L 104.7 206.6 C 105 206.6 105 206.9 105 206.9 L 105 212.5 C 105 213 105 213.6 104.7 213.6 L 104.4 213.8 L 103.9 213.8 C 103.9 213.6 103.6 213.6 103.6 213.3 L 103.6 207.4 C 103.6 206.6 103.9 206.4 104.4 206.4 Z" />
    <path
      style="fill: none; stroke: none; stroke-width: 1.4; stroke-dasharray: none; opacity: 0.994; paint-order: stroke fill markers; stroke-miterlimit: 29.4"
      id="path223" class="centermarker"
      d="M 106.3 108.6 C 106.3 109.5 105.6 110.2 104.7 110.2 C 103.8 110.2 103.1 109.5 103.1 108.6 C 103.1 107.7 103.8 107 104.7 107 C 105.6 107 106.3 107.7 106.3 108.6" />
    <path style="fill: #ffffff" d="M 103.7 64.5 L 100.5 119.1 L 107.4 119.1 L 105.5 64.5 Z" id="path230"
      class="hourarrow" />
    <path d="M 104.2 44.1 L 101.3 118.9 L 106.6 118.9 L 105.5 44.1 Z" id="path225" class="minutearrow"
      style="fill: #ffffff; display: inline; fill-opacity: 1" />
    <path style="fill: #ffffff; display: inline; fill-opacity: 1"
      d="M 103.7 27.4 L 103.7 118.7 L 106.3 118.7 L 105.8 27.4 Z" id="path228" class="secondarrow" />
  </g>
  <script>
    let svg = document.documentElement;
        let [centermarker, hourarrow, minutearrow, secondarrow] = ".centermarker,.hourarrow,.minutearrow,.secondarrow".split(",")
            .map(c => svg.querySelector(c));
        let crect = centermarker.getBBox();
        let cx = crect.x + crect.width / 2;
        let cy = crect.y + crect.height / 2;
        let hourTransform = svg.createSVGTransform();
        let minuteTransform = svg.createSVGTransform();
        let secondTransform = svg.createSVGTransform();
        hourarrow.transform.baseVal.initialize(hourTransform);
        minutearrow.transform.baseVal.initialize(minuteTransform);
        secondarrow.transform.baseVal.initialize(secondTransform);
        let timer = setInterval(function ()
        {
            let date = new Date();
            hourTransform.setRotate(date.getHours() * 30 + date.getMinutes() / 2, cx, cy);
            minuteTransform.setRotate(date.getMinutes() * 6, cx, cy);
            secondTransform.setRotate(date.getSeconds() * 6, cx, cy);
        }, 100);
  </script>
</svg>

@barabar · 01.12.2024, 08:38

diadiavova, Uncaught TypeError: svg.createSVGTransform is not a function

@diadiavova · 01.12.2024, 09:11

barabar, это SVG документ, надо сохранить с расширением .svg

@barabar · 01.12.2024, 09:19

Ну понятно. Запускать в браузере, как я понял. Надо было пояснять. Ок.

@diadiavova · 01.12.2024, 09:20

barabar, если нужно вставить это в HTML, просто первую строчку скрипта нужно поменять на

JavaScript
1
let svg = document.getElementById("svg1");

Просто document.documentElement в SVG-документе - это элемент svg, а в HTML- документе - html. У последнего, разумеется, нет такого метода.

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@8Observer8 9037 / 2937 / 494 Регистрация: 05.10.2013 Сообщений: 7,962 Записей в блоге: 216
	11.01.2018, 00:38
	Предлагаю делиться проектами/примерами на Three.js и Babylon.js в этой теме: Проекты на Three.js и Babylon.js 0

@NX9000 0 / 0 / 1 Регистрация: 22.06.2015 Сообщений: 9
	26.08.2018, 21:53
	Библиотека для работы с JSON данными включающими в себя логические ветвления. https://www.npmjs.com/package/jsoncode 0

@Kraken73 105 / 93 / 50 Регистрация: 17.09.2015 Сообщений: 612
	26.10.2018, 09:07
	написал плагин для выделения последней строки в тексте, т.к. в инете кривоватый был принимаются идеи по улучшению кода\плагина https://github.com/Kovich73/lastLine 0

@mr_dramm Молодой техлид) 1818 / 1056 / 329 Регистрация: 17.07.2021 Сообщений: 2,146 Записей в блоге: 14
	15.03.2023, 12:26
	Плавная прокрутка всегда пригодится в хозяйстве на любом сайте, комментируем не стесняемся отвечу всем! 0

@barabar Заблокирован
	01.12.2024, 08:38
	diadiavova, Uncaught TypeError: svg.createSVGTransform is not a function 1

@diadiavova 7258 / 2605 / 744 Регистрация: 11.04.2015 Сообщений: 4,148 Записей в блоге: 43
	01.12.2024, 09:11
	barabar, это SVG документ, надо сохранить с расширением `.svg` 1

@barabar Заблокирован
	01.12.2024, 09:19
	Ну понятно. Запускать в браузере, как я понял. Надо было пояснять. Ок. 0