css-doodle

用 CSS 写代码，几行生成惊艳的视觉艺术图案

css-doodle 是一个基于 Web Components 的创意编码工具，让你用纯 CSS 语法生成动态的视觉艺术作品。它解决的是传统 CSS 难以实现复杂图案、动画和交互式视觉创作的问题，将 CSS 的声明式语法与 JavaScript 的随机性和循环能力结合，通过一个自定义元素即可在网页中绘制出由网格、形状、渐变和动画组成的艺术图案。核心能力包括：支持 CSS 自定义属性、随机函数、循环和条件逻辑，可生成静态或动态的视觉作品；内置多种布局模式（如网格、蜂窝、波纹）和丰富的动画控制；无需构建工具，直接在浏览器中使用，也可与 React、Vue 等框架集成。它适合艺术家、设计师和前端开发者快速探索生成艺术，也为教育场景提供了直观的创意编程入门方式。

开源 free 设计创意

访问官网 ↗ GitHub ↗ 文档 ↗

GitHub 星标 ★ 6041

维护状态活跃

是否开源是

定价模式 free

项目数据

分类设计创意

开发团队css-doodle

所属国家

官网地址https://css-doodle.com

GitHubhttps://github.com/css-doodle/css-doodle

定价模式free

价格说明开源项目，MIT许可证，完全免费，无付费版本。

访问状态

是否开源是

开源协议MIT

主要语言JavaScript

技术栈/模型creative-coding,css,css-doodle,generative,generative-art,patterns,visual-art,web-component

GitHub 星标★ 6041

30天Star增速

HF 下载量

上线时间2017-02-14 00:00:00

最近更新2026-09-20 00:00:00

维护状态活跃

中文支持

访问方式

移动端支持

综合评分

收录时间2026-08-09

浏览次数4

使用教程

难度：入门约 10 分钟部署方式：库/依赖 4 步

⚠ 该项目 README 未提供完整安装说明，以下步骤为通用流程，请以官方文档为准。

环境要求

支持 Web Components 的现代浏览器
Git（用于克隆仓库）
GNU Make（仓库 Build 小节使用 make）

安装与启动步骤

1克隆仓库

从 GitHub 获取源码。README 未给出 npm 安装方式，本地使用先从仓库入手。
```
git clone https://github.com/css-doodle/css-doodle.git
```
2构建项目

进入仓库根目录执行构建。README 的 Build 小节只写了 make 这一条命令。
```
cd css-doodle && make
```
3编写第一个图案

在页面里放入元素，内部按示例写 @grid、background、margin 规则。
```
  @grid: 5 / 200px;
  background: @p(#000, #fff);
  margin: 1px;
```
4可选：用 CLI 导出

README 的 CLI Tools 列出 cssd，可预览并生成图片/视频，安装方式见其独立仓库。

如何确认成功

浏览器打开包含的页面，能看到 5×5 的黑白随机网格图案即为生效。

常见问题

Q：css-doodle 需要构建工具或前端框架吗？

A：不需要。它是 Web Component，可直接在浏览器页面中使用，也可与 React、Vue 等框架集成，README 示例就是一段标签加 CSS 规则。

Q：完整文档在哪里看？

A：README 的 Docs 小节指向官网 https://css-doodle.com，语法、设计工具和示例都以该站点为准。

Q：怎么把图案导出成图片或视频？

A：使用 README 推荐的 CLI 工具 cssd（github.com/css-doodle/cli），它提供预览并生成图片/视频的能力。

Q：make 构建失败怎么排查？

A：README 只给出 make 一条构建命令，请确认已在仓库根目录执行，且系统已正确安装 make 及所需的构建依赖。

注意事项

README 未提供 npm 包名或 CDN 引入地址，页面中如何加载该组件请以官网文档为准。
示例中的 @grid、@p 是 css-doodle 专有函数，需写在标签内部。
仓库构建方式仅由 make 驱动，README 未列出其他构建命令或参数。
README 的 Design tools 与 Resources 小节提供了在线工具和入门文章，可作为补充学习材料。

核心亮点

纯 CSS 语法，上手门槛低，无需学习复杂编程语言
内置随机函数和循环逻辑，轻松生成无限变化图案
支持动画和交互，可创作动态视觉作品

不足之处

文档偏少，高级用法示例不够丰富
浏览器兼容性依赖 Web Components 支持，老浏览器需 polyfill

适用场景

生成艺术创作与视觉设计探索
网页背景、海报或动态视觉元素生成
创意编程教学与 CSS 语法学习

替代项目

p5.js、Processing、CSS Houdini

项目介绍

css-doodle 是设计创意领域的开源项目，由 css-doodle 开发，2017 年首次发布。

在全站 13,014 个收录项目中，它的 GitHub 星标数（6,041）位列前 8%，在设计创意分类的 161 个项目里位列前 7%。

项目目前处于活跃维护状态，最近一次代码更新于 2026-09-20。MIT许可证，完全免费，无付费版本。

它主要面向的使用场景是：生成艺术创作与视觉设计探索。同类可对比的替代方案包括 p5.js、Processing、CSS Houdini。

上一篇：OCM-Dimensions

下一篇：babel