From 60597a8bdcc3784f8265271840922f0491147545 Mon Sep 17 00:00:00 2001
From: yuanchuan <yuanchuan23@gmail.com>
Date: Mon, 5 Jun 2017 20:08:11 +0800
Subject: [PATCH] docs: replace flames with star

---
 docs/index.html |  4 ++--
 docs/main.js    | 25 +++++++++++++++----------
 docs/style.css  |  4 ++--
 3 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index ea0cc51..3795815 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -35,8 +35,8 @@
       <div class="playground">
           <div class="doodle" front>
             <ul class="nav" data-current="leaves">
-              <li data-name="flames">Leaves</li>
-              <li data-name="leaves">Flames</li>
+              <li data-name="star">Leaves</li>
+              <li data-name="leaves">Star</li>
             </ul>
           <!-- insert dynamicly -->
         </div>
diff --git a/docs/main.js b/docs/main.js
index d4490b4..be6161e 100644
--- a/docs/main.js
+++ b/docs/main.js
@@ -86,21 +86,26 @@
         );
     `),
 
-    flames: indent(`
-      clip-path: @shape(bicorn);
+    star: indent(`
+      :doodle {
+        clip-path: @shape(bud, 5);
+        background: #673AB7;
+      }
+
+      clip-path: @shape(bud, 5);
 
       background: hsla(
-        calc(200 + 2 * @index()),
-        70%, 60%,
-        @rand(.8)
+        calc(300 + 3 * @index()),
+        75%, 70%, @rand(.8)
       );
 
+      transition: .2s ease @rand(300ms);
       transform:
-        rotate(@rand(360deg))
-        scale(@rand(.5, 3))
-        translate(
-          @rand(-100%, 100%),
-          @rand(-100%, 100%)
+        scale(@rand(.2, 1.5))
+        translate3d(
+          @rand(-50%, 50%),
+          @rand(-50%, 50%),
+          0
         );
     `)
   }
diff --git a/docs/style.css b/docs/style.css
index 59f9a9f..2cfb2f0 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -233,8 +233,8 @@ textarea[code] {
       background: #E5F5FC;
       display: none;
     }
-    .doodle [data-current="leaves"] [data-name="flames"],
-    .doodle [data-current="flames"] [data-name="leaves"] {
+    .doodle [data-current="leaves"] [data-name="star"],
+    .doodle [data-current="star"] [data-name="leaves"] {
       display: block;
     }
   .playground .doodle,