错角
<style>@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/1_r.webp') no-repeat center/cover; color: white; }
.pa::after { position: absolute; content: ''; width: 100%; height: 100%; background: url('https://638183.freep.cn/638183/t24/w8/2_r.webp') no-repeat center/cover; mask: linear-gradient(to right top, rgba(0,0,0,.5) 35%, rgba(0,0,0,.8) 55%); -webkit-mask: linear-gradient(90deg, rgba(0,0,0,.5) 35%, rgba(0,0,0,.8) 55%); z-index: -1; }
.player { width: 480px; left: 100px; bottom: 10px; }
.btnFs { top: 25px; right: 20px; }
#msvg { position: absolute; width: 12vw; heighht: 12vw; transition: .75s; opacity: var(--opacity); }
</style>
<div id="pa" class="pa">
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2418175/00/18/94/5ef7a50c397ff.mp4" autoplay loop muted></video>
<svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
<g id="g1" class="rot brightness">
<title>播放/暂停(Alt+X)</title>
<circle cx="0" cy="0" r="190" fill="transparent"></circle>
</g>
</svg>
</div>
<script>
var options = {
pa: '.pa',
urls: [['https://music.163.com/song/media/outer/url?id=2121092738', '错角']],
btns: ,
};
loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js?v0', function() {
loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
});
function tzRun() {
var aud = new AudPlayer(options);
var dr = _dr(msvg);
dr.circle(0,0,15,'lightblue', 'white', 2).addTo(g1);
dr.circle(0, 160, 30, 'lightblue', 'white', 2).addTo(g1).rotates(7);
dr.circle(0, 100, 25, 'lightblue', 'white', 2).addTo(g1).rotates(7);
dr.circle(0, 50, 20, 'lightblue', 'white', 2).addTo(g1).rotates(7);
}
function loadJs(url, callback) {
var script = document.createElement('script');
script.charset = 'utf-8';
script.src = url;
script.onload = function() {
if (callback) callback();
};
document.head.appendChild(script);
}
</script> 帖子中间的图案使用 svgdr 插件绘制，核心代码：
dr.circle(0,0,15,'lightblue', 'white', 2).addTo(g1);
dr.circle(0, 160, 30, 'lightblue', 'white', 2).addTo(g1).rotates(7);
dr.circle(0, 100, 25, 'lightblue', 'white', 2).addTo(g1).rotates(7);
dr.circle(0, 50, 20, 'lightblue', 'white', 2).addTo(g1).rotates(7);共四次画圆：
（一）画最中间的圆；
（二）画最外层的圆（7个）；
（三）画从外往里的第二层圆（7个）；
（四）画从外往里的第三层圆（7个）。
可以考虑画其它图案。各层图案数不一、颜色不同，图案尺寸也可以是另外的变化。
黑黑老师，这个插件绘制，核心代码是不是又封装好了的？ 谢谢黑黑老师辛苦，分享学习。{:4_187:} 这绘制的小播真漂亮。
欣赏黑黑好帖{:4_199:} 本帖最后由 霜染枫丹 于 2026-5-13 14:25 编辑
马老师下午好
这个作品对我是一道考题，我理性角度欠佳，还是想能看懂。我需要好好理解
霜染枫丹 发表于 2026-5-13 14:22
马老师下午好
这个作品对我是一道考题，我理性角度欠佳，还是想能看懂。我需要好好理解
嗯嗯，你理解的很到位！ 红影 发表于 2026-5-13 13:03
这绘制的小播真漂亮。
欣赏黑黑好帖
下午嚎！ 梦江南 发表于 2026-5-13 12:45
谢谢黑黑老师辛苦，分享学习。
{:4_180:} 梦江南 发表于 2026-5-13 12:45
黑黑老师，这个插件绘制，核心代码是不是又封装好了的？
svgdr 是早就做好的东东，专门用来绘制 SVG 图案，学习起来有点难度：
http://mhh.52qingyin.cn/api/svgdr/ 看了好长时间
错角：视觉上的“错位角度” ，旋转和不旋转组合，这个层次感是偏心的，不对称的，层层嵌套随着音效的变化可能让人对角度、深度产生错觉。同时我记得错角也叫对错角，可以理解为字面的双关语，错位的，错误的。
我看到火箭飞天会想到升腾 凌云之类的形容词，而在这里用了“错角”，我是想不到的，挺震撼的，我的理解是 一个冷静的、几何学的、甚至略带“错位/不完美”意味的词。这是一种 理性的浪漫：火箭升空不仅是壮丽景象，更是一次次精确角度计算下的“错位与修正”。
用最冷静的几何语言，讲一个最热血的飞天故事，名字却叫“错角” 是一件用“可计算的几何旋转”来隐喻“航天飞行中动态偏差与精确控制”的抽象音画作品。 名字本身就是一种诗意的矛盾修辞——在绝对秩序里，为“错”与“角”找到一种视觉上的和解。
我也只能理解到这里了，若是花花草草还能瞎扯一通。不管理解是否到位，都是我真实的的感觉：
形式上的时隐时现让我理解了呼吸感
题目上的修辞让我理解了冷静与沸腾的统一
几何运用让我理解了技术型艺术的思维：用最理性的几何，表达最感性的“不完美之美”。
新颖别致，别具一格，谢谢马老师精彩示范{:4_190:} 杨帆 发表于 2026-5-13 18:13
新颖别致，别具一格，谢谢马老师精彩示范
{:4_180:} 霜染枫丹 发表于 2026-5-13 14:36
看了好长时间
错角：视觉上的“错位角度” ，旋转和不旋转组合，这个层次感是偏心的，不对称的，层层嵌套 ...
{:4_199:} 霜染枫丹 发表于 2026-5-13 14:40
用最冷静的几何语言，讲一个最热血的飞天故事，名字却叫“错角” 是一件用“可计算的几何旋转”来隐喻“航 ...
{:4_180:} 霜染枫丹 发表于 2026-5-13 14:50
我也只能理解到这里了，若是花花草草还能瞎扯一通。不管理解是否到位，都是我真实的的感觉：
形式上的时 ...
这个，你的评论已经触及几何美学和几何哲学了，还有宇宙美学，很多人对此基本知之不多的 本帖最后由 霜染枫丹 于 2026-5-13 19:44 编辑
马黑黑 发表于 2026-5-13 19:13
这个，你的评论已经触及几何美学和几何哲学了，还有宇宙美学，很多人对此基本知之不多的
我儿子是学数学的，我帮他写作业，当年读过作业必读 的数学作为美学的一些知识，但记住的很少了，当年也只是现学现卖的写点文字。
原来这首歌的名称叫错角，第一次听{:4_199:}