红影 发表于 2022-9-13 22:08

马黑黑 发表于 2022-9-13 20:55
非对称的曲线可能也很常见

前面玩的都是对称呀,看到这个图形才感觉到非对称。

马黑黑 发表于 2022-9-13 22:09

红影 发表于 2022-9-13 22:08
前面玩的都是对称呀,看到这个图形才感觉到非对称。

非常好的

马黑黑 发表于 2022-9-13 22:09

红影 发表于 2022-9-13 22:02
还是你的方法简洁而且易懂。

我就是没加标点

马黑黑 发表于 2022-9-13 22:10

红影 发表于 2022-9-13 22:01
你这个顺滑多了,漂亮你是从最上面中心点出发的,我是从最左边点出发的。

都可以的,有的人工智能还从底部开始呢

红影 发表于 2022-9-13 22:37

马黑黑 发表于 2022-9-13 22:10
都可以的,有的人工智能还从底部开始呢

主要它是对称图形,我脑袋不够用,从左边开始容易对比Q后面那第一组数字{:4_173:}

红影 发表于 2022-9-13 22:37

马黑黑 发表于 2022-9-13 22:09
我就是没加标点

你这个代码少,少的容易懂。

红影 发表于 2022-9-13 22:38

马黑黑 发表于 2022-9-13 22:09
非常好的

是啊,等于对称的不对称的都见到了。

马黑黑 发表于 2022-9-13 22:52

红影 发表于 2022-9-13 22:38
是啊,等于对称的不对称的都见到了。

是的,非常不错的

马黑黑 发表于 2022-9-13 22:52

红影 发表于 2022-9-13 22:37
你这个代码少,少的容易懂。

哈哈,多了容易蒙圈

马黑黑 发表于 2022-9-13 22:53

红影 发表于 2022-9-13 22:37
主要它是对称图形,我脑袋不够用,从左边开始容易对比Q后面那第一组数字

思维习惯各人不同,都可以的。比方讲,上下结构的子,我喜欢先写下面的部分

马黑黑 发表于 2022-9-13 22:57

<style>
#papa {
        margin: auto;
        width: 740px;
        height: 640px;
        box-shadow: 3px 3px 20px #000;
        position: relative;
}
#hwrap {
        position: absolute;
        left: calc(50% - 150px);
        top: calc(50% - 150px);
}
.ball {
        --ss: 0s;
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: red;
        display: block;
        offset-path: path("M150 60 Q245 -10 280 60 Q320 150 150 290 Q-20 150 20 60 Q65 -10 150 60z");
        animation: move 6s var(--ss) linear infinite;
}
@keyframes move {
        to {         offset-distance: 100%; }
}
</style>

<div id="papa">
        <div id="hwrap"></div>
        <svg width="300" height="300" viewBox="0 0 300 300" style="border: 1px solid">
                <path d="M150 60 Q245 -10 280 60 Q320 150 150 290 Q-20 150 20 60 Q65 -10 150 60z" fill="none" stroke="olive"></path>
        </svg>
</div>

<script>
let setColor = () => Math.random().toString(16).substr(-6);
Array.from({length: 40}).forEach((ele,key) => {
        ele = document.createElement('span');
        ele.className = 'ball';
        ele.style.cssText += `--ss: ${key * 0.15}s; background: #${setColor()};`;
        hwrap.appendChild(ele);
});
</script>

马黑黑 发表于 2022-9-13 22:58

32楼,把svg部分去掉,是不是很拉风?

加林森 发表于 2022-9-14 07:48

学习学习。

红影 发表于 2022-9-14 19:58

马黑黑 发表于 2022-9-13 22:52
是的,非常不错的

现在对设计路径有点感觉了,通过自己也动手画,发现还是黑黑那个心形画得好,我再怎么调都不行,真是没有对比就没有伤害,功夫深浅绝对不是一朝一夕的事{:4_187:}

红影 发表于 2022-9-14 20:00

马黑黑 发表于 2022-9-13 22:52
哈哈,多了容易蒙圈

是啊,看到多的首先被吓住了。就像喝酒,用小杯子一点点喝感觉不到,被人一下子倒大半杯的话,还没喝就感觉已经吓醉了{:4_173:}

红影 发表于 2022-9-14 20:04

马黑黑 发表于 2022-9-13 22:53
思维习惯各人不同,都可以的。比方讲,上下结构的子,我喜欢先写下面的部分

嗯,既然从哪开始都可以,我就按自己的习惯了。{:4_204:}

红影 发表于 2022-9-14 20:05

马黑黑 发表于 2022-9-13 22:58
32楼,把svg部分去掉,是不是很拉风?

的确很酷{:4_199:}

马黑黑 发表于 2022-9-14 20:23

红影 发表于 2022-9-14 20:05
的确很酷

感觉可以{:4_173:}

马黑黑 发表于 2022-9-14 20:24

红影 发表于 2022-9-14 20:04
嗯,既然从哪开始都可以,我就按自己的习惯了。

是的,这样最好

马黑黑 发表于 2022-9-14 20:25

红影 发表于 2022-9-14 20:00
是啊,看到多的首先被吓住了。就像喝酒,用小杯子一点点喝感觉不到,被人一下子倒大半杯的话,还没喝就感 ...

对。即使这个人的逻辑性极强,面对数量众多的东西,他也会皱眉头
页: 1 [2] 3 4
查看完整版本: 手工用svg画个心形路径