| 1 |
<svg width="1600" height="900" viewBox="0 0 1600 900" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Getting Started with bBlocks — video"> |
| 2 |
<defs> |
| 3 |
<linearGradient id="bg" x1="0" y1="0" x2="1600" y2="900" gradientUnits="userSpaceOnUse"> |
| 4 |
<stop offset="0" stop-color="#271559"/><stop offset="0.5" stop-color="#3f22c4"/><stop offset="1" stop-color="#160a39"/> |
| 5 |
</linearGradient> |
| 6 |
<radialGradient id="glowA" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1300 110) rotate(90) scale(560)"> |
| 7 |
<stop stop-color="#b9a7ff" stop-opacity="0.45"/><stop offset="1" stop-color="#b9a7ff" stop-opacity="0"/> |
| 8 |
</radialGradient> |
| 9 |
<radialGradient id="glowB" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(150 840) rotate(90) scale(520)"> |
| 10 |
<stop stop-color="#3aa0ff" stop-opacity="0.34"/><stop offset="1" stop-color="#3aa0ff" stop-opacity="0"/> |
| 11 |
</radialGradient> |
| 12 |
<radialGradient id="vignette" cx="0.5" cy="0.45" r="0.78"> |
| 13 |
<stop offset="0.5" stop-color="#0a0620" stop-opacity="0"/><stop offset="1" stop-color="#0a0620" stop-opacity="0.5"/> |
| 14 |
</radialGradient> |
| 15 |
<radialGradient id="playGlow" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(800 450) scale(150)"> |
| 16 |
<stop stop-color="#ffffff" stop-opacity="0.22"/><stop offset="1" stop-color="#ffffff" stop-opacity="0"/> |
| 17 |
</radialGradient> |
| 18 |
<filter id="logoShadow" x="-20%" y="-20%" width="140%" height="160%"> |
| 19 |
<feDropShadow dx="0" dy="5" stdDeviation="9" flood-color="#0a0433" flood-opacity="0.34"/> |
| 20 |
</filter> |
| 21 |
</defs> |
| 22 |
|
| 23 |
<!-- Background --> |
| 24 |
<rect width="1600" height="900" fill="url(#bg)"/> |
| 25 |
<rect width="1600" height="900" fill="url(#glowA)"/> |
| 26 |
<rect width="1600" height="900" fill="url(#glowB)"/> |
| 27 |
|
| 28 |
<!-- Faint block-editor UI mock (this is a tutorial about the editor) --> |
| 29 |
<g opacity="0.85"> |
| 30 |
<rect x="934" y="150" width="548" height="522" rx="20" fill="#ffffff" fill-opacity="0.06" stroke="#ffffff" stroke-opacity="0.14" stroke-width="2"/> |
| 31 |
<!-- title bar --> |
| 32 |
<circle cx="968" cy="184" r="6" fill="#ffffff" fill-opacity="0.30"/> |
| 33 |
<circle cx="990" cy="184" r="6" fill="#ffffff" fill-opacity="0.22"/> |
| 34 |
<circle cx="1012" cy="184" r="6" fill="#ffffff" fill-opacity="0.16"/> |
| 35 |
<rect x="1052" y="176" width="396" height="17" rx="8.5" fill="#ffffff" fill-opacity="0.10"/> |
| 36 |
<line x1="934" y1="212" x2="1482" y2="212" stroke="#ffffff" stroke-opacity="0.12" stroke-width="2"/> |
| 37 |
<!-- inserter rail --> |
| 38 |
<rect x="934" y="214" width="70" height="458" fill="#ffffff" fill-opacity="0.05"/> |
| 39 |
<rect x="957" y="244" width="24" height="24" rx="6" fill="#ffffff" fill-opacity="0.16"/> |
| 40 |
<line x1="969" y1="250" x2="969" y2="262" stroke="#ffffff" stroke-opacity="0.55" stroke-width="3" stroke-linecap="round"/> |
| 41 |
<line x1="963" y1="256" x2="975" y2="256" stroke="#ffffff" stroke-opacity="0.55" stroke-width="3" stroke-linecap="round"/> |
| 42 |
<rect x="957" y="292" width="24" height="24" rx="6" fill="#ffffff" fill-opacity="0.10"/> |
| 43 |
<rect x="957" y="332" width="24" height="24" rx="6" fill="#ffffff" fill-opacity="0.10"/> |
| 44 |
<!-- canvas content --> |
| 45 |
<rect x="1036" y="246" width="286" height="30" rx="7" fill="#ffffff" fill-opacity="0.22"/> |
| 46 |
<rect x="1036" y="296" width="402" height="12" rx="6" fill="#ffffff" fill-opacity="0.12"/> |
| 47 |
<rect x="1036" y="320" width="372" height="12" rx="6" fill="#ffffff" fill-opacity="0.12"/> |
| 48 |
<rect x="1036" y="344" width="250" height="12" rx="6" fill="#ffffff" fill-opacity="0.12"/> |
| 49 |
<!-- image placeholder --> |
| 50 |
<rect x="1036" y="392" width="200" height="130" rx="10" fill="#ffffff" fill-opacity="0.10"/> |
| 51 |
<circle cx="1078" cy="430" r="13" fill="#ffffff" fill-opacity="0.5"/> |
| 52 |
<path d="M1056 502 L1100 458 L1132 490 L1160 466 L1216 502 Z" fill="#ffffff" fill-opacity="0.42"/> |
| 53 |
<!-- two-column block --> |
| 54 |
<rect x="1256" y="392" width="182" height="62" rx="10" fill="#ffffff" fill-opacity="0.09"/> |
| 55 |
<rect x="1256" y="462" width="182" height="60" rx="10" fill="#ffffff" fill-opacity="0.07"/> |
| 56 |
<rect x="1036" y="556" width="402" height="12" rx="6" fill="#ffffff" fill-opacity="0.10"/> |
| 57 |
<rect x="1036" y="580" width="318" height="12" rx="6" fill="#ffffff" fill-opacity="0.10"/> |
| 58 |
</g> |
| 59 |
|
| 60 |
<!-- Vignette to lift the play button + text --> |
| 61 |
<rect width="1600" height="900" fill="url(#vignette)"/> |
| 62 |
|
| 63 |
<!-- Play affordance behind the (overlaid) white play button at center --> |
| 64 |
<circle cx="800" cy="450" r="150" fill="url(#playGlow)"/> |
| 65 |
<circle cx="800" cy="450" r="60" fill="#ffffff" fill-opacity="0.10" stroke="#ffffff" stroke-opacity="0.5" stroke-width="3"/> |
| 66 |
|
| 67 |
<!-- Brand: logo in a white pill --> |
| 68 |
<rect x="100" y="70" width="272" height="78" rx="39" fill="#ffffff" filter="url(#logoShadow)"/> |
| 69 |
<svg x="129" y="88" width="214" height="42.8" viewBox="0 0 200 40"> |
| 70 |
<path d="M37.4506 10.2852C37.4429 13.1251 36.1918 15.7041 34.2269 17.5539C32.3003 19.3883 29.683 20.5166 26.8891 20.5166H25.6687C22.5909 20.5166 20.0963 23.0111 20.0963 26.089V35.2689H12.9735C12.1139 35.2689 11.4231 34.5704 11.4231 33.7184V22.259C11.4231 21.5605 11.0393 20.8774 10.3869 20.6241C9.72678 20.3631 9.04367 20.555 8.61384 20.9695C8.59849 20.9925 8.58314 21.0002 8.56779 21.0155C7.66208 21.9903 6.38028 22.5967 4.95264 22.5967C2.02061 22.5967 -0.305059 20.0561 0.032662 17.0703C0.293628 14.7677 2.20482 12.9256 4.50746 12.7183C6.11931 12.5802 7.593 13.2096 8.59081 14.2918C8.97458 14.6679 9.55025 14.8675 10.1489 14.7293C10.9165 14.5528 11.4307 13.8236 11.4307 13.033V1.55821C11.4307 0.698559 12.1292 0.00776578 12.9812 0.00776578H18.024C18.9066 0.00776578 19.7126 0.652504 19.7816 1.53518C19.82 2.04944 19.6358 2.51764 19.3058 2.84769C18.3233 3.75339 17.7093 5.04287 17.7093 6.47819C17.7093 9.21833 19.9275 11.4289 22.66 11.4289C25.4001 11.4289 27.6106 9.21833 27.6106 6.47819C27.6106 5.04287 27.0043 3.76107 26.0295 2.86304C26.0141 2.84769 26.0065 2.83234 25.9834 2.81699C25.6073 2.42554 25.4231 1.8422 25.5843 1.24352C25.7762 0.483645 26.5284 -0.0075868 27.3113 8.86678e-05C30.0975 0.038466 32.615 1.17444 34.4418 3.0012C36.3069 4.87401 37.4583 7.43762 37.4506 10.2852Z" fill="#146EF5" /> |
| 71 |
<path d="M37.4507 25.0145C37.4507 30.679 32.8607 35.2689 27.1962 35.2689H20.0964V26.0891C20.0964 23.0112 22.591 20.5167 25.6688 20.5167H26.8892C29.6831 20.5167 32.3004 19.3884 34.227 17.554C34.2961 17.623 34.3728 17.6921 34.4419 17.7689C36.2994 19.6187 37.4507 22.1823 37.4507 25.0145Z" fill="#FF7A00" /> |
| 72 |
|
| 73 |
<path d="M62.3039 10.5922C58.5352 10.5922 57.1997 12.9563 57.1997 12.9563H56.7391V4.07574C56.7391 3.61521 56.4705 3.35425 56.0176 3.35425H52.2874C51.8268 3.35425 51.6042 3.62289 51.6042 4.07574V30.8171C51.6042 31.2776 51.8345 31.5386 52.2874 31.5386H56.0176C56.4782 31.5386 56.7391 31.2699 56.7391 30.8171V29.4816H57.1997C57.1997 29.4816 58.5352 31.8456 62.3039 31.8456C67.5999 31.8456 70.7238 27.2019 70.7238 21.2151C70.7238 15.2282 67.5923 10.5922 62.3039 10.5922ZM60.9299 27.5397C57.9595 27.5397 56.4705 24.9146 56.4705 21.2151C56.4705 17.5232 57.9595 14.8905 60.9299 14.8905C63.9387 14.8905 65.351 17.5155 65.351 21.2151C65.351 24.9146 63.9387 27.5397 60.9299 27.5397Z" fill="#101828" /> |
| 74 |
<path d="M73.7786 4.45953C73.7786 4.0604 74.1009 3.73804 74.5001 3.73804H83.5494C86.3203 3.73804 88.5769 4.60536 90.3039 6.34002C92.0308 8.07468 92.8982 10.3389 92.8982 13.1405C92.8982 15.8883 92.0078 18.1219 90.2271 19.8488C88.4464 21.5682 86.1514 22.4278 83.3422 22.4278H78.7523V30.8171C78.7523 31.2162 78.4299 31.5386 78.0308 31.5386H74.5077C74.1086 31.5386 73.7862 31.2162 73.7862 30.8171V4.45953H73.7786ZM78.7523 7.89814V18.2984H82.2293C84.0176 18.2984 85.3992 17.8456 86.3817 16.9475C87.3641 16.0495 87.8554 14.7754 87.8554 13.1328C87.8554 11.4365 87.3718 10.1394 86.397 9.24135C85.4299 8.34332 84.0407 7.89046 82.2446 7.89046H78.7523V7.89814Z" fill="#101828" /> |
| 75 |
<path d="M104.603 31.5386C105.056 31.5386 105.325 31.2699 105.325 30.8171V27.7699C105.325 27.3094 105.056 27.0868 104.603 27.0868H102.431C101.594 27.0868 101.096 26.5879 101.096 25.7513V4.07574C101.096 3.61521 100.827 3.35425 100.374 3.35425H96.6438C96.1833 3.35425 95.9607 3.62289 95.9607 4.07574V26.1274C95.9607 29.6351 97.8258 31.5386 101.334 31.5386H104.603Z" fill="#101828" /> |
| 76 |
<path d="M120.415 10.9758C119.954 10.9758 119.693 11.2445 119.693 11.6973V24.0011C119.693 26.4803 118.058 27.6163 116.224 27.6163C114.397 27.6163 112.793 26.4726 112.793 24.0011V11.6973C112.793 11.2368 112.524 10.9758 112.071 10.9758H108.341C107.881 10.9758 107.658 11.2445 107.658 11.6973V24.6075C107.658 29.1744 110.283 31.9222 114.213 31.9222C118.097 31.9222 119.24 29.2204 119.24 29.2204H119.701V30.8169C119.701 31.2774 119.969 31.5384 120.422 31.5384H124.153C124.613 31.5384 124.874 31.2698 124.874 30.8169V11.6973C124.874 11.2368 124.605 10.9758 124.153 10.9758H120.415Z" fill="#101828" /> |
| 77 |
<path d="M147.072 27.2868C147.064 26.8032 147.056 26.3197 147.056 25.8515C147.056 21.8679 147.056 17.892 147.056 13.9084C147.056 13.1486 147.056 12.3887 147.056 11.6288C147.056 11.176 146.834 10.8997 146.366 10.8997H142.635C142.183 10.8997 141.906 11.176 141.906 11.6288V12.9567H141.453C141.453 12.9567 140.126 10.585 136.349 10.585C131.053 10.585 127.929 15.2363 127.929 21.2155C127.929 27.1947 131.061 30.925 136.349 30.9096C140.003 30.8943 141.453 28.5379 141.453 28.5379H141.891C141.906 28.5993 141.906 28.653 141.906 28.7298V30.38C141.829 32.3372 141.668 34.5324 139.619 35.4151C139.281 35.5609 138.897 35.6837 138.529 35.7145C135.06 36.1059 133.594 34.1103 133.064 33.0664C132.895 32.7287 132.488 32.5982 132.143 32.744L129.226 34.0028C128.85 34.164 128.681 34.6092 128.858 34.9776C129.487 36.2901 131.276 39.0686 135.413 39.8132C138.306 40.3351 141.653 39.7671 143.833 38.0938C146.32 36.1827 146.934 33.3197 147.049 30.4491C147.103 29.3899 147.087 28.3383 147.072 27.2868ZM137.731 26.596C135.643 26.596 134.077 25.5598 133.555 23.4798C132.765 20.3175 133.54 14.8986 137.731 14.8986C140.701 14.8986 142.19 17.5313 142.19 21.2155C142.19 24.9151 140.694 26.596 137.731 26.596Z" fill="#101828" /> |
| 78 |
<path d="M154.763 2.21094C152.859 2.21094 151.447 3.58484 151.447 5.44998C151.447 7.3535 152.859 8.72741 154.763 8.72741C156.666 8.72741 158.078 7.3535 158.078 5.44998C158.071 3.58484 156.666 2.21094 154.763 2.21094Z" fill="#101828" /> |
| 79 |
<path d="M156.628 10.9766H152.897C152.437 10.9766 152.176 11.2452 152.176 11.6981V30.8177C152.176 31.2782 152.444 31.5392 152.897 31.5392H156.628C157.088 31.5392 157.349 31.2705 157.349 30.8177V11.6981C157.349 11.2375 157.08 10.9766 156.628 10.9766Z" fill="#101828" /> |
| 80 |
<path d="M173.13 10.5928C169.246 10.5928 168.103 13.2945 168.103 13.2945H167.642V11.698C167.642 11.2375 167.373 10.9765 166.921 10.9765H163.19C162.73 10.9765 162.469 11.2452 162.469 11.698V30.8176C162.469 31.2782 162.737 31.5391 163.19 31.5391H166.921C167.381 31.5391 167.642 31.2705 167.642 30.8176V18.5139C167.642 16.0347 169.277 14.8987 171.111 14.8987C172.938 14.8987 174.542 16.0424 174.542 18.5139V30.8176C174.542 31.2782 174.811 31.5391 175.264 31.5391H178.994C179.455 31.5391 179.677 31.2705 179.677 30.8176V17.9075C179.677 13.3329 177.052 10.5928 173.13 10.5928Z" fill="#101828" /> |
| 81 |
<path d="M199.418 24.0474C199.019 21.7141 197.4 20.4476 195.335 19.7799C194.237 19.4268 193.109 19.1812 191.981 18.9509C190.776 18.6976 188.665 18.6976 188.082 17.3621C187.568 16.1877 188.581 15.1132 189.648 14.8138C191.751 14.2305 193.409 14.8906 194.475 16.7941C194.759 17.293 195.089 17.4695 195.611 17.2853C196.571 16.9399 197.369 16.6022 198.329 16.2491C198.92 16.0342 199.096 15.6274 198.789 15.0825C198.421 14.4224 198.098 13.7086 197.599 13.1559C194.775 10.0013 188.466 9.73267 185.111 12.5112C182.563 14.6296 181.857 20.0408 186.27 22.0288C187.115 22.4049 187.936 22.5047 188.842 22.7196C190.208 23.0496 191.597 23.2492 192.963 23.5715C193.739 23.7558 194.591 24.224 194.66 25.2218C194.721 26.1044 194.276 26.8336 193.232 27.202C191.336 27.8852 188.182 27.7317 187.069 25.2064C186.792 24.5924 186.409 24.4619 185.81 24.6922C184.935 25.0222 184.052 25.3523 183.162 25.6209C182.448 25.8358 182.525 26.1966 182.732 26.8413C183.607 29.5124 186.255 31.1319 188.888 31.6692C188.918 31.6768 188.957 31.6845 188.987 31.6922C189.057 31.7075 189.126 31.7152 189.195 31.7306C190.584 31.9685 191.866 32.0146 193.247 31.7306C194.115 31.554 194.959 31.2777 195.75 30.8863C195.949 30.7865 196.133 30.6714 196.325 30.5716C198.712 29.3281 199.887 26.7645 199.418 24.0474Z" fill="#101828" /> |
| 82 |
</svg> |
| 83 |
|
| 84 |
<!-- Title block (lower-left, clear of the centered play button) --> |
| 85 |
<g font-family="-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif"> |
| 86 |
<rect x="100" y="586" width="246" height="40" rx="20" fill="#ffffff" fill-opacity="0.14"/> |
| 87 |
<circle cx="124" cy="606" r="6" fill="#7cf0c0"/> |
| 88 |
<text x="142" y="613" font-size="20" font-weight="700" fill="#ffffff" letter-spacing="3">GETTING STARTED</text> |
| 89 |
|
| 90 |
<text x="98" y="700" font-size="78" font-weight="800" fill="#ffffff" letter-spacing="-1">Build your first page</text> |
| 91 |
<text x="100" y="752" font-size="31" font-weight="500" fill="#ffffff" opacity="0.9">Blocks, patterns & the block editor — explained.</text> |
| 92 |
</g> |
| 93 |
</svg> |
| 94 |
|
