色塗りを始めましょう！

ステップ1: 塗りしたい絵を準備します

[{"selector":"#anim-9c3c84da-ede1-47f7-a541-b19c24ca57d2","keyframes":{"opacity":[0,1]},"delay":600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0f3d243a-2918-4cbb-a63d-300e4d20949d","keyframes":{"transform":["translate3d(-129.60895%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-87fdb96f-154e-40ae-9ec9-b8a91e64817b","keyframes":{"opacity":[0,1]},"delay":1900,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7a04e169-a222-4fab-a6bc-4a0e0f516d90","keyframes":{"transform":["translate3d(-217.14285%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":1900,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-875e8279-d1a4-477d-b60e-05d4b7896e22","keyframes":{"transform":["rotate(-88deg) translate3d(-159.99999%, 0px, 0) rotate(88deg)","rotate(-88deg) translate3d(0px, 0px, 0) rotate(88deg)"]},"delay":1200,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-aa0a19fb-d8df-4875-833a-f022fab466c2","keyframes":{"opacity":[0,1]},"delay":1200,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-534f90f7-0ece-410c-a30f-6a32dea50a11","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":1200,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-bf689342-2392-4c2d-a4b1-8eba723eb587","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8464ab19-7590-4af6-8d52-9b835cf30961","keyframes":{"transform":["translate3d(-115.38461%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1fb8e783-ea49-4231-a4a9-fa8ed8d495ee","keyframes":{"opacity":[0,1]},"delay":2600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6a9e2c4b-7fc5-4a83-a20d-6d8d35d8f74c","keyframes":{"transform":["translate3d(-109.46747%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] ステップ2: クリーム層をさまざまな色で着色します

ステップ4: きらきら輝く星を着色する

[{"selector":"#anim-42d1b77c-5cd9-4de5-8654-f237c10f4e2d","keyframes":{"opacity":[0,1]},"delay":600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3eb6b428-8f4e-4be3-8b1f-166c5e54c523","keyframes":{"transform":["translate3d(-211.42857%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1e0dbc27-2e65-40e6-8055-d87d5fff9d5c","keyframes":{"transform":["rotate(-102deg) translate3d(-101.63934%, 0px, 0) rotate(102deg)","rotate(-102deg) translate3d(0px, 0px, 0) rotate(102deg)"]},"delay":1200,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e7f8c792-453f-4659-bbef-e874e1d38818","keyframes":{"opacity":[0,1]},"delay":1200,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-98d1b465-6814-4c92-af02-220b83679d15","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":1200,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-c3f3058a-bd9b-491b-a32f-6136bf79914e","keyframes":{"opacity":[0,1]},"delay":1900,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-cda7d410-913f-4143-9ac7-b7ab94a8f454","keyframes":{"transform":["translate3d(-120.34885%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":1900,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3f7e39fe-2e82-4b52-b3d1-41fcb2998e62","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-032474d1-48e1-41fa-815b-40e8997380c3","keyframes":{"transform":["translate3d(-174.16267%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-890df8af-7df1-463a-8942-af7fd54a64b8","keyframes":{"opacity":[0,1]},"delay":2600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f25616d7-4a23-468d-8672-a58392928f48","keyframes":{"transform":["translate3d(-257.24141%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] ステップ3: アイスクリームコーンの色付け

絵が完成しました！

[{"selector":"#anim-40f39d13-3639-4154-8307-80d34115c513","keyframes":{"transform":["rotate(-181deg) translate3d(-176.21951%, 0px, 0) rotate(181deg)","rotate(-181deg) translate3d(0px, 0px, 0) rotate(181deg)"]},"delay":1200,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f2959daf-afba-489c-8bc1-635f81b77a9e","keyframes":{"opacity":[0,1]},"delay":1200,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-28f6980f-fa3f-4608-b114-0c91f95e20ef","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":1200,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-8a264303-cde8-4328-85c4-8aa94430c96d","keyframes":{"opacity":[0,1]},"delay":600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f60540a1-19cf-4ba1-ab90-e88466c8911c","keyframes":{"transform":["translate3d(-137.58866%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-823e574e-51f2-445b-8d4c-617aa2c28242","keyframes":{"opacity":[0,1]},"delay":1900,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b548dc86-4e01-4520-9587-73eac3f0e8ff","keyframes":{"transform":["translate3d(-249.66441%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":1900,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] ここをクリック