css-doodle

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

开源 🏷️完全免费 🔧 仅开源项目，无在线服务，需自行部署设计创意 🍴 复刻 210 👀 关注 48

访问官网 ↗ GitHub ↗

GitHub 星标 ★ 6079

维护状态活跃

是否开源开源

定价模式 🏷️完全免费开源项目，MIT许可证，完全免费，无付费版本。

项目预览

项目数据

分类设计创意

开发团队css-doodle

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

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

定价模式🏷️完全免费

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

访问状态🔧 仅开源项目，无在线服务，需自行部署

是否开源是

开源协议MIT

主要语言JavaScript

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

GitHub 星标★ 6079

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

代码更新2026-11-07

仓库体积7.5 MB

本站数据更新2026-11-08

维护状态活跃

收录时间2026-08-09

浏览次数5

项目介绍

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

Star 增长趋势

本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整

数据来源：GitHub API 逐日快照 · 收录于 2026-08-09 · 当前星标 ★ 6079

技术标签

creative-coding css generative generative-art

使用教程

⚠ 本教程由 AI 依据该项目 README 整理；原始文档不完整，部分步骤为通用流程推断，实际安装请以项目官方文档为准。

难度：入门约 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编写第一个图案

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

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