前言

最近体验了一下最新的模型 gpt-4，确实名不虚传，gpt-4 比 gpt-3.5 更智能。我们今天就让 gpt-4 来实现一个 svg 描边动画，看看它的能力如何。如果有同学想用 RMB 购买 plus 可以参考我的文章：使用支付宝开通 ChatGPT plus。

实操

1. 我们一步一步来，先不加动画，直接要求画个西瓜，看看是否符合我们的预期；

看着好像画的不错，比 gpt-3.5 要好很多，下面是 gpt-3.5 画的：

西瓜瓤应该是红色的，我们纠正一下。下面我就不粘贴 chatgpt 回答的内容了，直接贴代码的效果图。

画一个完整的西瓜

这个西瓜勉强可以接受吧，我实在不知道该怎么描述西瓜的样子了。

开始加描边动画

功能实现的很不错，下面是完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>带动画的西瓜</title>
    <style>
        .melon-path {
            stroke-dasharray: 1000;
            stroke-dashoffset: 0;
            transition: stroke-dashoffset 2s;
        }
        .melon-svg:hover .melon-path {
            animation: drawMelon 2s forwards;
        }
        @keyframes drawMelon {
            0%, 1% {
                stroke-dashoffset: 0;
            }
            2% {
                stroke-dashoffset: 1000;
            }
            100% {
                stroke-dashoffset: 0;
            }
        }
    </style>
</head>
<body>
    <svg class="melon-svg" width="200px" height="100px" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <clipPath id="melon-clip">
                <ellipse cx="100" cy="50" rx="93" ry="43"/>
            </clipPath>
        </defs>
        <!-- 西瓜主体部分 -->
        <ellipse class="melon-path" cx="100" cy="50" rx="95" ry="45" fill="#56C05D" stroke="black" stroke-width="2"/>
        <!-- 西瓜条纹部分 -->
        <g clip-path="url(#melon-clip)">
            <path class="melon-path" d="M 0,20 Q 50,10 100,20 T 200,20" stroke="#399D4A" stroke-width="2" fill="none"/>
            <path class="melon-path" d="M 0,35 Q 50,25 100,35 T 200,35" stroke="#399D4A" stroke-width="2" fill="none"/>
            <path class="melon-path" d="M 0,50 Q 50,40 100,50 T 200,50" stroke="#399D4A" stroke-width="2" fill="none"/>
            <path class="melon-path" d="M 0,65 Q 50,55 100,65 T 200,65" stroke="#399D4A" stroke-width="2" fill="none"/>
            <path class="melon-path" d="M 0,80 Q 50,70 100,80 T 200,80" stroke="#399D4A" stroke-width="2" fill="none"/>
        </g>
    </svg>
</body>
</html>

本来想去掉绿色背景的，但是触发用量限制了

总结

在给 chatgpt 提需求的时候描述要尽可能准确，并且要提供足够的上下文，只有这样 chatgpt 才能理解你的意图；

我们的测试实际上包括绘画+编码，要描述画成什么样其实很困难，chatgpt 把西瓜画到这个程度已经很厉害了。

用 ChatGPT 实现 svg 描边动画

前言

实操

总结