skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(docs-infra): add Angie to the roadmap illustration

Browse Source 
The roadmap header draws a road between a start pin and a destination
pin, but nothing travels it. Angie already appears on the 404 page, the
embedded editor states and the error snack bar, so put her on the road
too.

Decorative headers are inlined into the page so the road can use CSS
variables for dark mode, which means the pose has to be embedded as
paths, with its classes flattened and its ids prefixed to keep them out
of document scope.

Note this asset is also the essentials Next Steps header.
This commit is contained in:
Kam
2026-08-16 21:32:59 +03:00
committed by Jessica Janiuk
parent 9711e86f2a
commit 1c2b0575ed
1 changed files with 25 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
adev/src/assets/images/roadmap.svg
+25
View File
@@ -90,4 +90,29 @@
stroke-width="0.93421"
stroke-miterlimit="10"
/>
<defs><linearGradient id="roadmap-angie-linear-gradient" x1="673.48" y1="917.02" x2="673.48" y2="747.23" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#eadbe7"/><stop offset=".36" stop-color="#e8d9e5"/><stop offset=".49" stop-color="#e4d2e1"/><stop offset=".58" stop-color="#dcc6da"/><stop offset=".61" stop-color="#d8c0d6"/></linearGradient><linearGradient id="roadmap-angie-linear-gradient-2" x1="480.27" y1="918.07" x2="480.27" y2="749.04" href="#roadmap-angie-linear-gradient"/><linearGradient id="roadmap-angie-linear-gradient-3" x1="386.17" y1="302.74" x2="664.61" y2="785.02" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f637e3"/><stop offset="0" stop-color="#f535de"/><stop offset=".08" stop-color="#f228bd"/><stop offset=".15" stop-color="#ef1ca1"/><stop offset=".23" stop-color="#ec138a"/><stop offset=".33" stop-color="#eb0c79"/><stop offset=".45" stop-color="#e9076d"/><stop offset=".6" stop-color="#e90465"/><stop offset=".99" stop-color="#e90464"/></linearGradient><linearGradient id="roadmap-angie-linear-gradient-4" x1="740.64" y1="183.72" x2="740.64" y2="842.08" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e90464"/><stop offset=".29" stop-color="#e00362"/><stop offset=".75" stop-color="#c90160"/><stop offset="1" stop-color="#ba005e"/></linearGradient><radialGradient id="roadmap-angie-radial-gradient" cx="583.02" cy="618.37" fx="583.02" fy="618.37" r="219.14" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#eadbe7"/><stop offset=".52" stop-color="#e8d8e5"/><stop offset=".76" stop-color="#e3d1e0"/><stop offset=".96" stop-color="#dac4d8"/><stop offset="1" stop-color="#d8c0d6"/></radialGradient></defs>
<g transform="translate(175.27 20.55) scale(0.1007)">
<path fill="none" stroke="#eadbe7" stroke-linecap="round" stroke-linejoin="round" stroke-width="68.81" d="M847.85,710.84s91.34-36.44,3.59-107.68"/>
<path fill="url(#roadmap-angie-linear-gradient)" d="M627.77,904.49c0,6.92,5.61,12.53,12.53,12.53h39s26.49-45.51,39.88-146.52h0c-20.22-27.68-60.19-31.24-84.98-7.57h0c-4.11,3.92-6.43,9.35-6.43,15.03v126.52Z"/>
<path fill="#e90464" d="M678.31,862.35h2.7c22.1,0,40.04,17.94,40.04,40.04v1.57c0,7.78-6.32,14.1-14.1,14.1h-62.09c-3.64,0-6.59-2.95-6.59-6.59v-9.08c0-22.1,17.94-40.04,40.04-40.04Z"/>
<path fill="#eadbe7" d="M275.89,598.93c-.14,8.73-4.08,17.07-10.75,22.71-17.97,15.22-39.95,7.43-40.02,7.41,35.58,14.4,112.39,42.14,123.68,18.29s-58.86-65.66-92.56-84.05c.06.03,20.02,12.1,19.64,35.64Z"/>
<path fill="#e90464" d="M207.1,621.43s7.06,3.17,18.03,7.62c.06.02,27.21,10.11,46.39-6.3,5.72-4.9,9.11-12.06,9.27-19.59.53-25.24-24.48-39.84-24.54-39.87,0,0,0,0,0,0-3.09-8.41-11.93-28.53-25.61-27.63-4.87.32-7.64,4.06-9.1,9.27-1.25-.59-2.48-1.16-3.7-1.7-44.97-19.97-76.54,46.74-32.58,68.85,6.37,3.21,13.62,6.35,21.84,9.36Z"/>
<path fill="url(#roadmap-angie-linear-gradient-2)" d="M535.8,901.65c1.08,6.84-4.59,15.34-11.43,16.42h-40.49s-30.29-50.3-59.28-147.99h0c15.65-30.5,54.58-24.06,82.76-4.54h0c4.67,3.23,7.81,8.23,8.69,13.84l19.74,122.27Z"/>
<path fill="#e90464" d="M448.18,862.35h62.09c7.78,0,14.1,6.32,14.1,14.1v1.57c0,22.1-17.94,40.04-40.04,40.04h-2.7c-22.1,0-40.04-17.94-40.04-40.04v-9.08c0-3.64,2.95-6.59,6.59-6.59Z" transform="translate(965.96 1780.42) rotate(-180)"/>
<path fill="url(#roadmap-angie-linear-gradient-3)" d="M600.79,183.72c-5.34-.28-10.76,1.06-15.48,4.08l-306.29,194.88c-14.96,9.58-22.2,27.48-18.09,44.68l68.9,264.5c3.66,14.39,13.06,26.7,26.04,34.08l189.38,110.11c6.41,3.59,13.49,5.59,20.64,5.97l34.89-658.3Z"/>
<path fill="url(#roadmap-angie-linear-gradient-4)" d="M565.9,842.02c7.16.38,14.4-.86,21.16-3.75l199.96-89.48c13.69-5.97,24.33-17.21,29.49-31.14l96.48-255.73c5.91-16.67.59-35.23-13.27-46.34l-283.97-226.17c-4.37-3.5-9.62-5.41-14.96-5.7l-34.89,658.3Z"/>
<path fill="#940054" d="M395.42,691.98c6.04-2.57,15.36-6.47,24.7-10.36-5.22-3.17-9.01-8.28-10.47-14.27l-36.91-151.58c-5.12-21.04,15.51-38.93,35.44-31.32l-19.48-8.36c-22.69-9.74-46.75,10.61-40.91,34.6l41.33,169.74c1.07,4.39,3.28,8.34,6.29,11.55Z"/>
<path fill="#aa0060" d="M420.12,681.62c-9.34,3.89-18.66,7.79-24.7,10.36,2.16,2.3,4.72,4.24,7.63,5.64l166.27,79.93,1.24-23.47-148.48-71.38c-.68-.33-1.33-.7-1.96-1.08Z"/>
<path fill="url(#roadmap-angie-radial-gradient)" d="M759.4,503.43l-178.48,55.15-171.65-73.71c-20.26-8.7-41.75,9.48-36.53,30.9l36.91,151.58c1.64,6.72,6.2,12.35,12.43,15.35l148.48,71.38,155.19-55.28c6.52-2.32,11.65-7.44,13.99-13.95l52.73-146.83c7.45-20.75-12-41.1-33.06-34.59Z"/>
<path fill="#940054" d="M751.28,710.84c-5.74-3.19-14.59-8.06-23.47-12.92,5.52-2.6,9.84-7.28,11.92-13.08l52.73-146.83c7.32-20.38-11.31-40.35-31.93-34.89l20.25-6.26c23.59-7.29,45.37,15.49,37.02,38.73l-59.04,164.42c-1.53,4.25-4.14,7.94-7.48,10.82Z"/>
<path fill="#aa0060" d="M727.82,697.93c8.87,4.86,17.73,9.72,23.47,12.92-2.39,2.06-5.14,3.71-8.18,4.8l-173.79,61.91,1.24-23.47,155.19-55.28c.71-.25,1.39-.55,2.07-.87Z"/>
<ellipse fill="#0f0f11" cx="654.77" cy="636.12" rx="29.25" ry="18.11" transform="translate(-15.11 1256.29) rotate(-86.97)"/>
<rect fill="#c8005d" x="640.79" y="561.9" width="42.54" height="26.4" rx="13.2" ry="13.2" transform="translate(222.87 -183.96) rotate(18.97)"/>
<ellipse fill="#0f0f11" cx="499.3" cy="627.88" rx="29.25" ry="18.11" transform="translate(-154.12 1093.24) rotate(-86.97)"/>
<rect fill="#c8005d" x="477.22" y="553.23" width="42.54" height="26.4" rx="13.2" ry="13.2" transform="translate(1110.86 1007.29) rotate(167.1)"/>
<path fill="#e90464" d="M871.07,739.92s6.6-4.04,16.45-10.61c.05-.04,23.68-16.79,20.92-41.88-.82-7.48-4.83-14.32-10.96-18.69-20.56-14.66-46.71-2.21-46.77-2.18,0,0,0,0,0,0-8.68-2.18-30.29-6.21-37.26,5.6-2.48,4.2-.95,8.6,2.53,12.74-1.19.7-2.36,1.4-3.49,2.1-41.83,25.91-4.49,89.57,38.54,65.7,6.24-3.46,12.91-7.68,20.04-12.78Z"/>
<path fill="#e90464" d="M554.78,688.49c5.18,4.58,11.89,7.51,19.33,7.9,7.44.39,14.42-1.81,20.06-5.82-.4-8.93-8.52-16.35-18.86-16.9-10.34-.55-19.19,5.97-20.54,14.81Z"/>
<path fill="#940054" d="M544.08,663c-.53,10.07,3.69,19.29,10.7,25.49,1.35-8.83,10.2-15.36,20.54-14.81,10.34.55,18.45,7.97,18.86,16.9,7.63-5.42,12.8-14.15,13.33-24.22l-63.42-3.36Z"/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 9.4 KiB