Skip to content

Instantly share code, notes, and snippets.

@rikukissa
Last active July 21, 2019 20:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rikukissa/8d10a3b10f639d1c5fa60324a0faf12b to your computer and use it in GitHub Desktop.
Save rikukissa/8d10a3b10f639d1c5fa60324a0faf12b to your computer and use it in GitHub Desktop.
No Code UI
Display the source blob
Display the rendered blob
Raw
<svg width="171" height="354" viewBox="0 0 171 354" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="171" height="354" rx="13" fill="#EBE3FC"/>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="171" height="354">
<rect width="171" height="354" rx="13" fill="#EBE3FC"/>
</mask>
<g mask="url(#mask0)">
<rect x="84.5" y="29.5" width="64" height="103" rx="11.5" fill="white" stroke="#E5DAFB" stroke-width="3"/>
<rect x="95" y="108" width="43" height="13.6662" rx="4.75345" fill="#CBB7F7"/>
<path d="M103.144 118.054C102.747 118.054 102.39 117.99 102.076 117.861C101.761 117.732 101.508 117.541 101.317 117.288C101.131 117.035 101.033 116.731 101.023 116.375L102.432 116.375C102.452 116.576 102.522 116.731 102.641 116.839C102.759 116.942 102.914 116.994 103.105 116.994C103.301 116.994 103.456 116.95 103.57 116.862C103.683 116.769 103.74 116.643 103.74 116.483C103.74 116.349 103.693 116.238 103.601 116.15C103.513 116.062 103.402 115.99 103.268 115.933C103.139 115.877 102.953 115.812 102.71 115.74C102.36 115.632 102.073 115.523 101.851 115.415C101.629 115.306 101.438 115.147 101.279 114.935C101.119 114.723 101.039 114.447 101.039 114.107C101.039 113.601 101.222 113.206 101.588 112.923C101.954 112.634 102.432 112.489 103.02 112.489C103.619 112.489 104.101 112.634 104.467 112.923C104.834 113.206 105.03 113.604 105.056 114.115L103.624 114.115C103.613 113.939 103.549 113.802 103.43 113.704C103.312 113.601 103.159 113.55 102.974 113.55C102.814 113.55 102.685 113.593 102.587 113.681C102.489 113.764 102.44 113.885 102.44 114.045C102.44 114.22 102.522 114.357 102.687 114.455C102.852 114.553 103.11 114.659 103.461 114.772C103.812 114.891 104.096 115.005 104.313 115.113C104.534 115.221 104.725 115.379 104.885 115.585C105.045 115.792 105.125 116.057 105.125 116.382C105.125 116.692 105.045 116.973 104.885 117.226C104.731 117.479 104.504 117.68 104.204 117.83C103.905 117.979 103.551 118.054 103.144 118.054ZM107.705 112.567L107.705 115.817C107.705 116.142 107.784 116.393 107.944 116.568C108.104 116.744 108.339 116.831 108.649 116.831C108.958 116.831 109.196 116.744 109.361 116.568C109.526 116.393 109.609 116.142 109.609 115.817L109.609 112.567L110.932 112.567L110.932 115.81C110.932 116.295 110.829 116.705 110.622 117.04C110.416 117.376 110.137 117.628 109.787 117.799C109.441 117.969 109.054 118.054 108.626 118.054C108.197 118.054 107.813 117.972 107.472 117.807C107.137 117.636 106.871 117.383 106.675 117.048C106.479 116.707 106.381 116.295 106.381 115.81L106.381 112.567L107.705 112.567ZM115.615 115.214C115.93 115.281 116.183 115.438 116.374 115.686C116.565 115.928 116.66 116.207 116.66 116.522C116.66 116.976 116.5 117.337 116.18 117.605C115.866 117.868 115.424 118 114.857 118L112.326 118L112.326 112.567L114.772 112.567C115.324 112.567 115.755 112.693 116.064 112.946C116.379 113.199 116.536 113.542 116.536 113.975C116.536 114.295 116.451 114.561 116.281 114.772C116.116 114.984 115.894 115.131 115.615 115.214ZM113.649 114.765L114.516 114.765C114.733 114.765 114.898 114.718 115.012 114.625C115.13 114.527 115.19 114.385 115.19 114.2C115.19 114.014 115.13 113.872 115.012 113.774C114.898 113.676 114.733 113.627 114.516 113.627L113.649 113.627L113.649 114.765ZM114.625 116.932C114.847 116.932 115.017 116.883 115.136 116.785C115.259 116.682 115.321 116.535 115.321 116.344C115.321 116.153 115.257 116.003 115.128 115.895C115.004 115.786 114.831 115.732 114.609 115.732L113.649 115.732L113.649 116.932L114.625 116.932ZM124.046 112.567L124.046 118L122.722 118L122.722 114.741L121.507 118L120.439 118L119.216 114.734L119.216 118L117.892 118L117.892 112.567L119.456 112.567L120.981 116.328L122.49 112.567L124.046 112.567ZM126.785 112.567L126.785 118L125.462 118L125.462 112.567L126.785 112.567ZM132.118 112.567L132.118 113.627L130.678 113.627L130.678 118L129.354 118L129.354 113.627L127.915 113.627L127.915 112.567L132.118 112.567Z" fill="white"/>
<rect x="84.5" y="-94.5" width="64" height="103" rx="11.5" fill="white" stroke="#E5DAFB" stroke-width="3"/>
<rect x="84.5" y="154.5" width="64" height="103" rx="11.5" fill="white" stroke="#E5DAFB" stroke-width="3"/>
<rect x="95" y="235" width="43" height="13.6662" rx="4.75345" fill="#CBB7F7"/>
<path d="M103.144 245.054C102.747 245.054 102.39 244.99 102.076 244.861C101.761 244.732 101.508 244.541 101.317 244.288C101.131 244.035 101.033 243.731 101.023 243.375L102.432 243.375C102.452 243.576 102.522 243.731 102.641 243.839C102.759 243.942 102.914 243.994 103.105 243.994C103.301 243.994 103.456 243.95 103.57 243.862C103.683 243.769 103.74 243.643 103.74 243.483C103.74 243.349 103.693 243.238 103.601 243.15C103.513 243.062 103.402 242.99 103.268 242.933C103.139 242.877 102.953 242.812 102.71 242.74C102.36 242.632 102.073 242.523 101.851 242.415C101.629 242.306 101.438 242.147 101.279 241.935C101.119 241.723 101.039 241.447 101.039 241.107C101.039 240.601 101.222 240.206 101.588 239.923C101.954 239.634 102.432 239.489 103.02 239.489C103.619 239.489 104.101 239.634 104.467 239.923C104.834 240.206 105.03 240.604 105.056 241.115L103.624 241.115C103.613 240.939 103.549 240.802 103.43 240.704C103.312 240.601 103.159 240.55 102.974 240.55C102.814 240.55 102.685 240.593 102.587 240.681C102.489 240.764 102.44 240.885 102.44 241.045C102.44 241.22 102.522 241.357 102.687 241.455C102.852 241.553 103.11 241.659 103.461 241.772C103.812 241.891 104.096 242.005 104.313 242.113C104.534 242.221 104.725 242.379 104.885 242.585C105.045 242.792 105.125 243.057 105.125 243.382C105.125 243.692 105.045 243.973 104.885 244.226C104.731 244.479 104.504 244.68 104.204 244.83C103.905 244.979 103.551 245.054 103.144 245.054ZM107.705 239.567L107.705 242.817C107.705 243.142 107.784 243.393 107.944 243.568C108.104 243.744 108.339 243.831 108.649 243.831C108.958 243.831 109.196 243.744 109.361 243.568C109.526 243.393 109.609 243.142 109.609 242.817L109.609 239.567L110.932 239.567L110.932 242.81C110.932 243.295 110.829 243.705 110.622 244.04C110.416 244.376 110.137 244.628 109.787 244.799C109.441 244.969 109.054 245.054 108.626 245.054C108.197 245.054 107.813 244.972 107.472 244.807C107.137 244.636 106.871 244.383 106.675 244.048C106.479 243.707 106.381 243.295 106.381 242.81L106.381 239.567L107.705 239.567ZM115.615 242.214C115.93 242.281 116.183 242.438 116.374 242.686C116.565 242.928 116.66 243.207 116.66 243.522C116.66 243.976 116.5 244.337 116.18 244.605C115.866 244.868 115.424 245 114.857 245L112.326 245L112.326 239.567L114.772 239.567C115.324 239.567 115.755 239.693 116.064 239.946C116.379 240.199 116.536 240.542 116.536 240.975C116.536 241.295 116.451 241.561 116.281 241.772C116.116 241.984 115.894 242.131 115.615 242.214ZM113.649 241.765L114.516 241.765C114.733 241.765 114.898 241.718 115.012 241.625C115.13 241.527 115.19 241.385 115.19 241.2C115.19 241.014 115.13 240.872 115.012 240.774C114.898 240.676 114.733 240.627 114.516 240.627L113.649 240.627L113.649 241.765ZM114.625 243.932C114.847 243.932 115.017 243.883 115.136 243.785C115.259 243.682 115.321 243.535 115.321 243.344C115.321 243.153 115.257 243.003 115.128 242.895C115.004 242.786 114.831 242.732 114.609 242.732L113.649 242.732L113.649 243.932L114.625 243.932ZM124.046 239.567L124.046 245L122.722 245L122.722 241.741L121.507 245L120.439 245L119.216 241.734L119.216 245L117.892 245L117.892 239.567L119.456 239.567L120.981 243.328L122.49 239.567L124.046 239.567ZM126.785 239.567L126.785 245L125.462 245L125.462 239.567L126.785 239.567ZM132.118 239.567L132.118 240.627L130.678 240.627L130.678 245L129.354 245L129.354 240.627L127.915 240.627L127.915 239.567L132.118 239.567Z" fill="white"/>
<rect x="95" y="218" width="42" height="12" rx="4" fill="white" fill-opacity="0.58" stroke="#E5DAFB" stroke-width="2"/>
<rect x="95" y="218" width="42" height="12" rx="4" fill="white" fill-opacity="0.58" stroke="#E5DAFB" stroke-width="2"/>
<rect x="-25.6585" y="230.508" width="64" height="103" rx="11.5" transform="rotate(-6.42912 -25.6585 230.508)" fill="white" stroke="#E5DAFB" stroke-width="3"/>
<rect x="16.7626" y="265.178" width="9" height="2" transform="rotate(-9.62097 16.7626 265.178)" fill="#E5DAFB"/>
<rect x="-1.97021" y="268.354" width="19" height="2" transform="rotate(-9.62097 -1.97021 268.354)" fill="#CBB7F7"/>
<circle cx="14.9579" cy="266.499" r="2.5" transform="rotate(-9.62097 14.9579 266.499)" fill="white" stroke="#CBB7F7"/>
<rect x="16.4827" y="278.57" width="9" height="2" transform="rotate(-17.1554 16.4827 278.57)" fill="#E5DAFB"/>
<rect x="-1.672" y="284.174" width="19" height="2" transform="rotate(-17.1554 -1.672 284.174)" fill="#CBB7F7"/>
<circle cx="14.8665" cy="280.115" r="2.5" transform="rotate(-17.1554 14.8665 280.115)" fill="white" stroke="#CBB7F7"/>
<rect x="-6.21069" y="309.326" width="43" height="13.6662" rx="4.75345" transform="rotate(-6.42912 -6.21069 309.326)" fill="#CBB7F7"/>
<path d="M1.77592 318.544C1.3811 318.588 1.02008 318.564 0.692853 318.471C0.365628 318.378 0.0929997 318.217 -0.125031 317.987C-0.337934 317.756 -0.469447 317.465 -0.519569 317.112L0.880252 316.954C0.923296 317.152 1.00985 317.298 1.13992 317.392C1.26941 317.482 1.42901 317.516 1.61873 317.494C1.81358 317.472 1.96249 317.411 2.06548 317.312C2.16788 317.207 2.21013 317.075 2.19222 316.916C2.1772 316.782 2.11863 316.677 2.01651 316.6C1.91952 316.523 1.80119 316.464 1.66151 316.422C1.52697 316.38 1.33516 316.337 1.08607 316.292C0.725265 316.224 0.428553 316.148 0.195934 316.066C-0.0366837 315.983 -0.244314 315.845 -0.426958 315.653C-0.609601 315.461 -0.719989 315.195 -0.758123 314.857C-0.814746 314.354 -0.676918 313.942 -0.344641 313.619C-0.0129405 313.29 0.44518 313.093 1.02972 313.027C1.62452 312.96 2.12012 313.05 2.51653 313.296C2.91237 313.537 3.1517 313.91 3.23454 314.415L1.81165 314.575C1.78175 314.402 1.70234 314.273 1.57343 314.189C1.44394 314.1 1.2869 314.066 1.10231 314.086C0.943353 314.104 0.820076 314.162 0.732475 314.26C0.644296 314.353 0.609162 314.479 0.627073 314.638C0.646718 314.813 0.74407 314.939 0.919129 315.018C1.09419 315.097 1.36241 315.173 1.7238 315.247C2.08576 315.326 2.38048 315.407 2.60798 315.49C2.84059 315.573 3.04794 315.708 3.23 315.895C3.41207 316.082 3.5213 316.337 3.5577 316.66C3.59237 316.968 3.54438 317.257 3.41374 317.526C3.28822 317.794 3.08514 318.02 2.8045 318.202C2.52386 318.384 2.181 318.498 1.77592 318.544ZM5.69344 312.58L6.05745 315.81C6.09385 316.133 6.20135 316.373 6.37994 316.529C6.55854 316.686 6.80167 316.747 7.10932 316.712C7.41698 316.677 7.64302 316.564 7.78746 316.371C7.93189 316.178 7.98591 315.92 7.94951 315.597L7.58551 312.367L8.90072 312.218L9.26386 315.441C9.31817 315.923 9.26156 316.342 9.09401 316.699C8.92646 317.055 8.67789 317.338 8.34828 317.546C8.0238 317.754 7.64877 317.882 7.22318 317.93C6.7976 317.978 6.40635 317.939 6.04944 317.813C5.69708 317.681 5.4047 317.46 5.1723 317.148C4.93932 316.832 4.79567 316.433 4.74136 315.951L4.37822 312.728L5.69344 312.58ZM13.851 314.324C14.1713 314.356 14.4401 314.484 14.6576 314.709C14.8745 314.928 15.0005 315.195 15.0358 315.507C15.0866 315.959 14.9681 316.335 14.6802 316.638C14.3969 316.935 13.9733 317.115 13.4092 317.178L10.8942 317.462L10.2858 312.062L12.7162 311.788C13.2649 311.727 13.7072 311.804 14.0431 312.021C14.3842 312.237 14.579 312.56 14.6276 312.991C14.6634 313.309 14.6086 313.582 14.463 313.812C14.3226 314.04 14.1186 314.211 13.851 314.324ZM11.8471 314.098L12.7085 314.001C12.9239 313.977 13.0828 313.913 13.1852 313.808C13.2921 313.697 13.3352 313.549 13.3144 313.365C13.2936 313.18 13.2188 313.046 13.0899 312.961C12.9661 312.877 12.7965 312.847 12.5811 312.871L11.7197 312.968L11.8471 314.098ZM13.0589 316.143C13.2794 316.118 13.4431 316.05 13.5501 315.94C13.6616 315.823 13.7066 315.67 13.6852 315.48C13.6639 315.291 13.583 315.149 13.4427 315.056C13.3075 314.962 13.1297 314.928 12.9092 314.952L11.9554 315.06L12.0898 316.252L13.0589 316.143ZM18.3853 316.672C17.9905 316.717 17.6294 316.692 17.3022 316.599C16.975 316.506 16.7024 316.345 16.4843 316.115C16.2714 315.885 16.1399 315.593 16.0898 315.241L17.4896 315.083C17.5327 315.28 17.6192 315.426 17.7493 315.521C17.8788 315.61 18.0384 315.644 18.2281 315.623C18.4229 315.601 18.5718 315.54 18.6748 315.44C18.7772 315.335 18.8195 315.203 18.8016 315.044C18.7866 314.911 18.728 314.806 18.6259 314.729C18.5289 314.652 18.4105 314.592 18.2709 314.551C18.1363 314.509 17.9445 314.466 17.6954 314.421C17.3346 314.353 17.0379 314.277 16.8053 314.194C16.5727 314.111 16.365 313.974 16.1824 313.781C15.9998 313.589 15.8894 313.324 15.8512 312.985C15.7946 312.483 15.9324 312.07 16.2647 311.747C16.5964 311.419 17.0545 311.222 17.6391 311.156C18.2339 311.089 18.7295 311.178 19.1259 311.425C19.5217 311.666 19.7611 312.038 19.8439 312.543L18.421 312.703C18.3911 312.53 18.3117 312.402 18.1828 312.317C18.0533 312.228 17.8963 312.194 17.7117 312.215C17.5527 312.233 17.4294 312.291 17.3418 312.389C17.2537 312.482 17.2185 312.608 17.2364 312.767C17.2561 312.941 17.3534 313.068 17.5285 313.147C17.7035 313.226 17.9718 313.302 18.3332 313.375C18.6951 313.454 18.9898 313.535 19.2173 313.619C19.4499 313.701 19.6573 313.836 19.8394 314.024C20.0214 314.211 20.1307 314.466 20.1671 314.789C20.2017 315.097 20.1537 315.385 20.0231 315.654C19.8976 315.923 19.6945 316.148 19.4139 316.33C19.1332 316.513 18.7904 316.626 18.3853 316.672ZM27.1253 310.165L27.7337 315.564L26.4184 315.712L26.0536 312.474L25.2109 315.848L24.1495 315.968L22.5685 312.859L22.9343 316.105L21.6191 316.253L21.0107 310.854L22.5643 310.679L24.5007 314.246L25.5793 310.339L27.1253 310.165ZM32.4166 309.569L32.5354 310.622L31.1048 310.784L31.5945 315.129L30.2793 315.277L29.7896 310.932L28.359 311.093L28.2403 310.039L32.4166 309.569Z" fill="white"/>
<rect x="-16" y="245.815" width="43" height="13.6662" rx="4.75345" transform="rotate(-6.42912 -16 245.815)" fill="#CBB7F7"/>
<path d="M1.10586 253.951L-0.20936 254.099L-2.78435 251.016L-2.40908 254.347L-3.7243 254.495L-4.3327 249.096L-3.01749 248.947L-0.440763 252.045L-0.817768 248.7L0.497449 248.551L1.10586 253.951ZM3.34624 249.297L3.46931 250.39L5.23062 250.191L5.34503 251.206L3.58371 251.405L3.71718 252.589L5.70923 252.365L5.82797 253.419L2.5207 253.791L1.91229 248.392L5.21956 248.019L5.3383 249.073L3.34624 249.297ZM10.4506 252.898L9.16438 251.368L8.38161 253.131L6.88949 253.299L8.31064 250.358L6.24263 247.904L7.7732 247.732L9.04141 249.24L9.8114 247.502L11.3035 247.334L9.89516 250.25L11.9811 252.725L10.4506 252.898ZM16.3786 246.762L16.4973 247.816L15.0667 247.977L15.5564 252.322L14.2412 252.471L13.7515 248.125L12.3209 248.286L12.2022 247.232L16.3786 246.762Z" fill="white"/>
<rect x="-8.09203" y="281.257" width="46.428" height="12" rx="4" transform="rotate(17.7138 -8.09203 281.257)" fill="white" fill-opacity="0.58" stroke="#E5DAFB" stroke-width="2"/>
<rect x="-8.09203" y="281.257" width="46.428" height="12" rx="4" transform="rotate(17.7138 -8.09203 281.257)" fill="white" fill-opacity="0.58" stroke="#E5DAFB" stroke-width="2"/>
<rect x="84.5" y="274.5" width="64" height="103" rx="11.5" fill="white" stroke="#E5DAFB" stroke-width="3"/>
<rect x="161" y="354" width="151" height="15" transform="rotate(180 161 354)" fill="url(#paint0_linear)"/>
<rect x="10" width="151" height="15" fill="url(#paint1_linear)"/>
<rect x="18" y="57" width="50" height="15.8909" rx="5.52727" fill="#CBB7F7"/>
<path d="M27.4696 68.063C27.0076 68.063 26.5936 67.988 26.2276 67.838C25.8616 67.688 25.5676 67.466 25.3456 67.172C25.1296 66.878 25.0156 66.524 25.0036 66.11L26.6416 66.11C26.6656 66.344 26.7466 66.524 26.8846 66.65C27.0226 66.77 27.2026 66.83 27.4246 66.83C27.6526 66.83 27.8326 66.779 27.9646 66.677C28.0966 66.569 28.1626 66.422 28.1626 66.236C28.1626 66.08 28.1086 65.951 28.0006 65.849C27.8986 65.747 27.7696 65.663 27.6136 65.597C27.4636 65.531 27.2476 65.456 26.9656 65.372C26.5576 65.246 26.2246 65.12 25.9666 64.994C25.7086 64.868 25.4866 64.682 25.3006 64.436C25.1146 64.19 25.0216 63.869 25.0216 63.473C25.0216 62.885 25.2346 62.426 25.6606 62.096C26.0866 61.76 26.6416 61.592 27.3256 61.592C28.0216 61.592 28.5826 61.76 29.0086 62.096C29.4346 62.426 29.6626 62.888 29.6926 63.482L28.0276 63.482C28.0156 63.278 27.9406 63.119 27.8026 63.005C27.6646 62.885 27.4876 62.825 27.2716 62.825C27.0856 62.825 26.9356 62.876 26.8216 62.978C26.7076 63.074 26.6506 63.215 26.6506 63.401C26.6506 63.605 26.7466 63.764 26.9386 63.878C27.1306 63.992 27.4306 64.115 27.8386 64.247C28.2466 64.385 28.5766 64.517 28.8286 64.643C29.0866 64.769 29.3086 64.952 29.4946 65.192C29.6806 65.432 29.7736 65.741 29.7736 66.119C29.7736 66.479 29.6806 66.806 29.4946 67.1C29.3146 67.394 29.0506 67.628 28.7026 67.802C28.3546 67.976 27.9436 68.063 27.4696 68.063ZM32.7727 61.682L32.7727 65.462C32.7727 65.84 32.8657 66.131 33.0517 66.335C33.2377 66.539 33.5107 66.641 33.8707 66.641C34.2307 66.641 34.5067 66.539 34.6987 66.335C34.8907 66.131 34.9867 65.84 34.9867 65.462L34.9867 61.682L36.5257 61.682L36.5257 65.453C36.5257 66.017 36.4057 66.494 36.1657 66.884C35.9257 67.274 35.6017 67.568 35.1937 67.766C34.7917 67.964 34.3417 68.063 33.8437 68.063C33.3457 68.063 32.8987 67.967 32.5027 67.775C32.1127 67.577 31.8037 67.283 31.5757 66.893C31.3477 66.497 31.2337 66.017 31.2337 65.453L31.2337 61.682L32.7727 61.682ZM41.9714 64.76C42.3374 64.838 42.6314 65.021 42.8534 65.309C43.0754 65.591 43.1864 65.915 43.1864 66.281C43.1864 66.809 43.0004 67.229 42.6284 67.541C42.2624 67.847 41.7494 68 41.0894 68L38.1464 68L38.1464 61.682L40.9904 61.682C41.6324 61.682 42.1334 61.829 42.4934 62.123C42.8594 62.417 43.0424 62.816 43.0424 63.32C43.0424 63.692 42.9434 64.001 42.7454 64.247C42.5534 64.493 42.2954 64.664 41.9714 64.76ZM39.6854 64.238L40.6934 64.238C40.9454 64.238 41.1374 64.184 41.2694 64.076C41.4074 63.962 41.4764 63.797 41.4764 63.581C41.4764 63.365 41.4074 63.2 41.2694 63.086C41.1374 62.972 40.9454 62.915 40.6934 62.915L39.6854 62.915L39.6854 64.238ZM40.8194 66.758C41.0774 66.758 41.2754 66.701 41.4134 66.587C41.5574 66.467 41.6294 66.296 41.6294 66.074C41.6294 65.852 41.5544 65.678 41.4044 65.552C41.2604 65.426 41.0594 65.363 40.8014 65.363L39.6854 65.363L39.6854 66.758L40.8194 66.758ZM51.774 61.682L51.774 68L50.235 68L50.235 64.211L48.822 68L47.58 68L46.158 64.202L46.158 68L44.619 68L44.619 61.682L46.437 61.682L48.21 66.056L49.965 61.682L51.774 61.682ZM54.9597 61.682L54.9597 68L53.4207 68L53.4207 61.682L54.9597 61.682ZM61.16 61.682L61.16 62.915L59.486 62.915L59.486 68L57.947 68L57.947 62.915L56.273 62.915L56.273 61.682L61.16 61.682Z" fill="white"/>
<g filter="url(#filter0_d)">
<rect x="19.8608" y="74.7371" width="50" height="15.8909" rx="5.52727" transform="rotate(-12.8019 19.8608 74.7371)" fill="#CBB7F7"/>
</g>
<path d="M40.5394 81.3187L39.0386 81.6597L35.6651 78.4299L36.5286 82.2301L35.0279 82.5711L33.6279 76.4101L35.1287 76.0691L38.5062 79.3164L37.6387 75.4988L39.1394 75.1578L40.5394 81.3187ZM42.5278 75.6522L42.811 76.8985L44.8208 76.4418L45.084 77.6003L43.0742 78.0569L43.3813 79.4085L45.6544 78.892L45.9276 80.0943L42.1538 80.9519L40.7539 74.7909L44.5277 73.9334L44.8009 75.1357L42.5278 75.6522ZM51.2023 78.8958L49.5185 77.294L48.8415 79.4322L47.1389 79.8191L48.4016 76.2373L45.695 73.6681L47.4415 73.2713L49.1018 74.8507L49.7672 72.7428L51.4698 72.3559L50.2187 75.9074L52.9488 78.4989L51.2023 78.8958ZM57.2608 71.04L57.534 72.2424L55.9016 72.6133L57.0284 77.5719L55.5276 77.9129L54.4009 72.9543L52.7685 73.3253L52.4953 72.1229L57.2608 71.04Z" fill="white"/>
<g filter="url(#filter1_d)">
<rect x="14.2607" y="66.2644" width="50" height="15.8909" rx="5.52727" transform="rotate(16.4012 14.2607 66.2644)" fill="#CBB7F7"/>
</g>
<path d="M23.19 79.1209L25.124 79.6901L24.7885 80.8298L21.3782 79.826L23.1621 73.7651L24.6385 74.1996L23.19 79.1209ZM28.8594 82.0937C28.2895 81.9259 27.8047 81.6394 27.4049 81.234C27.0109 80.8303 26.7423 80.351 26.5992 79.796C26.4635 79.2369 26.4829 78.661 26.6574 78.0681C26.8319 77.4752 27.1268 76.9835 27.542 76.5928C27.9629 76.2039 28.4484 75.9465 28.9983 75.8206C29.5539 75.6965 30.1167 75.7182 30.6865 75.886C31.2564 76.0537 31.7383 76.3394 32.1323 76.7431C32.5321 77.1485 32.7978 77.627 32.9294 78.1786C33.0668 78.7319 33.0482 79.305 32.8737 79.8978C32.6992 80.4907 32.4035 80.9853 31.9866 81.3817C31.5714 81.7724 31.0889 82.0306 30.539 82.1565C29.9891 82.2823 29.4292 82.2614 28.8594 82.0937ZM29.2558 80.7468C29.7393 80.8891 30.1724 80.8414 30.555 80.6038C30.9435 80.3679 31.2156 79.9852 31.3715 79.4556C31.529 78.9203 31.5076 78.4512 31.3072 78.0482C31.1143 77.6412 30.7761 77.3665 30.2926 77.2242C29.8034 77.0802 29.3654 77.1233 28.9787 77.3534C28.5977 77.5853 28.3276 77.9718 28.1683 78.5128C28.0108 79.0481 28.0285 79.5193 28.2214 79.9263C28.4217 80.3293 28.7665 80.6028 29.2558 80.7468ZM38.5592 80.3798C38.5091 80.1461 38.3957 79.947 38.219 79.7824C38.0498 79.6138 37.827 79.4888 37.5507 79.4074C37.073 79.2668 36.6436 79.3125 36.2626 79.5443C35.8834 79.7704 35.6166 80.1454 35.4625 80.6691C35.2981 81.2275 35.319 81.709 35.5252 82.1136C35.7387 82.5142 36.1103 82.7925 36.6398 82.9483C37.0024 83.0551 37.3346 83.0528 37.6363 82.9414C37.9438 82.8318 38.2059 82.6212 38.4227 82.3098L36.5492 81.7583L36.8694 80.6705L40.0811 81.6158L39.6771 82.9886C39.4593 83.3248 39.1714 83.6122 38.8135 83.8508C38.4613 84.0911 38.0549 84.2499 37.5944 84.327C37.1339 84.4041 36.6504 84.3681 36.1439 84.219C35.5453 84.0428 35.0481 83.7557 34.6523 83.3578C34.264 82.9558 34.0061 82.4827 33.8786 81.9386C33.7568 81.3961 33.784 80.8256 33.9602 80.227C34.1364 79.6284 34.4226 79.1341 34.8188 78.7441C35.2225 78.35 35.6956 78.0921 36.2381 77.9703C36.7822 77.8428 37.3536 77.8671 37.9522 78.0433C38.6775 78.2568 39.2359 78.6119 39.6276 79.1087C40.025 79.6072 40.2128 80.191 40.191 80.8601L38.5592 80.3798ZM43.6709 79.8016L41.887 85.8625L40.4106 85.428L42.1945 79.367L43.6709 79.8016ZM48.8969 87.9258L47.4205 87.4913L46.0516 83.026L44.9513 86.7645L43.4749 86.3299L45.2589 80.269L46.7352 80.7035L48.0991 85.186L49.2045 81.4303L50.6809 81.8649L48.8969 87.9258Z" fill="white"/>
<rect x="20" y="132" width="42" height="12" rx="4" fill="white" fill-opacity="0.58" stroke="#E5DAFB" stroke-width="2"/>
<rect x="20" y="132" width="42" height="12" rx="4" fill="white" fill-opacity="0.58" stroke="#E5DAFB" stroke-width="2"/>
<path d="M24 135L25 136.2M25 136.2V139.8M25 136.2L26 135M25 139.8L24 141M25 139.8L26 141" stroke="#E5DAFB"/>
<rect x="20" y="137" width="42" height="12" rx="4" fill="white" fill-opacity="0.58" stroke="#E5DAFB" stroke-width="2"/>
<rect x="20" y="137" width="42" height="12" rx="4" fill="white" fill-opacity="0.58" stroke="#E5DAFB" stroke-width="2"/>
<path d="M24 140L25 141.2M25 141.2V144.8M25 141.2L26 140M25 144.8L24 146M25 144.8L26 146" stroke="#E5DAFB"/>
<rect x="20" y="143" width="42" height="12" rx="4" fill="white" fill-opacity="0.58" stroke="#E5DAFB" stroke-width="2"/>
<rect x="20" y="143" width="42" height="12" rx="4" fill="white" fill-opacity="0.58" stroke="#E5DAFB" stroke-width="2"/>
<path d="M24 146L25 147.2M25 147.2V150.8M25 147.2L26 146M25 150.8L24 152M25 150.8L26 152" stroke="#E5DAFB"/>
<path d="M135.474 287H96C94.3431 287 93 288.343 93 290V300.5C93 302.157 94.3431 303.5 96 303.5H135.474C137.131 303.5 138.474 302.157 138.474 300.5V291.136V290C138.474 288.343 137.131 287 135.474 287Z" fill="url(#paint2_linear)"/>
<path d="M115.744 307H96C94.3431 307 93 308.343 93 310V313C93 314.657 94.3431 316 96 316H115C116.657 316 118 314.657 118 313V309.256C118 308.01 116.99 307 115.744 307Z" fill="url(#paint3_linear)"/>
<path d="M137 319H114C112.343 319 111 320.343 111 322V330C111 331.657 112.343 333 114 333H137C138.657 333 140 331.657 140 330V322.51V322C140 320.343 138.657 319 137 319Z" fill="url(#paint4_linear)"/>
<path d="M137.744 336H114C112.343 336 111 337.343 111 339V342C111 343.657 112.343 345 114 345H137C138.657 345 140 343.657 140 342V338.256C140 337.01 138.99 336 137.744 336Z" fill="url(#paint5_linear)"/>
<rect x="46.4827" y="186.57" width="9" height="2" transform="rotate(-17.1554 46.4827 186.57)" fill="#E5DAFB"/>
<rect x="28.328" y="192.174" width="19" height="2" transform="rotate(-17.1554 28.328 192.174)" fill="#CBB7F7"/>
<circle cx="44.8665" cy="188.115" r="2.5" transform="rotate(-17.1554 44.8665 188.115)" fill="white" stroke="#CBB7F7"/>
<rect x="37" y="182" width="9" height="2" fill="#E5DAFB"/>
<rect x="18" y="182" width="19" height="2" fill="#CBB7F7"/>
<circle cx="35" cy="183" r="2.5" fill="white" stroke="#CBB7F7"/>
<rect x="37" y="174" width="9" height="2" fill="#E5DAFB"/>
<rect x="18" y="174" width="19" height="2" fill="#CBB7F7"/>
<circle cx="35" cy="175" r="2.5" fill="white" stroke="#CBB7F7"/>
</g>
<defs>
<filter id="filter0_d" x="18.8608" y="61.658" width="54.2782" height="28.5749" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="-1"/>
<feGaussianBlur stdDeviation="0.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter1_d" x="8.7738" y="64.2644" width="54.4524" height="31.3623" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="-1"/>
<feGaussianBlur stdDeviation="0.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<linearGradient id="paint0_linear" x1="237" y1="355.765" x2="237" y2="369" gradientUnits="userSpaceOnUse">
<stop stop-color="#EBE3FC"/>
<stop offset="1" stop-color="#EBE3FC" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="86" y1="1.76471" x2="86" y2="15" gradientUnits="userSpaceOnUse">
<stop stop-color="#EBE3FC"/>
<stop offset="1" stop-color="#EBE3FC" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint2_linear" x1="115.737" y1="287" x2="115.737" y2="303.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#F6F2FE" stop-opacity="0.78"/>
<stop offset="1" stop-color="#F6F2FE"/>
</linearGradient>
<linearGradient id="paint3_linear" x1="105.5" y1="307" x2="105.5" y2="316" gradientUnits="userSpaceOnUse">
<stop stop-color="#F6F2FE" stop-opacity="0.78"/>
<stop offset="1" stop-color="#F6F2FE"/>
</linearGradient>
<linearGradient id="paint4_linear" x1="125.5" y1="319" x2="125.5" y2="333" gradientUnits="userSpaceOnUse">
<stop stop-color="#F6F2FE" stop-opacity="0.78"/>
<stop offset="1" stop-color="#F6F2FE"/>
</linearGradient>
<linearGradient id="paint5_linear" x1="125.5" y1="336" x2="125.5" y2="345" gradientUnits="userSpaceOnUse">
<stop stop-color="#F6F2FE" stop-opacity="0.78"/>
<stop offset="1" stop-color="#F6F2FE"/>
</linearGradient>
</defs>
</svg>
title slug createdAt language preview comments
Rakenna oma mobiilisovellus. Ilman koodia!
no-code-ui
2019-07-18T20:04:29Z
fi
Nettisivun tai mobiilisovelluksen toteuttamiseen ei aina tarvita koodaria.
false

Rakenna oma mobiilisovellus. Ilman koodia!

Mobiiliprototyyppi
päivässä ilman
koodia

Nettisivun tai mobiilisovelluksen toteuttamiseen ei aina tarvita koodaria.

Ohjelmointitaito on tärkeä kilpailuetu jatkuvasti digitalisoituvassa työ- ja yritysmaailmassa. Kaikilla ei kuitenkaan ole aikaa opetella ohjelmoimaan, eikä ohjelmoijien palkkaus yritykseenkään ole aina järkevää tai edes mahdollista.

"No Code" työkalut tuovat ohjelmoinnin mahdollisuudet jokaisen saataville. Ne ovat kokoelma työkaluja, joiden avulla voidaan rakentaa esimerkiksi digitaalista automaatiota tai vaikkapa mobiilisovelluksia kokonaan ilman koodia.

Nettisivuja ja appeja ei aina tarvitse rakentaa nollasta

Palvelut kuten Squarespace tekevät ammattimaisten, räätälöityjen verkkosivujen luomisesta mahdollista kaikille, ja toimivat niin hyvin, että jopa monet ohjelmistoyritykset tekevät omat kotisivunsa niillä.

Valmiin pohjan käyttäminen onkin usein järkevää, sillä näin ymmärrystä jää myös oman firman sisään, ja ylläpitokustannukset pysyvät huomattavasti alhaisempina. Iso palveluntarjoaja pystyy myös takaamaan tietoturvan ja sivun toimivuuden.

Perinteisten kotisivukoneiden lisäksi myös mobiili- ja web-sovellusten rakentamiseen tarkoitetut koodittomat palvelut tekevät tuloaan. Mainiona esimerkkinä Thunkable, jonka avulla kuka tahansa voi luoda täysin toimivan mobiilisovelluksen.

Tämän tapaiset työkalut sopivat esimerkiksi nopean mobiiliprototyypin tai tuoteidean ensimmäisen toimivan version toteuttamiseen. Näin kalliin ja pitkän ohjelmistoprojektin aloittamista voidaan viivästyttää, ja ideaa voidaan testata jo ennen varsinaista investointia.

Esimerkkejä:

  • Yrityksen sisäisen web-sovelluksen luominen
  • Nettisivu yritykselle
  • Mobiiliprototyyppi / MVP

Kurssit

Olisiko sinulle tai tiimillesi hyötyä tällaisista työkaluista? Kursseilla työkaluihin tutustutaan workshop-hengessä ja kaikki pääsevät kokeilemaan niitä itse. Pyrin suunnittelemaan jokaisen kurssin niin, että harjoitukset vastaisivat mahdollisimman paljon niitä ongelmia, joihin osallistujat törmäävät työssään. Harjoitukset ja työkaluihin perehtyminen antavat osallistujalle valmiuden myös tunnistaa tilanteita, joissa automaatiosta ja No Code - työkaluista on hyötyä.

Kouluttajana toimii pitkän uran ohjelmistokehittäjänä ja konsulttina tehnyt Riku Rouvila (LinkedIn).

Kiinnostuitko? Jätä sähköpostiosoitteesi niin kerromme lisää seuraavien kurssien lähestyessä.
Järjestämme kursseja niin yrityksille kuin yksityishenkilöillekin ympäri Suomen.

Lähetä <style> .message { animation: dash 5s cubic-bezier(.97,.1,.7,1.04) infinite; animation-delay: 800ms; transform: translateX(0); } #start { animation: nudge 5s infinite; transform-origin: 69px 131px; } svg { } @keyframes dash { 30% { transform: translateX(225px); } 100% { transform: translateX(225px); } } @keyframes nudge { 7% { transform: scale(1.2); } 15% { transform: scale(1); } 100% { transform: scale(1); } } </style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment